Shadow elevation

Skill Dragoon0x/everything-design-taste/skills/shadow-elevation

Shadow design, elevation systems, depth and layering in UI design.From its SKILL.md

Install

npx -y skills add Dragoon0x/everything-design-taste --skill shadow-elevation

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

One thing to look at

9 stars9 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

1.3 KB, 322 tokens by cl100k_base, as published. Nobody here has run it

Shadow Elevation

Elevation System

Define Levels

--elevation-0: none;                              /* Flat, same plane */
--elevation-1: 0 1px 3px rgba(0,0,0,0.08);        /* Slight lift: cards, buttons */
--elevation-2: 0 4px 8px rgba(0,0,0,0.12);        /* Medium: dropdowns, popovers */
--elevation-3: 0 8px 24px rgba(0,0,0,0.16);       /* High: modals, dialogs */
--elevation-4: 0 16px 48px rgba(0,0,0,0.20);      /* Highest: floating panels */

Rules

Higher = closer to user. Modals above dropdowns above cards.
Shadows go down. Light source is always from above.
Larger shadows are softer. Spread increases with elevation.
Dark mode: Reduce shadow opacity OR use surface color lightening instead.
Consistent across the product. Same elevation level = same shadow value.

Anti-Patterns

Shadows on elements that don't need elevation (flat is fine).
Multiple light sources (shadows going different directions).
Too-dark shadows (looks like a 2012 skeuomorphic app).
Using shadows instead of borders for separation (pick one system).

What ships with it

Read from the repository

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