UI/UX Toolkit
Professional UX/UI evaluation across 9 domains. Combines design theory w/ UX methodology. Framework-agnostic for web, mobile & desktop.
Audit Type Selection
| Need | Load |
|---|
| Full UX Audit | ALL references |
| Visual Design | visual-design.md + interaction-review.md |
| Accessibility | accessibility-inspector.md |
| Usability | heuristic-audit.md + user-flow-analysis.md |
| Responsive/Mobile | responsive-behavior.md |
| Design System | design-system-audit.md |
| Content | content-ux-audit.md |
| AI Interface | ai-ux-patterns.md |
| Privacy/Ethics | privacy-ethics-audit.md |
Sub-Workflows
| Domain | Reference | Purpose |
|---|
| Visual | references/visual-design.md | Hierarchy, typography, color, Gestalt, spacing |
| Heuristic | references/heuristic-audit.md | Nielsen's 10 + modern methods |
| A11Y | references/accessibility-inspector.md | WCAG 2.2 AA/AAA, keyboard, screen readers |
| Flow | references/user-flow-analysis.md | Task paths, friction, cognitive load |
| Responsive | references/responsive-behavior.md | Breakpoints, touch, RTL/LTR, PWA |
| Interactions | references/interaction-review.md | Micro-interactions, animations, feedback |
| Design System | references/design-system-audit.md | Token consistency, component audit |
| Content | references/content-ux-audit.md | UX writing, readability, voice & tone |
| AI/ML | references/ai-ux-patterns.md | Explainability, trust, error handling |
| Privacy | references/privacy-ethics-audit.md | Dark patterns, consent, GDPR/DSA |
Quick Start
1. Define Scope
Audit Scope:
├── Screens: [target screens]
├── Flows: [primary tasks, conversion paths]
├── Platform: [Web/iOS/Android/Desktop/All]
├── WCAG: [A/AA/AAA]
└── Focus: [Visual/A11Y/Usability/Perf]
2. Select Type
| Type | Refs | Coverage |
|---|
| Quick Visual | visual-design.md | Design theory |
| Quick A11Y | accessibility-inspector.md | Automated + keyboard |
| Heuristic | heuristic-audit.md | Nielsen's 10 |
| Full | All 9 refs | Complete eval |
| Focused | 2-3 refs | Targeted review |
3. Execute
Each ref contains checklists w/ pass/fail criteria, severity & remediation.
Severity
| Level | Impact | Action |
|---|
| 🔴 Critical | Blocks task/access | Fix immediately |
| 🟠 Major | >50% users affected | Fix before release |
| 🟡 Minor | <50% users affected | Next sprint |
| 🟢 Enhancement | Polish/delight | Backlog |
Priority Matrix
HIGH FREQ
│
┌───────┼───────┐
│ MAJOR │ CRIT │
│ (P1) │ (P0) │
LOW ├───────┼───────┤ HIGH
IMP │ ENH │ MINOR │ IMP
│ (P3) │ (P2) │
└───────┼───────┘
LOW FREQ
Effort
| Level | Examples |
|---|
| Low | CSS fix, alt text, label |
| Med | Component refactor, validation |
| High | Nav restructure, focus mgmt |
Quick Checklist
□ Hierarchy → Importance clear? (Squint test)
□ Typography → Readable, scale, max 2-3 fonts?
□ Color → Contrast, semantic, 60-30-10?
□ Spacing → 8pt grid, consistent rhythm?
□ Gestalt → Items grouped logically?
□ Usability → Actions discoverable, feedback clear?
□ A11Y → WCAG AA, keyboard, screen reader?
□ Consistency → Design system followed?
□ Content → Clear, scannable, actionable?
□ Responsive → All breakpoints, touch-friendly?
Scoring
| Grade | Criteria |
|---|
| A | Professional, polished, accessible, delightful |
| B | Solid fundamentals, minor refinements |
| C | Functional w/ notable issues |
| D | Usable w/ significant problems |
| F | Major usability/a11y failures |
Output Format
## UX Eval: [Component/Page]
### Scope
- Platform: [Web/iOS/Android]
- WCAG: [AA/AAA]
- Domains: [List]
### Assessment
[1-2 sentence summary + grade A-F]
### Critical (P0)
- **[Issue]**: [Desc]
- *Principle*: [violated]
- *Fix*: [rec]
- *Effort*: [L/M/H]
### Major (P1) / Minor (P2) / Enhancements (P3)
[Same format]
### Strengths
- [What works]
### Priority Actions
1. [Top fix]
2. [Second]
3. [Third]
Anti-Patterns
| Pattern | Category | Sev |
|---|
| Confirm-shaming | Dark | 🔴 |
| Hidden costs | Dark | 🔴 |
| Keyboard traps | A11Y | 🔴 |
| No loading feedback | Visibility | 🟠 |
| Color-only indicators | A11Y | 🟠 |
| Auto-play video+sound | Attention | 🟠 |
| Infinite scroll w/o footer | Nav | 🟡 |
Methodologies
| Method | Focus | Use |
|---|
| Cognitive Walkthrough | Task completion | Complex flows |
| OOUX | Object-noun consistency | IA |
| JTBD | Job stories | Feature validation |
| Gestalt | Visual grouping | Layout |
| Baymard | E-commerce | Shopping flows |
Platform Testing
| Platform | Auto | Manual |
|---|
| Web | axe-core, Lighthouse | DevTools, keyboard |
| iOS | Accessibility Inspector | VoiceOver |
| Android | Accessibility Scanner | TalkBack |
| Design | Stark, Contrast plugins | Review |
Load references/*.md for detailed checklists & criteria.
