design-systemlisted

# Design System Skill When doing any UI or styling work, follow these guidelines. ## Before Making Changes 1. Read the design tokens from your `tailwind.config.ts` (or equivalent) and styles directory 2. Check existing components in your components directory for patterns before creating new ones 3. Use your component library (shadcn/ui, Radix, etc.) as the base — don't reinvent existing components 4. Use the `cn()` utility (or equivalent) for conditional classNames ## Rules - IMPORTANT: Use Tailwind classes only — no inline styles or CSS modules - IMPORTANT: All interactive elements must have hover, focus, and active states - IMPORTANT: Use semantic HTML elements — `button` for clickable actions, NOT `div` with `onClick` - Respect `prefers-reduced-motion` for all animations - Mobile-first: design for mobile, then add responsive breakpoints - All images need `alt` text - Minimum touch target: 44x44px on mobile - Ensure sufficient contrast ratios (4.5:1 for text, 3:1 for large text) ## Color Usage - Read the actual color tokens from your config before using any colors - Use semantic color names (primary, destructive, muted) not raw hex values - Never introduce new arbitrary colors without checking existing tokens ## Component Patterns - Server Components by default — add 'use client' only when needed - Co-locate component, types, and tests in the same directory when possible - Extract components when they exceed ~150 lines or are reused in 2+ places - Check existing co