Skip to content
Get All-Access
All skills
ProCoding agent skills

Accessibility. Focus, contrast and reduced motion — per component, in light and dark, with a patch for every finding.

Renders every variant, walks the focus order in headless Chrome and checks that focus is visible, measures WCAG AA contrast of every visible text against its real background, reloads with reduced motion to find what still moves, and scans the source for unnamed buttons, missing alt texts and removed outlines.

Get All-AccessSee the workflow
Workflow

What it actually does. Step by step, in the order it runs.

  1. 1

    Render all variants

    One page with every size, variant, disabled, invalid and open state — or the screen with its loading, empty and error states.

  2. 2

    Focus order and visibility

    Tabs through the page and records each stop: name, size, and whether its look changes on focus. Dialogs and menus are checked by hand: focus in, trapped, Escape, focus back.

    a11y.mjs browser http://localhost:3000/billing
  3. 3

    Contrast, WCAG AA

    Every visible text against its effective background, 4.5:1 or 3:1 for large text — in light and in dark. A table of WunderUI token pairs shows which pair to switch to.

    a11y.mjs browser … --dark · a11y.mjs pairs
  4. 4

    Reduced motion

    Reloads with prefers-reduced-motion: reduce and lists animations that still move.

  5. 5

    Findings with patches

    Source checks for what one render cannot show, then one section per finding with the measured value, the WCAG criterion and the diff.

    a11y.mjs static
Example run

Real output. From a test run of this skill.

You ask

“Check /components/button for accessibility.”

Or in other words

  • “Check the billing page for accessibility.”
  • “Is our focus visible everywhere?”
  • “Measure contrast in dark mode.”
light   633 texts measured · 0 below AA
focus   25 stops · 0 without a visible indicator · 0 unnamed · 0 under 24×24
motion  0 animations still moving under reduced motion
static  (a test file) IconButton without aria-label · <img> without alt · clickable <div> · outline-none without a focus ring
Install

Comes with WunderUI Pro. One folder for your agent.

The WunderUI Pro skills zip comes with your order (confirmation e-mail and Polar customer portal). Unzip it and copy the folder:

# from the WunderUI Pro skills zip
cp -r wunderui-skills/skills/wunderui-a11y ~/.claude/skills/

Claude Code loads it by itself when your request fits. Cursor, Codex and other agents: point them at the skill's .

What it needs

  • Node.js 22+
  • Chrome, Chromium or Edge installed locally
  • The app running on a local URL