qa-design

name	qa-design
description	UI/UX design audit and verification of web best practices, including responsive/mobile-first breakpoints. Trigger when the user wants to audit the design, verify the UI/UX, check responsive behaviour, or improve the user interface.
allowed-tools	["Read","Glob","Grep"]
context	fork

UI/UX Design Audit

Objective

Audit a web interface against 100+ rules covering accessibility, forms, animations, typography, images, performance, navigation, dark mode, and internationalization.

Audit categories

┌──────────────────────────────────────────────────────────────────┐
│                      UI/UX AUDIT                                  │
├──────────────────────────────────────────────────────────────────┤
│                                                                   │
│  1. ACCESSIBILITY       ARIA, contrast, focus, keyboard          │
│  2. FORMS               Validation, feedback, autofill           │
│  3. ANIMATIONS          Performance, reduced-motion, timing      │
│  4. TYPOGRAPHY          Hierarchy, readability, responsive       │
│  5. IMAGES              Alt text, lazy loading, formats          │
│  6. UI PERFORMANCE      Layout shift, first paint, bundle        │
│  7. NAVIGATION          Breadcrumbs, mobile menu, deep links     │
│  8. DARK MODE           CSS variables, images, contrast          │
│  9. TOUCH INTERACTIONS  Target size, swipe, gestures             │
│  10. INTERNATIONALIZATION  RTL, dates, plurals, translations    │
│  11. RESPONSIVE         Breakpoints, mobile-first, viewport       │
│                                                                   │
└──────────────────────────────────────────────────────────────────┘

1. Accessibility

Critical rules

#	Rule	Verification
A1	Minimum contrast 4.5:1 (normal text)	Check CSS colors
A2	Minimum contrast 3:1 (large text, icons)	Check CSS colors
A3	Labels on all form fields	<label for=""> or aria-label
A4	Alt text on all informative images	<img alt=""> non-empty
A5	Full keyboard navigation	Tab, Enter, Escape, Arrow keys
A6	Visible focus on interactive elements	:focus-visible style
A7	Correct ARIA roles	role, aria-* attributes
A8	No purely visual content	Text alternatives
A9	Logical heading structure	h1 > h2 > h3, no skipping
A10	Skip to content link	First focusable element

Patterns to look for

