Visual design review using Playwright to analyze rendered UI. Use when reviewing implemented components, auditing live pages, or validating design quality against modern minimalist standards.
View on GitHubExpanly/expanly-claude-code-agents
ui-designer
plugins/ui-designer/skills/design-review/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/Expanly/expanly-claude-code-agents/blob/main/plugins/ui-designer/skills/design-review/SKILL.md -a claude-code --skill design-reviewInstallation paths:
.claude/skills/design-review/Guide visual design review of rendered React/Tailwind interfaces using Playwright browser automation. Provide comprehensive reports with actionable fixes.
## Review Methodology
Use Playwright MCP tools to capture and analyze:
1. **browser_navigate**: Load the target URL
2. **browser_snapshot**: Get accessibility tree (semantic structure, ARIA, roles)
3. **browser_take_screenshot**: Capture visual state (save to `/tmp/design-review-{timestamp}.png`)
4. **browser_console_messages**: Check for JavaScript errors
## Review Criteria
### 1. Visual Harmony (Aesthetics)
Evaluate against modern minimalist principles:
**Color**
- [ ] Cohesive palette (monochromatic or analogous)
- [ ] Single accent color used sparingly
- [ ] No competing saturated colors
- [ ] Appropriate contrast between elements
**Typography**
- [ ] Consistent font family throughout
- [ ] Limited size scale (3-4 sizes)
- [ ] Clear hierarchy (headings vs body)
- [ ] Appropriate line height and letter spacing
**Spacing**
- [ ] Consistent spacing rhythm
- [ ] Generous whitespace
- [ ] Aligned elements (grid discipline)
- [ ] Balanced padding in containers
**Visual Polish**
- [ ] Subtle shadows (not harsh)
- [ ] Consistent border radius
- [ ] Refined hover/focus states
- [ ] No visual clutter
### 2. Accessibility (from Snapshot)
Analyze the accessibility tree for:
**Structure**
- [ ] Semantic HTML elements (nav, main, section, article)
- [ ] Heading hierarchy (h1 → h2 → h3, no skips)
- [ ] Landmark regions present
- [ ] Lists used appropriately
**Interactive Elements**
- [ ] Buttons have accessible names
- [ ] Links have descriptive text (not "click here")
- [ ] Form inputs have labels
- [ ] Focus indicators visible
**ARIA Usage**
- [ ] Icons have aria-label or aria-hidden
- [ ] Dynamic content has aria-live regions
- [ ] Modal/dialog roles correct
- [ ] States communicated (expanded, selected, disabled)
**Contrast & Readability**
- [ ] Text meets 4.5:1 contrast ratio
- [ ] UI elements meet 3:1 r