| name | UI/UX Review |
| description | Evaluate user interfaces for usability, accessibility, and design consistency |
| version | 1.0 |
| tags | ["engineering","frontend","design","quality"] |
| complexity | intermediate |
| requires_tools | ["mcp:filesystem:*"] |
Process
- Read the UI code — HTML/CSS/JS, component structure, layout
- Heuristic evaluation (Nielsen's 10):
- Visibility of system status
- Match between system and real world
- User control and freedom (undo, cancel)
- 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
- Accessibility check (WCAG 2.1):
- Color contrast (4.5:1 for text, 3:1 for large text)
- Keyboard navigation (all interactive elements reachable)
- Screen reader compatibility (ARIA labels, semantic HTML)
- Focus indicators visible
- Responsive design — Mobile, tablet, desktop breakpoints
- Interaction patterns — Loading states, empty states, error states
Output Format
## UI/UX Review: [Component/Page Name]
### Usability Issues
| Issue | Severity | Heuristic | Recommendation |
|-------|----------|-----------|----------------|
| No loading indicator on submit | Medium | Visibility of status | Add spinner/progress bar |
### Accessibility Issues
| Issue | WCAG Level | Recommendation |
|-------|------------|----------------|
| Missing alt text on images | A | Add descriptive alt attributes |
### Positive Patterns
- [What's working well]
### Recommendations (Priority Order)
1. [Most impactful improvement]
Guidelines
- Test with keyboard-only navigation — can you reach everything without a mouse?
- Check color contrast with a contrast checker tool
- Verify all form inputs have labels (not just placeholders)
- Ensure error messages are near the error source, not just at the top
- Check empty states — what does the user see when there's no data?
- Verify that destructive actions have confirmation dialogs
