UI Component Creation Skill shadcn/ui + Design System Patterns When to Use : Creating new UI components --- CRITICAL: Read Design System First BEFORE generating any UI : Read Quality Gate : 9/10 minimum on: - Visual distinctiveness - Brand alignment - Accessibility --- Pattern: shadcn/ui Component --- Design Tokens (Required) Use these, not raw values : Colors : - (not ) - (not ) - (#ff6b35 orange) - Spacing : - Tailwind classes (p-4, mb-6, etc.) --- Forbidden Patterns ❌ (use ) ❌ (use ) ❌ without responsive (add , ) --- Required Patterns ✅ Design tokens from system ✅ All states (hover, focus,…