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 FREQEffort
| 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.