From devflow-enforcer
Perform a comprehensive UI/UX review of screens or components. Analyzes visual design, usability, accessibility, and consistency with design system.
npx claudepluginhub xarlord/devflow-enforcer --plugin devflow-enforcerThis skill uses the workspace's default tool permissions.
This skill performs a comprehensive UI/UX review of screens or components, analyzing:
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
This skill performs a comprehensive UI/UX review of screens or components, analyzing:
Ensure UI implementations meet quality standards before release. This skill should be used:
1. IDENTIFY screens/components to review
2. ANALYZE visual design:
- Layout and spacing
- Typography hierarchy
- Color usage
- Visual consistency
3. EVALUATE usability:
- User flows
- Interaction patterns
- Error handling
- Feedback mechanisms
4. CHECK accessibility (basic):
- Color contrast
- Touch targets
- Focus indicators
5. VERIFY design system compliance
6. TEST responsive behavior
7. GENERATE report with recommendations
| Parameter | Type | Description | Required |
|---|---|---|---|
| screens | string[] | List of screens to review | Yes |
| components | string[] | List of components to review | No |
| designSystem | string | Path to design system docs | No |
| viewportSizes | string[] | Viewport sizes to test | No |
# UI Review Report
**Date:** [timestamp]
**Reviewer:** UI/UX Designer Agent
**Scope:** [screens/components reviewed]
## Summary
| Category | Score | Issues |
|----------|-------|--------|
| Visual Design | 8/10 | 3 |
| Usability | 9/10 | 2 |
| Accessibility | 7/10 | 4 |
| Design System | 10/10 | 0 |
| Responsive | 8/10 | 2 |
**Overall Score: 8.4/10**
## Critical Issues (Must Fix)
### 1. [Issue Title]
- **Screen:** [screen name]
- **Location:** [specific element]
- **Problem:** [description]
- **Impact:** [user/business impact]
- **Recommendation:** [how to fix]
- **Priority:** Critical
## High Priority Issues
[Same format as above]
## Medium Priority Issues
[Same format as above]
## Low Priority Issues (Polish)
[Same format as above]
## Positive Findings
- [What's working well]
- [Best practices followed]
## Recommendations
1. [Strategic recommendation]
2. [Process improvement]
## Next Steps
1. [ ] Fix critical issues before release
2. [ ] Schedule accessibility audit
3. [ ] Update design system documentation
USER: Review the login screen
SKILL INPUT:
{
"screens": ["login"],
"viewportSizes": ["mobile", "tablet", "desktop"]
}
SKILL OUTPUT:
# UI Review Report
**Date:** 2026-02-17
**Reviewer:** UI/UX Designer Agent
**Scope:** Login Screen
## Summary
| Category | Score | Issues |
|----------|-------|--------|
| Visual Design | 9/10 | 1 |
| Usability | 8/10 | 2 |
| Accessibility | 6/10 | 3 |
| Design System | 10/10 | 0 |
| Responsive | 9/10 | 1 |
**Overall Score: 8.4/10**
## Critical Issues (Must Fix)
### 1. Missing Error State for Invalid Credentials
- **Screen:** Login
- **Location:** Form error handling
- **Problem:** No visual design for authentication error state
- **Impact:** Users won't understand why login failed
- **Recommendation:** Add error alert component with red border and icon
- **Priority:** Critical
## High Priority Issues
### 2. Low Contrast on Secondary Link
- **Screen:** Login
- **Location:** "Forgot password" link
- **Problem:** Contrast ratio 3.2:1 (needs 4.5:1)
- **Impact:** Users with low vision cannot read link
- **Recommendation:** Change color from #888 to #666
- **Priority:** High
USER: Review all form components
SKILL INPUT:
{
"components": ["Input", "Select", "Checkbox", "Radio", "Button"],
"designSystem": "docs/design-system.md"
}
SKILL OUTPUT:
# UI Review Report - Form Components
**Date:** 2026-02-17
**Reviewer:** UI/UX Designer Agent
**Scope:** 5 form components
## Component Summary
| Component | Score | Issues | Status |
|-----------|-------|--------|--------|
| Input | 9/10 | 1 | Pass |
| Select | 8/10 | 2 | Pass |
| Checkbox | 10/10 | 0 | Pass |
| Radio | 10/10 | 0 | Pass |
| Button | 7/10 | 3 | Needs Work |
## Critical Issues
### 1. Button Missing Focus Indicator
- **Component:** Button
- **Problem:** No visible focus ring on keyboard navigation
- **Impact:** Keyboard users cannot navigate
- **Recommendation:** Add 2px outline with offset
- **Priority:** Critical
This skill integrates with: