ss-component

# UI Component Generator ## When NOT to use - For full-page scaffolding → use `/ss-page` - For composed multi-component patterns → use `/ss-pattern` - For tweaking an existing component — just edit the file directly - For non-StyleSeed projects (no `components/ui/` directory or no Tailwind v4) Generate a new component: **$0** Description: $ARGUMENTS ## Instructions 1. First, read the design system seed for context: - Read `CLAUDE.md` for component conventions - Read `css/theme.css` for available design tokens - Read `components/ui/button.tsx` as a reference pattern 2. Follow these conventions strictly: - Use `function` declaration (not `const`) - Add `data-slot="component-name"` attribute - Use `cn()` from `@/components/ui/utils` for all className merging - Use `React.ComponentProps<>` for prop typing - Always support `className` prop for overrides - Use CVA (`class-variance-authority`) if the component has variants - Use semantic color tokens (`bg-card`, `text-foreground`) — never inline hex 3. Design token usage: - Colors: `text-foreground`, `bg-card`, `text-brand`, `text-muted-foreground`, `border-border` - Shadows: `shadow-[var(--shadow-card)]`, `shadow-[var(--shadow-elevated)]` - Radius: `rounded-md`, `rounded-lg`, `rounded-2xl` - Spacing: multiples of 6px (`p-1.5`, `p-3`, `p-6`) - Motion: `duration-[var(--duration-fast)]`, `ease-[var(--ease-default)]` 4. Typography rules: - Display (36-48px): `leading-none tracking...