Skip to content
Get All-Access
WunderSkills

Skills your agent runs. Whole jobs, not single answers.

Get All-AccessFree skills

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. Three skills are free; the coding agent skills, the Figma AI skills, the agents and the Design Auditor come with WunderUI Pro.

Free agent skills

4 skills. Set up WunderUI, build screens with the core components and keep the tokens clean. Free for personal projects.

Download free skills
wunderui-setupFreeSetupFrom an empty project to the first WunderUI screen — the skill everyone installs first.Workflow wunderui-screenFreeScreenA complete screen from one sentence, within your plan — with the empty, loading and error states that generated screens forget.Workflow wunderui-token-checkFreeToken checkFinds hard-coded colours, spacing and radii and maps each one to the nearest token — with the measured difference.Workflow wunderui-themeFreeThemeYour brand colour in, a complete WunderUI theme out — light and dark, every contrast checked.Workflow
Coding agent skills

5 skills. Jobs a coding agent runs on a WunderUI codebase: audits with patches, agent interfaces and whole pages.

wunderui-motion-auditProMotion auditChecks every animation against the WunderUI motion rules — and patches what it finds.Workflow wunderui-a11yProAccessibilityFocus, contrast and reduced motion — per component, in light and dark, with a patch for every finding.Workflow wunderui-agent-uiProAgent UIInterfaces for AI agents from the agent components — every run state, and an approval moment that holds up.Workflow wunderui-refactorProRefactor to WunderUIMoves an existing app from shadcn/ui, MUI, Chakra, Mantine, Headless UI or hand-made components to WunderUI — planned, partly automatic, measured.Workflow wunderui-composeProComposeWhole pages from blocks, in the order of the visitor's questions — with rhythm and a protected LCP.Workflow
Figma AI skills

2 skills. Build WunderUI screens in Figma and keep Figma variables and the code tokens in sync.

wunderui-figma-syncProFigma syncFigma variables and styles.css, identical in both directions — every difference listed, written only where you say.Workflow wunderui-figma-screenProFigma screenScreens in Figma built like the library: instances, variables, text styles, auto layout — light, dark and mobile.Workflow
AI agents

3 agents. Ready-made specialists for Claude Code that combine the skills into one job.

wunderui-builderProBuilderBuilds screens, pages and agent interfaces end to end, and checks tokens, motion and the build before it hands back.Workflow wunderui-reviewerProReviewerReviews a pull request or page for design-system drift and accessibility — findings ranked, each with a patch.Workflow wunderui-figma-designerProFigma designerDesigns WunderUI screens in Figma and keeps Figma and code in sync.Workflow
Available now · v1.0.1Pro

UI/UX Design Auditor for sites, code and Figma.

Audits websites, landing pages, front-end code and Figma files against 505 UI/UX, accessibility and responsive 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.
report.htmlsample · standard profile
505rules in scope
31findings
3P0 to fix first
  • F-004Focus ring under 3:1 on the primary button12 pages · /pricing, /checkout …High
  • F-009Lead form asks for 9 fields above the foldLanding page · template AMedium
  • F-012Two calls to action compete in the heroLanding page · template ALow
Coveragemet 412 · partly 38 · not met 31 · not checked 16
505UI/UX, accessibility and responsive rules
4targets: sites, landing pages, code, Figma
3profiles, from 2 minutes to a full crawl
67/67validation cases pass
What it audits

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
How a run goes

Scripts measure. The agent checks the evidence and writes it up.

  1. 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.

  2. 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
  3. 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
  4. 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
  5. 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.

  6. 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
  7. 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

  8. 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.”
What you get back

A report you can send. And the data behind it.

report.html

One self-contained file for the client, with a filterable findings explorer.

report.md

The same report as Markdown, ready to edit.

findings.json

Every finding with patterns, examples, severity reason and acceptance criterion.

coverage.csv

505 rules × platform with status: met, partly, not met, not checked.

quick2–10 min

One page per template, core checks

standard15–60 min

Two pages per template, all checks, keyboard and motion on representatives

deep1–3 h / 200 pages

Every page, every check, interaction everywhere

Install

Unzip, install, ask. No account, no server — it runs on your machine.

  1. 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/

  2. Install its one dependency (axe-core):

    npm install --prefix ~/.claude/skills/wunderui-uiux-design-auditor

  3. Optional — run the 84 validation cases:

    npm run validate --prefix ~/.claude/skills/wunderui-uiux-design-auditor

  4. Claude 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

Free to start. Everything with Pro. Every skill and agent, every update in your plan.

The free skills are a download from this page. The Pro skills, the agents and the Design Auditor come as one zip with your order — in the confirmation e-mail and in your Polar customer portal.

Get All-AccessBuild with AI