← Skills Library
Agent Teams

Design Team

Spawn a 3-agent design team (UI Implementer + Accessibility Reviewer + Design System Enforcer) for building new pages, redesigns, and component work.

How It Works

Design Team · Workflow
Three design lanes against one MASTER.md, then a delivery gate.
▸TriggerPage / component to build · Build, redesign, or component work — needs design-system/MASTER.md
1
Read the design system
Palette · type scale · spacing · patterns — into every prompt
2Spawn 3 agentsPARALLEL
UI Implementer
Builds page — tokens only, mobile-first
Accessibility Reviewer
WCAG AA · alt · focus · contrast
Design System Enforcer
Flags non-token colors, sizes, spacing
Dispatched simultaneously
3
Pre-delivery checklist
Screenshots 320-1440px · tab order · dark mode · Lighthouse
4
Build + verifyGATE
npm run build · zero token violations · WCAG AA confirmed
↻fail → Re-dispatch the responsible agent
✓Merged-ready UI · Component built, accessible, design-system compliant
  1. Page / component to build: Build, redesign, or component work — needs design-system/MASTER.md
  2. Read the design system: Palette · type scale · spacing · patterns — into every prompt
  3. Spawn 3 agents
  4. Pre-delivery checklist: Screenshots 320-1440px · tab order · dark mode · Lighthouse
  5. Build + verify: npm run build · zero token violations · WCAG AA confirmed
  6. Merged-ready UI: Component built, accessible, design-system compliant
ↆ download card

Invocation Triggers

/design-teambuild pageredesignnew componentUI implementation

Use Cases

  • Build a new page from a design reference or wireframe
  • Redesign an existing page with design system enforcement
  • Audit a component library for accessibility and consistency

The Problem

Solo UI work drifts. You start with the design system open in a tab, then twenty minutes in you are eyeballing a hex value, inventing a spacing number, and shipping a component that looks fine and silently violates four tokens. Accessibility gets treated as polish until a WCAG failure makes the thing legally broken. By the time anyone checks 320px, the layout already shipped and already breaks.

What It Does

  1. 1
    Read the design system

    Before any agent spawns, read design-system/MASTER.md and extract the palette, type scale, spacing system, component patterns, and dark/light rules. If MASTER.md does not exist, the skill stops and generates it first — this is non-negotiable.

  2. 2
    Spawn all 3 agents in parallel

    UI Implementer (opus) builds against the system verbatim. Accessibility Reviewer (sonnet) runs the WCAG checklist. Design System Enforcer (sonnet) pattern-matches every value against MASTER.md tokens. The full system summary goes into every agent's prompt.

  3. 3
    Implement against the tokens

    The UI Implementer builds the page mobile-first (320px to 1440px) with semantic HTML, body text >= 16px, headings >= 600, line-height >= 1.5, and zero magic numbers. It does not touch accessibility or invent patterns — those are other lanes.

  4. 4
    Independent accessibility pass

    The Accessibility Reviewer checks alt text, 4.5:1 contrast, keyboard navigation and focus styles, labeled inputs, 44x44px touch targets, reduced-motion, and heading hierarchy. P0 failures get fixed directly. This is a separate pass, not the builder's self-check.

  5. 5
    Enforce the design system

    The Design System Enforcer audits every color, font-size, weight, line-height, and spacing value, flags anything not in MASTER.md, and swaps the correct token. Clever off-system decisions get caught — visual approval is not system approval.

  6. 6
    Pre-delivery checklist

    Screenshot at 320, 768, 1280, and 1440px with no clipping or horizontal scroll, tab through every interactive element for visible focus, run Lighthouse a11y (target >= 95), and run the build with zero TypeScript and lint errors.

What You Get / What It Doesn't Do

What you get
  • A built page or component matching MASTER.md exactly, mobile-first
  • An independent accessibility pass with WCAG AA status reported, P0s fixed
  • A design system enforcement pass with zero unresolved token violations
  • Screenshots across 320 to 1440px confirming no clipping or horizontal scroll
  • A clean build — zero TypeScript and zero lint errors
What it doesn't do
  • Run without design-system/MASTER.md — that is a hard stop
  • Redesign or reinterpret the system — it enforces what already exists
  • Introduce a new design token without adding it to MASTER.md in the same PR
  • Replace the manual pre-delivery checklist — you still screenshot and tab through

Tips

Generate MASTER.md first or stop

No MASTER.md means the agents have no source of truth and will improvise. Generate it before spawning the team — this rule has no exceptions per CLAUDE.md.

Accessibility is a gate, not polish

The Accessibility Reviewer runs independently of the builder's own checks. A WCAG AA failure can make a component legally and functionally broken — both passes always run.

Test 320px before you celebrate

What looks right at 1280px breaks at 375px constantly. The pre-delivery checklist starts at 320px for a reason — verify the smallest width before declaring done.

Get the Skill

Elite SkillELITE

Unlock the full Design Team SKILL.md — drop it into ~/.claude/skills/ and trigger it by name.

What you unlock
  • A built page or component matching MASTER.md exactly, mobile-first
  • An independent accessibility pass with WCAG AA status reported, P0s fixed
  • A design system enforcement pass with zero unresolved token violations
  • Screenshots across 320 to 1440px confirming no clipping or horizontal scroll
...

Commonly Used With

Agent TeamsFrontend DesignProduction-grade UI with a11y enforcement. Reads your design system, implements mobile-first components, audits WCAG AA compliance, and fixes every violation before the PR.
Skills Library

29 more production skills ready to install.

Browse All Skills