How do I install the Mengto Beautiful Shadows skill?

Run npx skillmds@latest add oimiragieo/mengto-beautiful-shadows in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mengto Beautiful Shadows safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mengto Beautiful Shadows?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mengto Beautiful Shadows free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mengto Beautiful Shadows?

oimiragieo (@oimiragieo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mengto Beautiful Shadows by oimiragieo

Name: Mengto Beautiful Shadows
Rating: 4.2 (5 reviews)
Author: oimiragieo

Mengto Beautiful Shadows

Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or colored tinting.

oimiragieo Updated Aug 19, 2026 0 repo stars

File contents

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.

---name: mengto-beautiful-shadowsdescription: Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or colored tinting.---# 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 UtilitiesUse these exact Tailwind classes.### Beautiful smUse for compact cards, form controls, pills, and quieter surfaces.```txtshadow-[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 mdUse for cards, panels, popovers, and the default elevated surface style.```txtshadow-[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 lgUse for hero media, feature callouts, modal-like containers, and the strongest lift.```txtshadow-[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```html<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.

Frequently asked questions