UX Review Skill
Comprehensive user experience review that coordinates multiple UX 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
- Design system component reviews
- Onboarding flow optimization
- Form and checkout flow analysis
Review Framework
Phase 1: Initial Assessment
Context Gathering:
- What is the user trying to accomplish?
- What is the component's role in the larger flow?
- Who are the target users?
- What are the success criteria?
Heuristic Scan (Nielsen's 10):
- Visibility of system status
- Match between system and real world
- User control and freedom
- Consistency and standards
- Error prevention
- Recognition rather than recall
- Flexibility and efficiency of use
- Aesthetic and minimalist design
- Help users recognize and recover from errors
- Help and documentation
Phase 2: Multi-Perspective Analysis
UX Designer Perspective
| Category | Key Questions |
|---|---|
| User Flow | Is the path to completion clear and efficient? |
| Information Architecture | Is content organized logically? |
| Cognitive Load | Is the interface overwhelming? |
| Error Prevention | Are mistakes prevented before they happen? |
| Mental Models | Does it work like users expect? |
Accessibility Expert Perspective
| Category | Key Questions |
|---|---|
| WCAG 2.1 AA | Does it meet basic compliance? |
| Keyboard Navigation | Can everything be done without a mouse? |
| Screen Reader | Is the experience equivalent? |
| Color Contrast | Are all text/UI elements visible? |
| Focus Management | Is focus handled correctly? |
Interaction Designer Perspective
| Category | Key Questions |
|---|---|
| State Coverage | Are all states handled (loading, empty, error, success)? |
| Feedback | Does the user know their action worked? |
| Micro-interactions | Are small details polished? |
| Transitions | Are animations purposeful and smooth? |
| Progressive Disclosure | Is complexity revealed appropriately? |
Phase 3: Synthesis & Recommendations
Categorize findings by priority:
- Critical Issues: Must fix for usability/accessibility
- High Priority: Significantly impacts user experience
- Enhancements: Would improve delight and efficiency
- Future Considerations: Long-term improvements
Output Template
## UX Review: [Component/Flow Name]
### Summary
[2-3 sentence executive summary of overall UX quality and key findings]
### Critical Issues
- [ ] Issue 1: [Description and impact]
- [ ] Issue 2: [Description and impact]
### Recommendations by Category
#### Usability
| Finding | Impact | Recommendation |
|---------|--------|----------------|
| [Issue] | [High/Medium/Low] | [Fix] |
#### Accessibility
| Finding | WCAG Criterion | Recommendation |
|---------|----------------|----------------|
| [Issue] | [2.x.x Level] | [Fix] |
#### Interaction Design
| Finding | Impact | Recommendation |
|---------|--------|----------------|
| [Issue] | [High/Medium/Low] | [Fix] |
### Implementation Priority
1. **Critical fixes** (do first): [List]
2. **High-priority improvements**: [List]
3. **Enhancement opportunities**: [List]
### Next Steps
1. Create issues/tasks for critical findings
2. Add accessibility requirements to acceptance criteria
3. Update component documentation with UX guidelines
4. Schedule follow-up review after fixes
Focus Area Deep Dives
Usability Focus (--focus=ux)
- User flow mapping and optimization
- Task completion efficiency
- Error recovery patterns
- Learnability assessment
- Memory load reduction
Accessibility Focus (--focus=a11y)
- WCAG 2.1 AA compliance audit
- Keyboard navigation testing
- Screen reader compatibility
- Color contrast verification
- Focus management review
Interaction Focus (--focus=interaction)
- State coverage audit
- Feedback timing analysis
- Micro-interaction opportunities
- Animation review
- Progressive disclosure evaluation
Success Indicators
- All critical usability issues identified
- Accessibility compliance gaps documented
- Interaction design improvements suggested
- Clear prioritization of fixes
- Actionable recommendations provided