Perform a comprehensive UI/UX review of screens or components. Analyzes visual design, usability, accessibility, and consistency with design system.
Analyzes UI/UX designs for visual consistency, usability, accessibility, and design system compliance.
npx claudepluginhub xarlord/devflow-enforcerThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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:
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.