Skills your agent runs. Whole jobs, not single answers.
A skill teaches a coding agent a whole job: the steps, the scripts and the rules. Drop the folder into , ask in plain words, and Claude Code loads it when the task fits. Skills are part of WunderUI Pro and come with the purchase.
UI/UX Design Auditor for sites, code and Figma.
Audits websites, landing pages, front-end code and Figma files against 497 UI/UX and accessibility rules — and shows what it checked, not just what it found.
- Makes no conformance claim — automated checks cover part of WCAG.
- Screen readers, forced colors, real browser zoom and user tests stay on the report's “not checked” list.
- Never changes your product, code or Figma file.
- F-004Focus ring under 3:1 on the primary button12 pages · /pricing, /checkout …
- F-009Lead form asks for 9 fields above the foldLanding page · template A
- F-012Two calls to action compete in the heroLanding page · template A
Four kinds of target. One set of rules across all of them.
Websites
Sitemap and crawl, grouped into page templates; light and dark; desktop, 320 px and 200% zoom.
Landing pages
Offer and call to action above the fold, competing CTAs, CTA labels and size, lead-form length, trust signals, text over media, performance.
Front-end code
React, Vue, Svelte, Astro, HTML and CSS with Tailwind: tokens and their contrast, literals, focus removal, motion, markup semantics.
Figma files
Read-only scan: contrast per mode, control borders, variable bindings, auto layout, states, mode pinning — plus design↔code token parity.
- WCAG 2.2 A/AA rules via axe-core, with the placeholder-as-label gap closed
- Focus visible and focus-ring contrast ≥ 3:1, measured per element
- Focus hidden behind sticky headers (WCAG 2.4.11)
- Target size 24 × 24 with the spacing exception
- Reflow at 320 px, 200% text, text spacing, 200% zoom
- Keyboard in dialogs and menus: open, focus in, trap, Escape, focus return
- Hover content: hoverable, persistent, dismissible, shown on focus
- Reduced motion and single-key shortcuts
- Landing-page structure and lab Core Web Vitals
- Broken links, 404 page, titles, navigation consistency
- Token contrast and dark-mode tokens in code
- Design↔code token values per mode
Scripts measure. The agent checks the evidence and writes it up.
- 1What is audited
Scope
The agent asks only for what is missing: the URL, the repository path, the Figma file, the themes and the profile (quick, standard or deep). Pages behind a login need a session cookie that you supply — the skill never types passwords.
- 2audit.config.json
Configure
One JSON file holds the targets, the profile, the theme switch, consent-banner handling, exclusions with reasons and any caps. `doctor` checks Node, Chrome, axe-core and reachability and estimates the run time.
node <skill>/scripts/audit.mjs init - 3Scripts, not screenshots
Measure
Headless Chrome visits every template representative in every theme and runs axe-core plus the skill's own probes; a second pass tests keyboard, hover and reduced motion. The code scanner reads tokens and markup; the Figma scan runs read-only through the Figma MCP server. Runs resume after an interruption.
node <skill>/scripts/audit.mjs all - 4Findings and coverage
Synthesise
A registry maps each check to the rules it evidences, so findings are generated the same way every time: grouped by cause, rated by reach and binding, with an acceptance criterion. The agent gets a one-page summary instead of raw data — that keeps the token cost low.
node <skill>/scripts/audit.mjs synth - 5The agent checks the evidence
Verify
For every high and every suspected finding the agent opens the details, takes a screenshot of an example or reads the file line, drops false positives with a documented exclusion and may raise a finding to critical with a reason.
- 6Summary and change plan
Report
The agent writes the summary and orders the change plan (P0, P1, P2); everything else is generated. The HTML report works offline and can be sent as it is.
node <skill>/scripts/audit.mjs report --html - 7After the fixes
Re-check
`recheck F-012` re-runs only the checks behind one finding on its pages and compares the numbers. A finding closes when its acceptance criterion holds on the full scope.
node <skill>/scripts/audit.mjs recheck F-012 Ask in plain words
- “Audit https://example.com for UI/UX and accessibility.”
- “Run a quick audit of our landing page and the pricing page.”
- “Audit ./src against our Figma file and compare the tokens.”
- “Re-check F-004 after my fix.”
A report you can send. And the data behind it.
One self-contained file for the client, with a filterable findings explorer.
The same report as Markdown, ready to edit.
Every finding with patterns, examples, severity reason and acceptance criterion.
497 rules × platform with status: met, partly, not met, not checked.
One page per template, core checks
Two pages per template, all checks, keyboard and motion on representatives
Every page, every check, interaction everywhere
Unzip, install, ask. No account, no server — it runs on your machine.
Unzip the skill from your WunderUI Pro order into your skills folder — .claude/skills/ in one project, or ~/.claude/skills/ for all projects:
unzip wunderui-uiux-design-auditor-*.zip -d ~/.claude/skills/Install its one dependency (axe-core):
npm install --prefix ~/.claude/skills/wunderui-uiux-design-auditorOptional — run the 67 validation cases:
npm run validate --prefix ~/.claude/skills/wunderui-uiux-design-auditorClaude Code picks the skill up on the next start. Ask for an audit in plain words; the skill loads by itself.
What it needs
- Claude Code (CLI, desktop app or IDE extension)
- Node.js 22 or newer
- Chrome, Chromium or Edge installed locally
- For Figma: the Figma MCP server connected
Open a skill for its workflow, checks and install steps.
More coming soon
New skills arrive as updates to WunderUI Pro.
Included in WunderUI Pro. Every skill, every update in your plan.
Skills come as a zip with your order — in the confirmation e-mail and on your order page. They are never a download from this site.