Guide · Agent skill
How to use the Beautiful Shadows agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The beautiful-shadows skill is an agent skill that teaches an AI coding agent three ready-made, multi-layer neutral shadow styles written as exact Tailwind CSS classes. It is for front-end developers and designers who build with Tailwind and want subtle, consistent depth on cards, panels, popovers and modal-style boxes. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and what it needs to work.
Beautiful ShadowsMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the beautiful-shadows ZIP from the item page on this site.
- 2Unzip the skill. Unzip the download so you have a beautiful-shadows folder containing SKILL.md and the demo folder.
- 3Place the folder. Move the folder to ~/.claude/skills/ for personal use, or to a project's .claude/skills/ folder for one project.
- 4Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill there instead.
- 5Confirm your project uses Tailwind. Check that the project uses Tailwind CSS, since the shadow classes depend on it.
- 6Ask for a styled surface. Describe the card, panel, popover or modal you want polished and mention refined or layered shadows.
What does the beautiful-shadows skill make the agent do?
When installed, the agent knows three shadow styles called Beautiful sm, Beautiful md and Beautiful lg. Each is a long Tailwind arbitrary value utility built from several soft, neutral layers rather than one generic shadow.
When you ask the agent to make cards, buttons, panels, popovers or modal-style boxes look more polished, it uses these shadows instead of Tailwind's default shadow scale. It also follows rules about which strength fits which surface.
The skill is a styling reference. It does not run scripts or make network calls, and it does not change anything outside the code the agent writes for your interface.
- sm: compact cards, form controls, pills and quieter surfaces
- md: cards, panels, popovers and the default elevated surface style
- lg: hero media, feature callouts, modal-like containers and the strongest lift
How do you install the beautiful-shadows skill?
Download the ZIP for the skill from the item page, then unzip it. Put the beautiful-shadows folder in one of two places: your personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want the skill to apply only to that project.
If you use the Claude apps instead, you can upload the skill there under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/beautiful-shadows/
- Project only: .claude/skills/beautiful-shadows/ inside your project
How do you trigger the skill with natural requests?
You do not need a special command. Describe the surface you want to improve and say that you want refined or layered shadows. The skill's description covers compact cards, controls, panels, popovers, hero media, feature callouts and modal-like containers, so requests that name these work well.
The demo prompts in the package show the pattern. They start with the skill name written as $beautiful-shadows, followed by the task. Using that prefix makes the request explicit.
- Make these pricing cards feel more polished, with soft neutral depth.
- Add refined elevation to this modal-style dialog using the beautiful-shadows skill.
- Use $beautiful-shadows to give the hero image a layered lift.
Use $beautiful-shadows to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.What does the agent write when the skill is active?
The agent applies the exact shadow class to the element and keeps the surface fill and radius consistent. The skill asks for a clean background fill and a consistent radius alongside the shadow. The example below uses the Beautiful md shadow on a white rounded card.
The rules also say to use one shadow strength per component state, unless an interaction clearly changes elevation, and never to stack several shadow utilities on one element.
<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>What do you need before using it?
The project must use Tailwind CSS. The shadow classes are Tailwind arbitrary value utilities, so without Tailwind they have no effect. The skill does not install Tailwind for you.
The skill is a good fit for front-end developers building Tailwind interfaces, designers prototyping in code, and teams that want shared shadow tokens. It is a poor fit where the layout is very low in contrast, because the skill itself warns that shadows can replace needed borders in those cases.
- Tailwind CSS in the project
- An agent that supports agent skills, or the Claude apps with the Skills setting
What are the safety notes for scripts and network access?
The skill runs no scripts and uses no network access. Its files are a SKILL.md instruction file plus demo files (demo/index.html, demo/PROMPT.md and demo/source.json). Because it contains only styling guidance, the main thing to check is that the code the agent writes matches your design system.
The skill also tells the agent to avoid mixing these shadows with default Tailwind shadow scales on the same component, avoid strong colored tinting, and avoid Beautiful lg on dense lists or tiny controls.
- Runs scripts: no
- Uses network: no
- Licence: MIT
What tips help you get the best results?
Pick the strength by the surface's role, not by how important it feels. Small controls and quiet surfaces take sm, cards and panels take md, and only hero media, feature callouts and modal-like containers take lg.
Keep one shadow per element. If you need a different elevation on hover or press, change it deliberately for that state rather than stacking utilities.
- Keep fills clean and radius consistent so the layers read well.
- Do not combine these with default Tailwind shadow classes on the same element.
- If a layout looks flat after applying the shadow, check contrast and add a clear border instead.
What people use it for
- Giving product cards and pricing tiles soft, consistent elevation with Beautiful md.
- Lifting a modal-style dialog or feature callout with Beautiful lg.
- Styling form controls and pills with the quieter Beautiful sm shadow.
- Building a standalone HTML prototype that uses one shared set of shadow levels across its panels.
- Creating a hero media block with a strong neutral lift that does not use colored glow.
Frequently asked questions
Is the beautiful-shadows skill free?
The skill is published under the MIT licence, as shown on the item page. Check the licence file in the download for the exact terms before reusing it in your own work.
What do I need to use beautiful-shadows?
You need Tailwind CSS in your project, because the shadows are Tailwind arbitrary value utilities. You also need an agent that supports agent skills, or the Claude apps with Skills under Settings → Capabilities.
Where do I install the beautiful-shadows skill?
Unzip the downloaded ZIP and place the beautiful-shadows folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Why doesn't the shadow show up after the agent adds it?
The most likely cause is that the project does not use Tailwind CSS, since the classes do nothing without it. Also check that the surface has a fill and that the layout is not so low in contrast that a border is needed instead.
How is this different from Tailwind's default shadows?
The skill uses exact multi-layer neutral shadows written as arbitrary values, rather than Tailwind's default shadow scale. The skill's rules say not to mix the two on the same component.
Does the skill run code or access the internet?
No. The item page states that it runs no scripts and uses no network access. It is a styling reference that guides the code the agent writes.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use beautiful-shadows if you build with Tailwind CSS and want subtle, consistent neutral depth across cards, panels and modals, with a shared set of three shadow levels. Pick a different approach if your project does not use Tailwind, or if your layouts are so low in contrast that you need clear borders rather than shadows.
Download the skill