ss-review

# UI Design Review ## When NOT to use - For accessibility-only issues → use `/ss-a11y` - For Nielsen UX heuristics → use `/ss-audit` - For a quick automated check → use `/ss-lint` - For non-UI code (data fetching, business rules) Review the file: **$ARGUMENTS** ## Checklist ### 1. Design Token Compliance - [ ] No hardcoded hex colors (use semantic tokens: `text-foreground`, `bg-brand`, etc.) - [ ] No hardcoded px spacing in Tailwind (use `p-6` not `p-[24px]`) - [ ] Shadows use CSS variables (`shadow-[var(--shadow-card)]`) - [ ] Border radius follows the scale (`rounded-md`, `rounded-lg`, `rounded-2xl`) ### 2. Component Conventions - [ ] Uses `data-slot` attribute - [ ] Uses `cn()` for className merging - [ ] Props typed with `React.ComponentProps<>` - [ ] Supports `className` prop override - [ ] Named export (not default export for components) - [ ] No wrapper components that only add a className ### 3. Accessibility (a11y) - [ ] Touch targets >= 44x44px for interactive elements - [ ] `focus-visible` styles on all interactive elements - [ ] Proper `aria-*` attributes where needed - [ ] Color contrast meets WCAG AA (4.5:1 for text, 3:1 for large text) - [ ] Animations respect `prefers-reduced-motion` - [ ] Images have `alt` text - [ ] Form inputs have associated labels ### 4. Mobile Best Practices - [ ] No horizontal overflow - [ ] Touch-friendly spacing between interactive elements - [ ] Safe area insets handled for notched devices - [ ] Text sizes >= 12px for readabi...