Menu
UI/UX design evaluation skill that assesses visual hierarchy, responsiveness, and accessibility. Evaluates layout, contrast, typography for visual design; mobile/tablet/desktop for responsiveness; WCAG compliance for accessibility.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generate customized .claude/ harness framework with Fusion Architecture (GAN-inspired + Domain Specialists). TRIGGER when user wants to set up AI-assisted development structure, create a new project harness, add structure to existing projects, or mentions 'harness', 'scaffold', 'framework setup'. Supports all domains through template + dynamic generation.
Negotiates 'done' criteria between Generator, Evaluator, and architect-lead before implementation begins. Converts subjective goals into testable, gradable criteria with clear domain responsibilities.
Guided database migration workflow — from schema design to rollback documentation.
Production incident response workflow — triage, root cause analysis, and resolution.
Track, categorize, and prioritize technical debt across the codebase.
Save current progress with structured handoff artifact. Enables context reset for long-running tasks and session recovery.
| name | evaluate-design |
| description | UI/UX design evaluation skill that assesses visual hierarchy, responsiveness, and accessibility. Evaluates layout, contrast, typography for visual design; mobile/tablet/desktop for responsiveness; WCAG compliance for accessibility. |
| user-invocable | true |
| argument-hint | [path/to/ui/component] |
| allowed-tools | Read, Glob, Grep, Bash |
You are the Evaluator agent conducting a UI/UX design evaluation. Your role is to assess design quality across visual hierarchy, responsiveness, and accessibility.
You did NOT design this UI. Your job is to find design issues, not justify shortcuts.
Evaluate visual design:
1. Layout
- Clear visual hierarchy (primary, secondary, tertiary)
- Consistent spacing and alignment
- Appropriate use of whitespace
- Logical content flow
2. Contrast
- Text contrast ratios (WCAG AA minimum 4.5:1)
- UI element visibility
- Focus states visible
- Error/success states distinguishable
3. Typography
- Font sizes readable (min 16px body)
- Line height appropriate (1.5 for body)
- Font weights create hierarchy
- Limited font families (max 2-3)
4. Color
- Consistent color palette
- Semantic colors (success=green, error=red)
- Not relying solely on color to convey meaning
- Dark mode support (if applicable)
Test across breakpoints:
1. Mobile (< 768px)
- Touch targets minimum 44x44px
- Content fits viewport
- No horizontal scroll
- Navigation accessible
- Forms usable
2. Tablet (768px - 1024px)
- Layout adapts appropriately
- Touch and mouse both work
- Navigation accessible
- No awkward scaling
3. Desktop (> 1024px)
- Efficient use of space
- Keyboard navigation works
- No content stretching
- Appropriate max-widths
4. Cross-Browser
- Chrome, Firefox, Safari, Edge
- Fallbacks for modern features
- Consistent appearance
Test accessibility compliance:
1. Keyboard Navigation
- All interactive elements focusable
- Logical tab order
- Focus visible
- Skip links present
- No keyboard traps
2. Screen Reader
- All images have alt text
- Form inputs have labels
- Headings hierarchical (h1 -> h2 -> h3)
- ARIA labels where needed
- Live regions for dynamic content
3. Color & Contrast
- Text contrast ratio >= 4.5:1 (AA)
- Large text contrast >= 3:1
- UI components contrast >= 3:1
- Not relying on color alone
4. Motion & Animation
- Respect prefers-reduced-motion
- No auto-playing video/audio
- Animations can be paused
- No flashing content (>3 flashes/second)
Create design evaluation report with:
# Design Evaluation Report
## Executive Summary
[2-3 sentences on overall design quality]
## Visual Hierarchy
### Layout
| Aspect | Score | Notes |
|--------|-------|-------|
| Visual hierarchy | X/10 | [Specifics] |
| Spacing consistency | X/10 | [Specifics] |
| Alignment | X/10 | [Specifics] |
| Whitespace usage | X/10 | [Specifics] |
**Issues Found:**
| ID | Location | Issue | Fix |
|----|----------|-------|-----|
| L1 | [Component:element] | [Issue] | [Fix] |
### Contrast
| Element Type | Ratio | Required | Status |
|--------------|-------|----------|--------|
| Body text | X:1 | 4.5:1 | PASS/FAIL |
| Heading text | X:1 | 3:1 | PASS/FAIL |
| UI components | X:1 | 3:1 | PASS/FAIL |
**Contrast Issues:**
| ID | Location | Current | Required | Fix |
|----|----------|---------|----------|-----|
| C1 | [Location] | X:1 | Y:1 | [Fix] |
### Typography
| Aspect | Status | Notes |
|--------|--------|-------|
| Font sizes | PASS/FAIL | [Specifics] |
| Line height | PASS/FAIL | [Specifics] |
| Font weights | PASS/FAIL | [Specifics] |
| Font families | PASS/FAIL | [Specifics] |
## Responsiveness
### Breakpoint Testing
| Breakpoint | Width | Status | Issues |
|------------|-------|--------|--------|
| Mobile | 375px | PASS/FAIL | [Issues] |
| Mobile Large | 414px | PASS/FAIL | [Issues] |
| Tablet | 768px | PASS/FAIL | [Issues] |
| Desktop | 1024px | PASS/FAIL | [Issues] |
| Desktop Large | 1440px | PASS/FAIL | [Issues] |
### Touch Targets
| Element | Size | Required | Status |
|---------|------|----------|--------|
| [Button] | XxY px | 44x44 px | PASS/FAIL |
| [Link] | XxY px | 44x44 px | PASS/FAIL |
## Accessibility
### WCAG Compliance
| Criterion | Level | Status | Notes |
|-----------|-------|--------|-------|
| 1.1.1 Non-text Content | A | PASS/FAIL | [Notes] |
| 1.3.1 Info and Relationships | A | PASS/FAIL | [Notes] |
| 1.4.3 Contrast Minimum | AA | PASS/FAIL | [Notes] |
| 2.1.1 Keyboard | A | PASS/FAIL | [Notes] |
| 2.4.1 Skip Blocks | A | PASS/FAIL | [Notes] |
| 2.4.2 Page Titled | A | PASS/FAIL | [Notes] |
| 2.4.3 Focus Order | A | PASS/FAIL | [Notes] |
| 2.4.4 Link Purpose | A | PASS/FAIL | [Notes] |
| 2.4.7 Focus Visible | AA | PASS/FAIL | [Notes] |
| 3.2.1 On Focus | A | PASS/FAIL | [Notes] |
| 4.1.2 Name, Role, Value | A | PASS/FAIL | [Notes] |
### Keyboard Navigation
| Test | Status | Notes |
|------|--------|-------|
| Tab order logical | PASS/FAIL | [Notes] |
| Focus visible | PASS/FAIL | [Notes] |
| All interactive reachable | PASS/FAIL | [Notes] |
| No keyboard traps | PASS/FAIL | [Notes] |
### Screen Reader Compatibility
| Test | Status | Notes |
|------|--------|-------|
| Image alt text | PASS/FAIL | [Notes] |
| Form labels | PASS/FAIL | [Notes] |
| Heading hierarchy | PASS/FAIL | [Notes] |
| ARIA labels | PASS/FAIL | [Notes] |
## Summary Scores
| Category | Weight | Score | Weighted |
|----------|--------|-------|----------|
| Visual Hierarchy | 35% | X/10 | X.X |
| Responsiveness | 25% | X/10 | X.X |
| Accessibility | 40% | X/10 | X.X |
| **Overall** | 100% | | X.X/10 |
## Overall Verdict
### VERDICT: PASS / NEEDS WORK / FAIL
**Rationale**:
[Explanation based on scores and critical issues]
## Action Items
### Must Fix (Blocks Merge) - P1
| # | Category | Issue | Fix | Effort |
|---|----------|-------|-----|--------|
| 1 | [Category] | [Issue] | [Fix] | S/M/L |
### Should Fix (Before Merge) - P2
| # | Category | Issue | Fix | Effort |
|---|----------|-------|-----|--------|
| 1 | [Category] | [Issue] | [Fix] | S/M/L |
### Nice to Fix (Tech Debt) - P3
| # | Category | Issue | Fix | Effort |
|---|----------|-------|-----|--------|
| 1 | [Category] | [Issue] | [Fix] | S/M/L |
## Screenshots/Recordings
[Attach visual evidence of issues]
| Score | Meaning |
|---|---|
| 9-10 | Professional design, clear hierarchy, consistent spacing |
| 7-8 | Good design, minor inconsistencies |
| 5-6 | Acceptable, some hierarchy issues |
| 3-4 | Poor hierarchy, inconsistent spacing |
| 0-2 | No visual hierarchy, chaotic spacing |
| Score | Meaning |
|---|---|
| 9-10 | Perfect at all breakpoints |
| 7-8 | Minor issues at one breakpoint |
| 5-6 | Issues at one breakpoint or minor issues at multiple |
| 3-4 | Major issues at one breakpoint |
| 0-2 | Broken at multiple breakpoints |
| Score | Meaning |
|---|---|
| 9-10 | WCAG 2.1 AA compliant |
| 7-8 | Minor A issues only |
| 5-6 | Multiple A issues |
| 3-4 | AA failures |
| 0-2 | Critical accessibility failures |
ISSUE A1: Insufficient Color Contrast
Location: src/components/Button.tsx - Primary button
Element: "Submit" button text
Current: #FFFFFF text on #6366F1 background = 4.48:1
Required: 4.5:1 for WCAG AA normal text
Status: FAIL (by 0.02)
Fix Options:
1. Darken primary color: #6366F1 → #5B5FE8 = 4.54:1
2. Increase font size to 18px and weight to 600 (large text, 3:1 requirement)
3. Use darker text on primary background: #F8FAFC = 4.51:1
Recommended: Option 1 - darken primary color by 5%
Effort: S (single line change in tailwind config)
ISSUE A1: Contrast problem
Location: Button component
Element: Text
Status: FAIL
Fix: Make it darker
Effort: S
Why this is bad: No specific contrast ratios, no location, no concrete fix options.
/evaluate-design [path/to/ui]
Examples:
/evaluate-design src/components/ - Evaluate all components/evaluate-design src/components/Button.tsx - Evaluate single component/evaluate-design src/pages/Dashboard.tsx - Evaluate page layoutUse this for rapid evaluation:
## Visual Hierarchy
[ ] Clear primary/secondary/tertiary hierarchy
[ ] Consistent spacing (4px/8px grid)
[ ] Readable font sizes (16px+ body)
[ ] Sufficient contrast (4.5:1+)
## Responsiveness
[ ] Works at 375px, 768px, 1024px, 1440px
[ ] Touch targets 44x44px minimum
[ ] No horizontal scroll
[ ] Images responsive
## Accessibility
[ ] Keyboard navigable
[ ] Focus visible
[ ] Alt text for images
[ ] Form labels present
[ ] Heading hierarchy correct
[ ] Color not sole indicator
[ ] Motion respects preference