← Skills Library
Agent Teams

Frontend Design

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

How It Works

Frontend Design · Workflow
Read the design system, build, then fix every a11y fail before shipping.
▸TriggerComponent / page request · Build distinctive, production-grade UI
1
Design system checkGATE
Read design-system/MASTER.md — it overrides defaults
✕fail → Missing → generate MASTER.md before any code
2
Design before code
Hierarchy · interaction model · responsive · states
3
Build the component
Mobile-first 375→1440 · semantic HTML · no magic numbers
4
Run accessibility audit
Contrast · keyboard · focus · 44px targets · reduced-motion
5
Build + pre-delivery checklistGATE
npm run build · WCAG 2.1 AA · breakpoints clean
↻fail → Fix every WCAG AA violation now
✓Shipped component · File paths + design decisions, no lint/type errors
  1. Component / page request: Build distinctive, production-grade UI
  2. Design system check: Read design-system/MASTER.md — it overrides defaults
  3. Design before code: Hierarchy · interaction model · responsive · states
  4. Build the component: Mobile-first 375→1440 · semantic HTML · no magic numbers
  5. Run accessibility audit: Contrast · keyboard · focus · 44px targets · reduced-motion
  6. Build + pre-delivery checklist: npm run build · WCAG 2.1 AA · breakpoints clean
  7. Shipped component: File paths + design decisions, no lint/type errors
ↆ download card

Invocation Triggers

/frontend-designbuild UIimplement designproduction UIaccessible component

Use Cases

  • Build a production-ready component from your design system with WCAG AA enforced
  • Implement a responsive page from a design reference at 320px–1440px
  • Ship UI with accessibility baked in — not audited after the fact

The Problem

UI code written without accessibility enforcement ships with invisible problems — keyboard traps, contrast failures, missing focus states, unlabeled inputs. These aren't cosmetic. They break real users, and they're invisible to the developer until an audit surfaces them months later. By then, they're technical debt embedded in production components.

What It Does

  1. 1
    Read design-system/MASTER.md

    Extracts your color palette, typography, spacing, and component patterns. Creates MASTER.md from scratch if it doesn't exist, using your existing UI as the source.

  2. 2
    Implement the component or page

    Strict design system compliance, mobile-first responsive (320px → 1440px), semantic HTML, no arbitrary values.

  3. 3
    Run accessibility audit

    Contrast ratios >= 4.5:1 for body / >= 3:1 for large text, keyboard navigation, touch targets >= 44x44px, focus styles visible, ARIA where needed, heading hierarchy logical.

  4. 4
    Fix all WCAG AA failures directly

    Not documented for later, fixed now. P0 failures (keyboard traps, contrast failures, missing alt text) are non-negotiable blockers.

  5. 5
    Verify at breakpoints

    Screenshots at 320px, 768px, 1280px. Design system invariants confirmed unchanged.

What You Get / What It Doesn't Do

What you get
  • Production-ready component or page matching your design system exactly
  • WCAG AA compliance with audit results
  • Responsive behavior verified at 3 breakpoints
  • Zero new design system deviations introduced
What it doesn't do
  • Design the UI from scratch without a reference
  • Write your design system (creates MASTER.md if missing, but based on existing UI)
  • Run Lighthouse (recommends it but does not run it)
  • Test with assistive technology in a live environment

Tips

Read MASTER.md before generating a single line of CSS

The tokens are the spec — improvising colors or spacing is a design system violation.

Contrast 4.5:1 is the floor for body text

Check both foreground and placeholder text, and both light and dark mode if applicable.

New component pattern? Add it to MASTER.md first

If a component you need doesn't exist in your design system, add it to MASTER.md first — then implement. Never invent patterns outside the system.

Get the Skill

Pro SkillPRO

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

What you unlock
  • Production-ready component or page matching your design system exactly
  • WCAG AA compliance with audit results
  • Responsive behavior verified at 3 breakpoints
  • Zero new design system deviations introduced
...

Commonly Used With

Agent TeamsDesign TeamSpawn a 3-agent design team (UI Implementer + Accessibility Reviewer + Design System Enforcer) for building new pages, redesigns, and component work.Agent TeamsQuality TeamSpawn a 3-agent QA gate (Test Writer + Code Reviewer + Coverage Analyst) for pre-release quality assurance and coverage remediation.
Skills Library

29 more production skills ready to install.

Browse All Skills