# Design-to-Code Review Checklist

Use this when reviewing AI-generated code from your designs.

---

## Token Usage

- [ ] No hardcoded hex colors
- [ ] No hardcoded spacing values
- [ ] No hardcoded font sizes
- [ ] No hardcoded border radius
- [ ] No hardcoded shadows
- [ ] Semantic tokens used, not primitives

## Component Accuracy

- [ ] Correct component for the context
- [ ] All variants present
- [ ] States: hover, active, disabled, focus, error, loading
- [ ] Nesting matches the design
- [ ] Props match the design spec

## Accessibility

- [ ] Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)
- [ ] Focus indicators visible
- [ ] Keyboard navigation works
- [ ] ARIA attributes present and correct
- [ ] Screen reader tested
- [ ] Touch targets 44x44px minimum
- [ ] Alt text on all images
- [ ] Form inputs paired with visible labels

## Responsiveness

- [ ] Works on mobile (320px+)
- [ ] Works on tablet (768px+)
- [ ] Works on desktop (1024px+)
- [ ] No horizontal scroll
- [ ] Text readable without zooming
- [ ] Touch-friendly spacing on mobile

## Common AI Mistakes

- [ ] No invented tokens
- [ ] Correct component choice (Dialog vs Sheet, Alert vs Toast)
- [ ] All states built, not just happy path
- [ ] No hardcoded strings (should be props/i18n)
- [ ] No random z-index values
- [ ] No inline styles where utilities belong
- [ ] Error states included in forms
- [ ] Dark mode works correctly
- [ ] Responsive units, not exact pixels

## Before Merging

- [ ] Tested in light mode and dark mode
- [ ] Tested with keyboard only
- [ ] Tested at 200% browser zoom
- [ ] No console errors
- [ ] Follows project naming conventions
- [ ] No unnecessary dependencies added