104 lines
3.1 KiB
Markdown
104 lines
3.1 KiB
Markdown
# 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
|