design-system

# Design System Skill Build scalable, maintainable design systems with consistent tokens, variants, and documentation. ## CRITICAL: Check Existing First **Before creating ANY design system components, verify:** 1. **Check for existing design system:** ```bash ls -la src/components/ui/ cat package.json | grep -i "shadcn\|radix\|headless" cat components.json 2>/dev/null # shadcn config ``` 2. **Check for existing tokens:** ```bash cat tailwind.config.* | head -100 cat src/styles/globals.css | head -50 rg "var\(--" --type css | head -20 ``` 3. **Check for existing patterns:** ```bash rg "cva\(|variants:" --type ts --type tsx | head -10 rg "cn\(|clsx\(|twMerge" --type tsx | head -5 ``` **Why:** Don't recreate existing primitives. Extend and enhance what exists. ## Design Tokens ### CSS Custom Properties ```css /* globals.css */ :root { /* Colors - Semantic */ --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; /* Spacing */ ...