Qa Design

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 | ` or aria-label | | A4 | Alt text on all informative images | 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
]*(?]*>

# Buttons without accessible text
]*>(\s*]*>\s*)

# Inputs without label
]*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 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 | = 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: christopherlouet
• Source: christopherlouet/claude-base
• License: MIT
• Homepage: https://christopherlouet.github.io/claude-base/

Install and usage instructions live in the source repository linked above.