# Design Review Skill

> A comprehensive Claude skill for auditing UI designs and codebases against SEEK design standards.

## Overview

The SEEK Design Audit skill provides systematic evaluation of UI designs, mockups, Figma files, and codebases against SEEK's Design Principles, Quality Framework, Braid design system compliance, and WCAG AA accessibility standards.

## Installation

```bash
npx design-review
```

Installs the skill to your Claude Code skills directory. Requires Claude Code CLI.

## Usage

### Commands

- `/design-review` — Start comprehensive audit with context gathering (market, platform, audience)
- `/design-review <file>` — Review visual design, mockup, or screenshot against SEEK frameworks
- `/design-review <directory>` — Audit codebase for Braid compliance, accessibility, and implementation quality

### Three-Step Workflow

1. **Context Gathering** — Identifies market (AU/NZ/ID/TH/HK/SG/PH/MY), platform, and audience
2. **Comprehensive Audit** — Evaluates against Design Principles, Quality Framework, Braid, and WCAG AA
3. **Structured Reporting** — Delivers prioritized recommendations (Critical/Important/Opportunity)

## Evaluation Framework

### SEEK Design Principles

1. **Maximise the Experience**
   - Full viewport utilization for immersive experiences
   - Layered information architecture with depth
   - Minimal chrome to highlight content
   - Full-screen flows for critical tasks

2. **Bring the Marketplace to Life**
   - Real-time activity indicators
   - Social proof elements
   - Live counters and progress tracking
   - Vibrant, data-driven marketplace visualization

### Quality Framework (5 Pillars)

1. **Complex Made Simple** — Reduce cognitive load, progressive disclosure, clear wayfinding
2. **Beautifully Crafted** — Visual hierarchy, micro-interactions, purposeful color, pixel-perfect alignment
3. **Purposefully Innovative** — Balance originality with usability, test novel patterns
4. **Cohesive at Every Touchpoint** — 80% Braid / 20% custom, cross-platform consistency, shared design tokens
5. **Embrace Diversity** — WCAG AA compliance, cultural sensitivity, assistive tech support, inclusive language

### Technical Audits

**Braid Design System Compliance**
- Component usage (Stack, Columns, Text, Button, etc.)
- Design token adherence (spacing, typography, color)
- 80/20 custom styling rule
- Cross-platform consistency

**WCAG AA Accessibility**
- Colour contrast (4.5:1 normal text, 3:1 large text/UI)
- Touch targets (44×44px mobile, 24×44px desktop)
- Keyboard navigation and focus management
- Screen reader support (alt text, aria-labels, semantic HTML)
- Motion and animation (prefers-reduced-motion)

**Market-Specific Considerations**
- Supports 8 APAC markets: AU, NZ, ID, TH, HK, SG, PH, MY
- Cultural sensitivity and localization checks
- Language and audience context (Candidate, Hirer, Recruiter)

## Output Format

Each audit provides:
- Market/platform/audience context with issue counts
- Overall assessment paragraph
- Design Principles evaluation (✓/✗/💡 indicators)
- Quality Framework analysis (5 pillars)
- Braid compliance findings
- WCAG AA accessibility audit
- Prioritized recommendations with specific locations and actions

## Integration

Works with:
- Claude (claude.ai)
- Claude Code CLI
- Cursor
- OpenCode
- Any MCP-compatible coding agent

## Resources

- GitHub: https://github.com/richardsimms/design-review
- Website: https://design-review.vercel.app
- SEEK Design Principles: https://myseek.atlassian.net/wiki/spaces/DP1/overview
- Quality Framework: https://myseek.atlassian.net/wiki/spaces/ADT/pages/3740336187/Definition+of+Design+Quality+at+SEEK
- Braid Design System: https://seek-oss.github.io/braid-design-system/
- Claude Skills: https://claude.ai/skills

## License

MIT