Skip to content
Get packs

Beautiful Shadows

Apply refined, layered neutral box-shadows to Tailwind CSS interfaces

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent knows three ready-made, multi-layer shadow styles written as exact Tailwind CSS classes (small, medium, large). When you ask it to make cards, buttons, panels, popovers or modal-style boxes look more polished, it uses these soft neutral shadows instead of Tailwind's generic defaults, and it follows rules about when each strength fits. It is a styling reference rather than a tool that runs anything.

Great for

  • Front-end developers building Tailwind CSS interfaces who want subtle, professional depth
  • Designers prototyping in code who want consistent elevation levels
  • Teams that want a shared set of shadow tokens for cards, panels and modals

Skip it if

  • Projects not using Tailwind CSS, since the classes will do nothing without it
  • Very low-contrast layouts where the skill itself warns shadows can replace needed borders

Try asking

  • “Make this pricing card look elevated using the medium Beautiful shadow”
  • “Apply the large Beautiful shadow to this hero image container”
  • “Give these form inputs a subtle small Beautiful shadow”
Step-by-step guide: how to use Beautiful ShadowsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    beautiful-shadows.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip beautiful-shadows.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip beautiful-shadows.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for a specific level (sm, md or lg) and the component type so the agent picks the matching rule
  • Keep the surface background white or a clean fill and use a consistent border radius, as the skill recommends
  • Avoid stacking this with default Tailwind shadow classes on the same element

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.