# Images without alt
<img[^>]*(?<!alt=")[^>]*>

# Buttons without accessible text
<button[^>]*>(\s*<(svg|img|i)[^>]*>\s*)<\/button>

# Inputs without label
<input(?![^>]*aria-label)(?![^>]*id=["'][^"']*["'][^>]*)[^>]*>

# Insufficient contrast (light colors on light background)
color:\s*#[def][def][def]|color:\s*#[cdef]{6}

2. Forms

#	Rule	Detail
F1	Inline validation (not only on submit)	Show error on blur
F2	Descriptive error messages	Not just "Invalid field"
F3	Autocomplete attributes	autocomplete="email", "name", etc.
F4	Submit button disabled if invalid	Or clear feedback
F5	Required field indicator	* or explicit text
F6	Correct input type	type="email", "tel", "number"
F7	Minimum font size 16px on mobile	Avoids iOS zoom
F8	Loading state on submit	Spinner or disabled

3. Animations and transitions

#	Rule	Detail
AN1	prefers-reduced-motion respected	Disable animations on request
AN2	Duration < 400ms for micro-interactions	Fast feedback
AN3	No flash/blink > 3Hz	Epilepsy risk
AN4	CSS transitions preferred over JS	GPU performance
AN5	will-change for heavy animations	Compositor optimization

/* prefers-reduced-motion pattern */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

4. Typography

#	Rule	Detail
T1	Clear visual hierarchy	Distinct sizes, weights, colors
T2	Line length 50-75 characters	max-width: 65ch
T3	Minimum line-height 1.5 for body text	Readability
T4	No more than 2-3 fonts	Visual consistency
T5	Minimum size 16px for body	Mobile readability
T6	System font fallback defined	font-family: 'Custom', system-ui, sans-serif

5. Images

#	Rule	Detail
I1	Descriptive alt text	Not "image", not empty unless decorative
I2	Lazy loading	loading="lazy" except above-the-fold
I3	Explicit dimensions	width and height to avoid CLS
I4	Modern format (WebP, AVIF)	With fallback
I5	Responsive images	srcset and sizes
I6	Optimized compression	< 100KB for UI images

6. UI Performance

#	Rule	Detail
P1	CLS < 0.1	No layout shift
P2	LCP < 2.5s	Largest Contentful Paint
P3	FID < 100ms	First Input Delay
P4	Skeleton/loading states	No blank page
P5	Code splitting per route	Bundles < 200KB gzip
P6	Inline critical CSS	Fast above-the-fold

7. Navigation

#	Rule	Detail
N1	Breadcrumbs on deep pages	User orientation
N2	Accessible mobile menu	Hamburger + overlay
N3	Easy back navigation	Predictable navigation
N4	Active page indication	Menu highlight
N5	Useful 404 page	Navigation links
N6	Working deep links	Shareable URLs

8. Dark Mode

#	Rule	Detail
D1	CSS custom properties	--color-bg, --color-text
D2	Adapted images	No white images on dark background
D3	Sufficient contrast in dark	Recheck ratios
D4	Smooth transition	transition: background-color 0.2s
D5	Respect prefers-color-scheme	Automatic detection

9. Touch interactions

#	Rule	Detail
TC1	Touch targets >= 44x44px	Apple/Google minimum
TC2	Spacing between targets >= 8px	Avoid tap errors
TC3	No hover-only interactions	Touch alternatives
TC4	Intuitive swipe if used	Natural direction

10. Internationalization

#	Rule	Detail
I18N1	Externalized text	No hardcoded strings
I18N2	RTL support	direction: rtl compatible
I18N3	Local date formats	No hardcoded US format
I18N4	Plurals handled	No "1 item(s)"

11. Responsive & breakpoints

Mobile-first audit across the 7 breakpoints (320, 375, 425, 768, 1024, 1440, 2560px).

#	Rule	Detail
R1	Viewport meta + mobile-first CSS	min-width media queries, not max-width
R2	No fixed-pixel container widths	Fluid layouts (flex/grid, %, max-width)
R3	Touch targets >= 44px, spacing >= 8px	Shared with category 9 (Touch)
R4	Body font >= 16px, line-height >= 1.5	Mobile readability (shared with Typography)
R5	Responsive images (srcset, sizes, lazy)	Shared with category 5 (Images)
R6	Forms usable on mobile	Inputs >= 44px, correct type, right keyboard
R7	Portrait + landscape both tested	No clipped/overflowing content

Report a per-breakpoint OK/KO table (Mobile 320-425, Tablet 768, Desktop 1024-1440) and list issues by breakpoint with severity. Test on real devices, not only DevTools.

Expected output

## UI/UX Audit: [Project name]

### Overall score: X/100

### Results by category

| Category | Score | Issues |
|-----------|-------|--------|
| Accessibility | X/10 | [N issues] |
| Forms | X/10 | [N issues] |
| Animations | X/10 | [N issues] |
| Typography | X/10 | [N issues] |
| Images | X/10 | [N issues] |
| UI Performance | X/10 | [N issues] |
| Navigation | X/10 | [N issues] |
| Dark Mode | X/10 | [N issues] |
| Touch | X/10 | [N issues] |
| i18n | X/10 | [N issues] |
| Responsive | X/10 | [N issues] |

### Critical issues
- [CRITICAL] [file:line] - Description

### Recommended improvements
- [IMPORTANT] [file:line] - Description

### Suggestions
- [SUGGESTION] - Description

Rules

• Check ALL categories, not just the obvious ones
• Prioritize issues by user impact
• Provide concrete solutions, not just findings
• Test on mobile AND desktop