Glass depth ui

Skill swd3k/skills/agent-skills/web-design/glass-depth-ui

Apply restrained glassmorphism and depth: blur, borders, elevation — without illegible text. Use when building glass cards, overlays, or dark glassy dashboards.From its SKILL.md

Install

npx -y skills add swd3k/skills --skill glass-depth-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

28 days oldThe repository was created 28 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

0.9 KB, 188 tokens by cl100k_base, as published. Nobody here has run it

Glass & Depth UI

Recipe

.glass {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  box-shadow: var(--elev-2);
}

Rules

Glass only on a busy or gradient background — else it's muddy
Keep text contrast; never white 40% on light blur
Limit blur radius for performance (8–16px typical)
Prefer hairline borders + soft shadow over heavy skeuomorphism

Pitfalls

Every card glassed → visual noise
Backdrop-filter on huge regions → jank
Ignoring Firefox/safari fallbacks (solid surface)

Acceptance

Text passes contrast on glass samples
Fallback without backdrop-filter still readable

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.