gt-agent-company/.claude/UI-CHECKLIST.md

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

# 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