uiux-review

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

1. Read the UI code — HTML/CSS/JS, component structure, layout
2. 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
3. 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
4. Responsive design — Mobile, tablet, desktop breakpoints
5. 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