/design-review

A comprehensive Claude skill that audits designs and codebases against SEEK Design Principles, the Quality Framework, Braid design system compliance, and WCAG AA accessibility standards. Supports visual design reviews, codebase audits, and market-specific evaluations across APAC regions.

Installation

For Claude Code

$npx design-review

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

For Claude.ai

Enable the skill in Settings → Capabilities:

  1. 1.Go to Settings → Capabilities
  2. 2.Download seek-design-audit.zip
  3. 3.Drag and drop the .zip file into the upload dialog

SEEK Braid Interface Guidelines

AGENTS.md

Comprehensive interface guidelines for building accessible, fast, SEEK-brand-aligned UIs with the Braid Design System. Add this file to your project so AI agents apply these guidelines during code generation.

View GuidelinesDownload AGENTS.md

Covers 13 key areas including interactions, forms, accessibility, performance, and design details. Uses MUST/SHOULD/NEVER conventions for clear decision-making.

Usage

/design-review

Start comprehensive audit with context gathering (market, platform, audience)

/design-review screenshot.png

Review visual design, mockup, or Figma screenshot against SEEK frameworks

/design-review src/components/

Audit codebase for Braid compliance, accessibility, and implementation quality

Three-Step Workflow

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

SEEK Design Principles

The skill evaluates designs against SEEK's two foundational design principles.

Maximise the Experience

  • Utilize full viewport for immersive, focused experiences
  • Create layered information architecture with depth and elevation
  • Minimize chrome and UI elements to highlight content
  • Use full-screen flows for critical tasks (job applications, profile building)

Bring the Marketplace to Life

  • Show real-time activity indicators (jobs posted, applications received)
  • Surface social proof elements (trending searches, popular employers)
  • Display live counters and progress tracking
  • Visualize marketplace dynamics with vibrant, data-driven patterns

Quality Framework

SEEK's five pillars of design quality that ensure craft excellence.

Complex Made Simple

  • Reduce cognitive load through progressive disclosure
  • Streamline multi-step processes with clear wayfinding
  • Prioritize primary actions and minimize distractions
  • Use plain language and avoid jargon

Beautifully Crafted

  • Establish clear visual hierarchy with typography and spacing
  • Apply thoughtful micro-interactions and transitions
  • Use color purposefully to guide attention and convey meaning
  • Ensure pixel-perfect alignment and intentional whitespace

Purposefully Innovative

  • Balance originality with usability and familiarity
  • Innovate where it adds genuine value to the user experience
  • Test novel patterns before widespread deployment
  • Learn from industry best practices while maintaining brand identity

Cohesive at Every Touchpoint

  • Use Braid design system components for 80% of UI (20% custom for brand moments)
  • Maintain consistency across web, iOS, and Android platforms
  • Apply shared design tokens (spacing, color, typography)
  • Ensure seamless cross-device and cross-platform experiences

Embrace Diversity

  • Meet WCAG AA accessibility standards (4.5:1 contrast, keyboard nav, screen readers)
  • Consider cultural sensitivities across APAC markets (AU, NZ, ID, TH, HK, SG, PH, MY)
  • Design for diverse user capabilities and assistive technologies
  • Use inclusive language and representative imagery

Output Format

Each audit provides comprehensive, structured feedback with context and prioritized recommendations:

═══════════════════════════════════════════════════
SEEK DESIGN AUDIT
═══════════════════════════════════════════════════
Market: Australia | Platform: Web (Desktop) | Audience: Candidate
Issues: 3 Critical, 2 Important, 4 Opportunities

OVERALL ASSESSMENT
───────────────────
Strong visual hierarchy and effective use of Braid components.
Missing real-time marketplace indicators and some accessibility
improvements needed for WCAG AA compliance.

DESIGN PRINCIPLES
───────────────────
✓ Maximise the Experience
  Full viewport utilization with minimal chrome

✗ Bring the Marketplace to Life
  Missing real-time job posting activity
  No trending search indicators

QUALITY FRAMEWORK
───────────────────
✓ Complex Made Simple — Clear progressive disclosure
✓ Beautifully Crafted — Strong visual hierarchy
💡 Purposefully Innovative — Consider dynamic content loading
✗ Cohesive at Every Touchpoint — Custom spacing tokens used
✗ Embrace Diversity — Contrast ratios below 4.5:1 in CTAs

BRAID COMPLIANCE
───────────────────
✓ Using Stack, Columns, Text components correctly
✗ Custom button styling instead of Braid Button
💡 Consider Braid Dialog for modal patterns

WCAG AA ACCESSIBILITY
───────────────────
✗ CRITICAL: CTA button contrast 3.2:1 (requires 4.5:1)
✗ IMPORTANT: Focus indicators missing on custom inputs
✓ Touch targets meet 44×44px minimum
✓ Semantic HTML structure present

PRIORITIZED RECOMMENDATIONS
───────────────────
[CRITICAL] Fix CTA contrast ratio
  Location: Apply button
  Action: Update background to meet 4.5:1 minimum
  Maps to: Embrace Diversity

[IMPORTANT] Add marketplace activity indicators
  Location: Job listing cards
  Action: Show "Posted 2 minutes ago" timestamps
  Maps to: Bring Marketplace to Life