UX Review
Comprehensive user experience review that coordinates usability, accessibility, and interaction design perspectives for thorough analysis of components, flows, or features.
When to Use This Skill
- Reviewing new components or features before release
- Evaluating existing flows for usability issues
- PR reviews that touch UI/UX code
- Design system component reviews
- Onboarding flow or checkout flow optimization
- Avoid using for purely visual/aesthetic reviews — use
ui-design-aesthetics instead
Workflow
Step 1: Gather Context
Answer these questions before reviewing:
- What is the user trying to accomplish?
- What is this component's role in the larger flow?
- Who are the target users (personas, skill level)?
- What are the success criteria?
Step 2: Run Heuristic Scan (Nielsen's 10)
Evaluate the interface against each heuristic:
| Heuristic |
Check |
| Visibility of system status |
Does the user always know what's happening? |
| Match with real world |
Does it use familiar language and concepts? |
| User control and freedom |
Can users undo, go back, escape? |
| Consistency and standards |
Does it follow platform conventions? |
| Error prevention |
Are mistakes prevented before they happen? |
| Recognition over recall |
Is information visible rather than memorized? |
| Flexibility and efficiency |
Are there shortcuts for expert users? |
| Aesthetic and minimalist design |
Is every element necessary? |
| Error recovery |
Are error messages helpful and actionable? |
| Help and documentation |
Is guidance available when needed? |
Step 3: Multi-Perspective Analysis
Usability Perspective
- User flow: Is the path to completion clear and efficient?
- Information architecture: Is content organized logically?
- Cognitive load: Is the interface overwhelming?
- Mental models: Does it work like users expect?
Accessibility Perspective (WCAG 2.1 AA)
- Keyboard navigation: Can everything be done without a mouse?
- Screen reader: Is the experience equivalent for assistive tech users?
- Color contrast: Do all text/UI elements meet 4.5:1 ratio?
- Focus management: Is focus order logical, visible, and never trapped?
<!-- Example: Accessible button with proper ARIA -->
<button aria-label="Close dialog" aria-describedby="close-hint">
<svg aria-hidden="true"><!-- icon --></svg>
</button>
<span id="close-hint" class="sr-only">Press Escape to close</span>
Interaction Design Perspective
- State coverage: Are all states handled (loading, empty, error, success)?
- Feedback: Does the user know their action worked?
- Transitions: Are animations purposeful and under 300ms?
- Progressive disclosure: Is complexity revealed appropriately?
Step 4: Prioritize Findings
Categorize every finding:
| Priority |
Criteria |
Action |
| Critical |
Blocks usability or fails WCAG AA |
Must fix before release |
| High |
Significantly degrades experience |
Fix in current sprint |
| Enhancement |
Improves delight and efficiency |
Backlog for next iteration |
| Future |
Long-term improvements |
Track in roadmap |
Step 5: Produce Review Report
## UX Review: [Component/Flow Name]
### Summary
[2-3 sentence executive summary]
### Critical Issues
- [ ] Issue 1: [Description, impact, WCAG criterion if applicable]
- [ ] Issue 2: [Description, impact]
### Recommendations by Category
#### Usability
| Finding | Impact | Recommendation |
|---------|--------|----------------|
| [Issue] | High/Med/Low | [Fix] |
#### Accessibility
| Finding | WCAG Criterion | Recommendation |
|---------|----------------|----------------|
| [Issue] | [2.x.x Level] | [Fix] |
#### Interaction Design
| Finding | Impact | Recommendation |
|---------|--------|----------------|
| [Issue] | High/Med/Low | [Fix] |
### Next Steps
1. Create issues for critical findings
2. Add accessibility requirements to acceptance criteria
3. Schedule follow-up review after fixes
Focus Area Deep Dives
Use --focus to narrow the review scope:
--focus=ux: User flow mapping, task efficiency, error recovery, learnability--focus=a11y: WCAG 2.1 AA audit, keyboard nav, screen reader, contrast, focus management--focus=interaction: State coverage, feedback timing, micro-interactions, animation review
Best Practices
- Test with real content — Lorem ipsum hides information architecture problems
- Check all states — Empty, loading, error, success, and edge-case states
- Verify keyboard flow — Tab through the entire component without a mouse
- Use browser dev tools — Lighthouse accessibility audit catches low-hanging fruit
- Prioritize ruthlessly — A focused list of critical fixes beats a wall of suggestions
1---
2name: ux-review
3description: Multi-perspective UX review combining usability heuristics, WCAG accessibility checks, and interaction design analysis. Use when reviewing UI components before release, evaluating user flows for usability issues, conducting design critiques, or auditing accessibility compliance.
4tags:
5 - ux
6 - usability
7 - accessibility
8 - design-review
9 - heuristics
10triggers:
11 - ux review
12 - usability review
13 - design critique
14 - user experience analysis
15 - heuristic evaluation
16keywords:
17 - UX review
18 - usability review
19 - accessibility audit
20 - review
21---
22
23# UX Review
24
25Comprehensive user experience review that coordinates usability, accessibility, and interaction design perspectives for thorough analysis of components, flows, or features.
26
27## When to Use This Skill
28
29- Reviewing new components or features before release
30- Evaluating existing flows for usability issues
31- PR reviews that touch UI/UX code
32- Design system component reviews
33- Onboarding flow or checkout flow optimization
34- Avoid using for purely visual/aesthetic reviews — use `ui-design-aesthetics` instead
35
36## Workflow
37
38### Step 1: Gather Context
39
40Answer these questions before reviewing:
41
421. What is the user trying to accomplish?
432. What is this component's role in the larger flow?
443. Who are the target users (personas, skill level)?
454. What are the success criteria?
46
47### Step 2: Run Heuristic Scan (Nielsen's 10)
48
49Evaluate the interface against each heuristic:
50
51| Heuristic | Check |
52|-----------|-------|
53| Visibility of system status | Does the user always know what's happening? |
54| Match with real world | Does it use familiar language and concepts? |
55| User control and freedom | Can users undo, go back, escape? |
56| Consistency and standards | Does it follow platform conventions? |
57| Error prevention | Are mistakes prevented before they happen? |
58| Recognition over recall | Is information visible rather than memorized? |
59| Flexibility and efficiency | Are there shortcuts for expert users? |
60| Aesthetic and minimalist design | Is every element necessary? |
61| Error recovery | Are error messages helpful and actionable? |
62| Help and documentation | Is guidance available when needed? |
63
64### Step 3: Multi-Perspective Analysis
65
66#### Usability Perspective
67
68- **User flow**: Is the path to completion clear and efficient?
69- **Information architecture**: Is content organized logically?
70- **Cognitive load**: Is the interface overwhelming?
71- **Mental models**: Does it work like users expect?
72
73#### Accessibility Perspective (WCAG 2.1 AA)
74
75- **Keyboard navigation**: Can everything be done without a mouse?
76- **Screen reader**: Is the experience equivalent for assistive tech users?
77- **Color contrast**: Do all text/UI elements meet 4.5:1 ratio?
78- **Focus management**: Is focus order logical, visible, and never trapped?
79
80```html
81<!-- Example: Accessible button with proper ARIA -->
82<button aria-label="Close dialog" aria-describedby="close-hint">
83 <svg aria-hidden="true"><!-- icon --></svg>
84</button>
85<span id="close-hint" class="sr-only">Press Escape to close</span>
86```
87
88#### Interaction Design Perspective
89
90- **State coverage**: Are all states handled (loading, empty, error, success)?
91- **Feedback**: Does the user know their action worked?
92- **Transitions**: Are animations purposeful and under 300ms?
93- **Progressive disclosure**: Is complexity revealed appropriately?
94
95### Step 4: Prioritize Findings
96
97Categorize every finding:
98
99| Priority | Criteria | Action |
100|----------|----------|--------|
101| **Critical** | Blocks usability or fails WCAG AA | Must fix before release |
102| **High** | Significantly degrades experience | Fix in current sprint |
103| **Enhancement** | Improves delight and efficiency | Backlog for next iteration |
104| **Future** | Long-term improvements | Track in roadmap |
105
106### Step 5: Produce Review Report
107
108```markdown
109## UX Review: [Component/Flow Name]
110
111### Summary
112[2-3 sentence executive summary]
113
114### Critical Issues
115- [ ] Issue 1: [Description, impact, WCAG criterion if applicable]
116- [ ] Issue 2: [Description, impact]
117
118### Recommendations by Category
119
120#### Usability
121| Finding | Impact | Recommendation |
122|---------|--------|----------------|
123| [Issue] | High/Med/Low | [Fix] |
124
125#### Accessibility
126| Finding | WCAG Criterion | Recommendation |
127|---------|----------------|----------------|
128| [Issue] | [2.x.x Level] | [Fix] |
129
130#### Interaction Design
131| Finding | Impact | Recommendation |
132|---------|--------|----------------|
133| [Issue] | High/Med/Low | [Fix] |
134
135### Next Steps
1361. Create issues for critical findings
1372. Add accessibility requirements to acceptance criteria
1383. Schedule follow-up review after fixes
139```
140
141## Focus Area Deep Dives
142
143Use `--focus` to narrow the review scope:
144
145- **`--focus=ux`**: User flow mapping, task efficiency, error recovery, learnability
146- **`--focus=a11y`**: WCAG 2.1 AA audit, keyboard nav, screen reader, contrast, focus management
147- **`--focus=interaction`**: State coverage, feedback timing, micro-interactions, animation review
148
149## Best Practices
150
151- **Test with real content** — Lorem ipsum hides information architecture problems
152- **Check all states** — Empty, loading, error, success, and edge-case states
153- **Verify keyboard flow** — Tab through the entire component without a mouse
154- **Use browser dev tools** — Lighthouse accessibility audit catches low-hanging fruit
155- **Prioritize ruthlessly** — A focused list of critical fixes beats a wall of suggestions
nickcrew