aboudjem/ui-ux-suite/design-checklist

/design-checklist: Pre-Launch Design Checklist

Interactive checklist covering all design quality aspects before launch.

Checklist Categories

Visual Consistency

• [ ] Color system defined with CSS variables or tokens
• [ ] Typography scale with clear hierarchy
• [ ] Consistent spacing scale (4px or 8px base)
• [ ] Consistent border-radius
• [ ] Consistent shadow system
• [ ] Icon style consistent (all outline or all filled)
• [ ] Consistent capitalization (sentence case for UI)

State Coverage

• [ ] Button states: hover, active, focus, disabled, loading
• [ ] Input states: focus, error, disabled, filled
• [ ] Empty states for all data views
• [ ] Loading states (skeletons or spinners)
• [ ] Error states with recovery actions
• [ ] Skeleton screens for initial load

Responsive

• [ ] Works on mobile (375px)
• [ ] Works on tablet (768px)
• [ ] Works on desktop (1440px)
• [ ] No horizontal scroll on any breakpoint
• [ ] Touch targets 44x44 on mobile
• [ ] Text readable without zoom on mobile

Accessibility

• [ ] Contrast ratios pass WCAG AA (4.5:1 text, 3:1 large/non-text)
• [ ] Focus indicators visible on all interactive elements
• [ ] Keyboard navigable (all actions reachable via Tab)
• [ ] Skip-to-content link
• [ ] Alt text on images
• [ ] Form labels associated with inputs
• [ ] prefers-reduced-motion supported
• [ ] Heading hierarchy correct (h1 > h2 > h3)

Dark Mode (if applicable)

• [ ] Proper surface hierarchy (not just inverted)
• [ ] Reduced saturation on vivid colors
• [ ] Text contrast maintained
• [ ] Images/illustrations adapt to dark

Performance

• [ ] Images lazy loaded
• [ ] Fonts preloaded with font-display: swap
• [ ] Above-fold content loads first
• [ ] No layout shift during load

Polish

• [ ] Favicon works at all sizes
• [ ] og:image / social sharing meta
• [ ] Custom error pages (404, 500)
• [ ] Smooth transitions on interactive elements
• [ ] Custom selection color
• [ ] Branded focus ring
• [ ] Print styles (if content is printable)

For each unchecked item, the agent provides specific fix guidance.