Skills
.Work. You
Rest

beautiful-shadows

Community

Use crisp neutral Tailwind shadows

Design & Creative#design system#components#tailwindcss#cards#shadows#css utility#ui elevation
AuthorMengTo
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill solves inconsistent, overly generic, or overly blunt elevations caused by default Tailwind shadow presets in UI designs.

Core Features & Use Cases

  • Exact Tailwind arbitrary shadow utilities: Provides copy-paste-ready shadow class definitions with neutral, refined depth.
  • Size-to-surface mapping: Defines when to use Beautiful sm (quieter elevation) versus Beautiful md (default elevated surfaces) versus Beautiful lg (strong lift for hero/media-like containers).
  • Design guardrails: Helps avoid mixing these shadows with Tailwind’s default shadow scales, tinting with strong colors, stacking multiple shadow utilities, and applying lg to tiny/dense elements.

Quick Start

Apply the Beautiful md shadow class to a card or panel that needs a consistent, neutral elevated look.

Dependency Matrix

Required Modules

None required

Components

Standard package

đź’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: beautiful-shadows
Download link: https://github.com/MengTo/Skills/archive/main.zip#beautiful-shadows

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.