first

.claude/UI-CHECKLIST.md

@@ -0,0 +1,103 @@
+# 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