ss-review

# UI Design Review First resolve the effective rule set from `PRODUCT-PRINCIPLES.md`, `RULESETS.md` or the compiled grammar, `ADAPTERS.md`, domain/page, optional `PRESETS.md` profile, and `STYLESEED.md`. Review task fitness and grammar coherence before framework conventions. For non-web artifacts, replace React/Tailwind-only checks with the active adapter's render/export checks. ## 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 ...