frontend-doctor

A skill for Claude Code · Open source

Your UI has symptoms. Ship it healthy.

frontend-doctor turns Claude Code into a senior frontend engineer with a strict quality bar: it builds and reviews components, design, accessibility, responsive layout and performance — and every diagnosis comes with the exact cure.

Get the skill View on GitHub ↗
  • WCAG 2.2 AA
  • Core Web Vitals
  • 5 modes
  • MIT license

Patient intake

Heard in every codebase

AI writes frontend fast. But fast and healthy are different things — these are the classic symptoms of happy-path UI.

SYMPTOM 01
“It works on my screen.”

Reviewed at exactly one viewport width. Breaks at 375px, and at 837px, and at 200% zoom.

SYMPTOM 02
“We'll add the error state later.”

The demo only ever saw the happy path. First failed request in production renders a blank region.

SYMPTOM 03
“The outline looked ugly, so I removed it.”

outline: none — and now keyboard users are navigating blindfolded.

SYMPTOM 04
“Lighthouse says 61, but it feels fine.”

A 4-second LCP on the connection your users actually have. Feelings are not measurements.

The clinic · Interactive

One sick checkout, five findings

This is how the skill reports: every finding has a severity and the exact fix. Press the button to apply the treatment and watch the patient recover.

CASE #0042 · CHECKOUT ● SICK
  • BLOCKER
    Placeholder used as the only label Vanishes on first keystroke; invisible to screen readers. Fix: real <label for> above the field. ✓ Treated — label restored
  • BLOCKER
    Price contrast 2.6:1 — fails WCAG 1.4.3 The most important number on the page is the hardest to read. Fix: full-ink text, 7.3:1. ✓ Treated — contrast passing
  • HIGH
    Pay button unreachable by keyboard A styled <div onClick>: no focus, no Enter, no Space. Fix: a real <button> with a visible focus ring. ✓ Treated — native button
  • HIGH
    Validation fails silently Invalid card, no message, nothing announced. Fix: inline error tied with aria-describedby + aria-invalid. ✓ Treated — error announced
  • POLISH
    Spacing off the scale (13px, 17px, 22px) Three arbitrary values in one card. Fix: snap to the 4px scale — 12 / 16 / 24. ✓ Treated — on the grid

Five departments

One skill, five specialists

Claude detects which department your request belongs to and loads only that reference — progressive disclosure keeps your context lean.

Build

All five data states and every interaction state, enumerated before a line of code. Semantic HTML before ARIA.

references/component-patterns.md

Design review

Screenshots at 375 / 768 / 1440px, judged against hierarchy, spacing, type and color. Blocker → High → Polish.

references/design-review.md

Accessibility

WCAG 2.2 AA audit that starts where sites actually fail: the keyboard path. Every finding cites its criterion.

references/accessibility.md

Responsive

Root causes, not symptom patches: fluid-first fixes with clamp(), container queries and auto-fit grids.

references/responsive.md

Performance

Core Web Vitals triage — LCP, INP, CLS — with one hard rule: measure before and after, always.

references/performance.md

Vitals monitor

Numbers, not vibes

The performance department never claims an improvement without a before and an after. These are the thresholds it treats as healthy.

LCP · LOADING
0.0s max

Largest Contentful Paint — good under 2.5s on real connections.

INP · RESPONSIVENESS
0ms max

Interaction to Next Paint — good under 200ms, every tap and keypress.

CLS · STABILITY
0.0max shift

Cumulative Layout Shift — good under 0.1. Nothing jumps, ever.

Standing prescription

The non‑negotiables

  • Every interactive element keyboard-reachable, with a visible focus ring.
  • Text contrast ≥ 4.5:1 — measured, not eyeballed.
  • Meaningful alt text; every input has a real label.
  • Touch targets ≥ 44×44px on mobile.
  • No layout that only works at one viewport width.
  • prefers-reduced-motion respected — like this very page.
  • Focus outlines never removed without an equal-or-better replacement.

— the Frontend Doctor

Book an appointment

Install in one line

npx skills add MikelMartinC/frontend-doctor

Works out of the box — Claude Code activates it whenever you ask for frontend work, or invoke it directly with /frontend-doctor. For the full experience, pair it with the Playwright MCP server so Claude can render your UI, screenshot it at three widths and verify its own treatment.