ss-review

---
name: ss-review
description: Review UI code for design system compliance, accessibility, and best practices
argument-hint: [file-path]
allowed-tools: Read, Grep, Glob
---

# 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 readability
- [ ] Scrollable containers have `-webkit-overflow-scrolling: touch`

### 5. Performance
- [ ] No unnecessary re-renders (stable references, memoization where needed)
- [ ] Images are lazy-loaded
- [ ] Heavy components are code-split

### 6. Typography
- [ ] Uses the Pretendard/Inter font stack
- [ ] Font sizes from the 14-step scale (10-48px, see CLAUDE.md)
- [ ] Proper font weights (400, 500, 600, 700)
- [ ] Display text (36-48px): `leading-none` + `tracking-[-0.02em]`
- [ ] Heading text (18-24px): `leading-snug` + `tracking-[-0.01em]`
- [ ] Body text (14-17px): `leading-normal` (no custom tracking)
- [ ] Caption uppercase (10-13px): `tracking-[0.05em]` or `tracking-wide`
- [ ] No `line-height: 1.5` on display/heading text (too loose)

### 7. Spacing Consistency
- [ ] All spacing values are multiples of 6px (p-1.5, p-3, p-6, etc.)
- [ ] No arbitrary spacing (p-5=20px, gap-3.5=14px are violations)
- [ ] Uses `size-*` shorthand instead of `w-* h-*`
- [ ] Uses `ms-*/me-*` instead of `ml-*/mr-*` (logical properties)
- [ ] Motion transitions use design tokens (`duration-[var(--duration-fast)]`)

## Output Format

Provide:
1. **Score**: Pass / Needs Improvement / Fail
2. **Issues**: List each violation with file:line reference
3. **Fixes**: Concrete code changes for each issue