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.