component-interface-design
Installation
SKILL.md
Shadcn UI Designer
Core Design Prompt
When designing any UI, apply this philosophy:
"Design a modern, clean UI following Shadcn principles: apply minimalism with ample white space and simple sans-serif typography; use strategic, subtle shadows for depth and hierarchy; ensure accessibility with high-contrast neutrals and scalable elements; provide beautiful defaults for buttons, cards, and forms that compose modularly; incorporate fluid, non-intrusive animations; maintain a professional palette of soft grays, whites, and minimal accents like purple; output as responsive, customizable React code with Tailwind CSS."
Design Rules
1. Typography Rule
- Limit to 2-3 font weights and sizes per screen
- Use Inter or system fonts for consistency
<h1 className="text-2xl font-semibold">Title</h1>
<p className="text-sm text-muted-foreground">Description</p>