# UI/UX Quick Checklist

Use this checklist before committing any UI changes.

## ⚡ Critical (MUST FIX)

### Touch Targets
- [ ] All buttons/links ≥ 44x44px (`min-h-44px min-w-44px`)
- [ ] Minimum 8px gap between interactive elements (`gap-2`)

### Typography
- [ ] Body text ≥ 16px on mobile (`text-16px`)
- [ ] Line height ≥ 1.5 for body text (`leading-normal`)

### Colors
- [ ] Text contrast ≥ 4.5:1 for normal text
- [ ] No `#bd9e84` or `text-light` for critical content
- [ ] Light mode: Use `bg-white/80` minimum (not `/10`)

### Icons
- [ ] **NEVER** use emoji (🎨 🚀) as UI icons
- [ ] **ALWAYS** use `i-mdi-*` or `i-my-icons-*`
- [ ] All icons sized consistently (`w-24px h-24px`)

### Accessibility
- [ ] Icon-only buttons have `aria-label`
- [ ] Form inputs have `<label>` elements
- [ ] Error messages use `role="alert"`
- [ ] Focus states visible (`focus:ring-2 focus:ring-primary`)

### Interactions
- [ ] All clickable elements have `cursor-pointer`
- [ ] Use `@click` not `@mouseenter` for primary actions
- [ ] Loading states disable buttons (`disabled`)

## 🎯 High Priority

### Animations
- [ ] Transitions ≤ 300ms (`duration-200` preferred)
- [ ] Only animate `transform` and `opacity` (NOT `width`/`height`)
- [ ] Respect `prefers-reduced-motion`
- [ ] Hover states don't cause layout shift

### Layout
- [ ] Floating navbar has spacing (`top-4 left-4 right-4`)
- [ ] Content accounts for fixed navbar height
- [ ] No horizontal scroll on mobile
- [ ] Responsive breakpoints: `sm:` `md:` `lg:`

### Performance
- [ ] Images use `lazy-load` attribute
- [ ] Reserve space for async content (no jumping)
- [ ] Skeleton screens for loading states

## 📱 Mobile-Specific

- [ ] Viewport meta tag present (H5 only)
- [ ] Test at 375px, 768px, 1024px viewports
- [ ] Input fields use correct `inputmode` (email, numeric, etc.)
- [ ] Bottom navigation uses `pb-safe` for iPhone notch

## 🌗 Light/Dark Mode

- [ ] Test in both light and dark modes
- [ ] Glass cards: `bg-white/80 dark:bg-white/10`
- [ ] Borders: `border-gray-200 dark:border-white/20`
- [ ] Text: `text-main` `text-content` (uses CSS variables)

## 🎨 Brand Consistency

- [ ] Primary CTA uses `bg-primary` (#ff6700 orange)
- [ ] Success states use `text-success` (green)
- [ ] Error states use `text-error` (red)
- [ ] Consistent `rounded-8px` or `rounded-16px` (not random)

## ✅ Before Committing

```bash
# Quick visual check:
1. ✅ No emoji icons
2. ✅ All buttons ≥ 44px tall
3. ✅ Body text ≥ 16px
4. ✅ Hover states work (no layout shift)
5. ✅ Dark mode looks good
6. ✅ No horizontal scroll on mobile
```

## 🚫 Common Mistakes

| ❌ DON'T | ✅ DO |
|---------|------|
| `<span>🏠</span>` | `<i class="i-mdi-home"></i>` |
| `text-12px` for body | `text-16px` for body |
| `bg-white/10` in light | `bg-white/80` in light |
| `w-32px h-32px` button | `min-h-44px min-w-44px` |
| `@mouseenter` | `@click` or `@tap` |
| `duration-1000` | `duration-200` |
| `animate-bounce` everywhere | Only for loaders |
| `<input placeholder="Email">` | `<label>Email</label><input>` |

---

**Full Guide**: See `.claude/DESIGN-SYSTEM.md` for complete details