majiayu000 ui-review
Comprehensive UI review for 45Black legaltech products. Reviews live UIs against WCAG standards, design system compliance, and legaltech-specific patterns.
When To Use
- Before shipping a new UI feature
- After design system updates
- Accessibility audit needed
- Compliance review required
- User mentions: "review UI", "check accessibility", "WCAG audit", "design review"
Workflow
1. Capture Current State
If URL provided, use browser automation:
1. Navigate to the URL using mcp__claude-in-chrome__navigate
2. Take screenshot using mcp__claude-in-chrome__computer (action: screenshot)
3. Get accessibility tree using mcp__claude-in-chrome__read_page
4. If multiple pages, repeat for each
If codebase review, read component files:
1. Find UI components using Glob
2. Read component code
3. Identify design token usage
2. WCAG 2.1 Compliance Check
Run through this checklist:
Level AA (Mandatory for 45Black)
| Criterion | Check | Pass/Fail |
|---|---|---|
| 1.1.1 Non-text Content | All images have alt text | |
| 1.3.1 Info and Relationships | Semantic HTML, proper headings | |
| 1.4.3 Contrast (Minimum) | 4.5:1 for text, 3:1 for large text | |
| 1.4.4 Resize Text | Works at 200% zoom | |
| 1.4.11 Non-text Contrast | 3:1 for UI components | |
| 2.1.1 Keyboard | All functions keyboard accessible | |
| 2.4.3 Focus Order | Logical focus sequence | |
| 2.4.4 Link Purpose | Links describe destination | |
| 2.4.6 Headings and Labels | Descriptive headings | |
| 2.4.7 Focus Visible | Clear focus indicators | |
| 3.1.1 Language | lang attribute set |
|
| 3.2.1 On Focus | No unexpected changes | |
| 3.3.1 Error Identification | Errors clearly identified | |
| 3.3.2 Labels or Instructions | Form fields have labels |
Level AAA (Target for Trustee Edition)
| Criterion | Check | Pass/Fail |
|---|---|---|
| 1.4.6 Contrast (Enhanced) | 7:1 for text | |
| 2.4.9 Link Purpose (Link Only) | Link text alone is clear | |
| 3.2.5 Change on Request | User-initiated changes only |
3. Design System Compliance
Detect Which System Should Apply
Is this client-facing (trustees, advisers)?
└── YES → Check against TRUSTEE EDITION v1.0
└── Reference: ~/.45black/brand/TRUSTEE.md
Is this internal (developers, admins)?
└── YES → Check against SAVILLE v5.0
└── Reference: ~/.45black/brand/SAVILLE-v5.md
└── Sub-check: Core or Clarity variant?
Trustee Edition Checklist
| Element | Expected | Actual | Status |
|---|---|---|---|
| Primary colour | #1A4F7A (Governance Blue) |
||
| Background | #FFFFFF (Paper White) |
||
| Typography | Inter | ||
| Touch targets | ≥44px | ||
| Border radius | ≤8px | ||
| Focus indicator | 3px outline, 2px offset | ||
| Status colours | Compliance palette | ||
| Print stylesheet | Present |
Saville v5.0 Checklist
| Element | Expected | Actual | Status |
|---|---|---|---|
| Primary colour | #2E8B8B (Deep Teal) |
||
| Code Bar | 6px height, correct order | ||
| Warm carbon | #121210 (not #0F0F0F) |
||
| Typography | IBM Plex Sans | ||
| Touch targets | ≥44px | ||
| Border radius | ≤12px | ||
| Focus indicator | 2px ring | ||
| Orange usage | 19pt+ only | ||
| Animation | ≤300ms | ||
| Matte texture | ON (Core) / OFF (Clarity) |
4. Legaltech-Specific Patterns
EU AI Act Compliance (Mandatory)
| Requirement | Check | Status |
|---|---|---|
| AI Transparency | All AI outputs marked "AI-Generated" | |
| Verification Prompt | "Always verify AI suggestions" footer | |
| Human-in-Loop | No auto-approval of AI suggestions | |
| Audit Trail | AI interactions logged | |
| Confidence Display | AI confidence scores shown |
Legal Citation Standards
| Requirement | Check | Status |
|---|---|---|
| Legislation References | Clickable, linked to source | |
| Case Citations | Proper format ([YYYY] court ref) | |
| Definition Tooltips | Legal terms have hover definitions | |
| Provenance | Source and date visible |
Compliance UI Patterns
| Requirement | Check | Status |
|---|---|---|
| Status Badges | Using design system colours | |
| Obligation Cards | Clear hierarchy (title, source, stakeholder) | |
| Due Date Visibility | Overdue items prominently marked | |
| Audit Evidence | Upload/attachment clearly labelled |
5. Generate Report
Create a structured report:
# UI Review Report: [Product Name]
**Date:** [Current Date]
**Reviewer:** Claude UI Expert
**Design System:** [Trustee/Saville Core/Saville Clarity]
## Summary
- **Overall Score:** [Pass/Pass with Issues/Fail]
- **WCAG AA:** [X/14 checks passed]
- **Design System:** [X/Y tokens correct]
- **Legaltech Patterns:** [X/Y implemented]
## Critical Issues (Must Fix)
1. [Issue]: [Location] - [Fix instruction]
2. ...
## Warnings (Should Fix)
1. [Issue]: [Location] - [Fix instruction]
2. ...
## Recommendations (Nice to Have)
1. [Suggestion]
2. ...
## Evidence
- [Screenshot references]
- [Accessibility tree excerpts]
## Next Steps
1. Use `/ui-fix` to generate implementation patches
6. Store Learnings
If patterns discovered, save to memory:
mcp__memory__create_entities with:
- Entity: UIPattern
- Observations: What was found, why it matters
Quick Checks (Single Command)
For rapid reviews, use these focused checks:
/ui-review contrast → Only check colour contrast ratios
/ui-review focus → Only check focus indicators
/ui-review ai-markers → Only check AI transparency labels
/ui-review status → Only check status badge usage
Integration with Other Skills
/ui-architect → Design the structure
/ui-review → Check compliance (THIS SKILL)
/ui-fix → Generate fixes
Model Preference
opus - Compliance checking requires careful reasoning about edge cases
Part of 45Black UI Expert Devstack For non-coders: This skill audits your UI and tells you what needs fixing