mcpField
B
beautiful-shadows

beautiful-shadows

github.com/mengtoDesign & UI7.1k2.2k installsUpdated 3d ago
Repository

About beautiful-shadows

Beautiful Shadows is a design skill providing layered, neutral Tailwind shadow utilities for interface surfaces. It helps designers choose a consistent elevation level for controls, cards, panels, and hero media.

Key features

  1. 01Three defined shadow levels
  2. 02Tailwind utility class recipes
  3. 03Guidance by component type
  4. 04Rules for consistent shadow use

Use cases

  1. 01Add subtle elevation to form controls
  2. 02Style cards and popovers consistently
  3. 03Give hero media stronger visual lift

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mengto/skills --skill beautiful-shadows

After installing, type/beautiful-shadowsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

demo/
index.html
PROMPT.md
source.json

Details

From the project README

Beautiful Shadows

Use When

  • A surface needs polished, layered elevation.
  • Default Tailwind shadows feel too generic or blunt.
  • The design needs neutral, refined depth without colored glow.

Shadow Utilities

Use these exact Tailwind classes.

Beautiful sm

Use for compact cards, form controls, pills, and quieter surfaces.

shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]
Beautiful md

Use for cards, panels, popovers, and the default elevated surface style.

shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]
Beautiful lg

Use for hero media, feature callouts, modal-like containers, and the strongest lift.

shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]

Examples

<div class="rounded-xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
  ...
</div>

Usage Rules

  • Use Beautiful sm for compact cards, form controls, pills, and quieter surfaces.
  • Use Beautiful md for cards, panels, popovers, and the default elevated surface style.
  • Use Beautiful lg for hero media, feature callouts, modal-like containers, and the strongest lift.
  • Pair with a clean surface fill and a consistent radius.
  • Use one shadow strength per component state unless an interaction clearly changes elevation.

Avoid

  • Mixing these with default Tailwind shadow scales on the same component.
  • Tinting these shadows with strong colors; keep them neutral and refined.
  • Applying Beautiful lg to dense lists or tiny controls.
  • Stacking multiple shadow utilities on one element.
  • Using these as a substitute for clear borders in very low-contrast layouts.

Comments

Markdown supported