ux-review

📁 nickcrew/claude-ctx-plugin 📅 14 days ago
1
总安装量
1
周安装量
#48725
全站排名
安装命令
npx skills add https://github.com/nickcrew/claude-ctx-plugin --skill ux-review

Agent 安装分布

kilo 1
windsurf 1
cursor 1
antigravity 1
gemini-cli 1

Skill 文档

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:

  1. What is the user trying to accomplish?
  2. What is the component’s role in the larger flow?
  3. Who are the target users?
  4. 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:

  1. Critical Issues: Must fix for usability/accessibility
  2. High Priority: Significantly impacts user experience
  3. Enhancements: Would improve delight and efficiency
  4. 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