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

Theme. Your brand colour in, a complete WunderUI theme out — light and dark, every contrast checked.

The Theme Builder of wunderui.com as a skill: from one brand colour (plus an optional accent, radius and font) it builds the brand scale and every token that follows from it — primary, the text on it, links, the focus ring, tints and charts — for light and dark, measures each pairing against WCAG AA, moves a step darker or lighter where one fails, and writes a CSS file you import after the WunderUI styles.

Get it on GitHub See the workflow
Workflow

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

  1. 1

    Take the brand

    One hex colour; optionally an accent, a radius (none to xl), a font and a scope class for a single area of the app.

    theme.mjs make --brand "#e11d48"
  2. 2

    Build the scale

    Steps 50 to 950 in OKLab, the same math the Theme Builder on wunderui.com runs, so both give identical results.

  3. 3

    Map the tokens

    Primary, primary-foreground, text-link, ring, tint and tint text, chart colours — separately for light and dark.

  4. 4

    Check the contrast

    Button text on primary, links on page and card, tint text on tint, the focus ring — in both modes. A failing pairing moves to the next step that passes; white button text turns to ink on light brands.

  5. 5

    Write the theme

    wunderui-theme.css to import after @wunderui/react/styles.css, and a report with the scale, the token table and every ratio.

    theme.mjs check wunderui-theme.css
Example run

Real output. From a test run of this skill.

You ask

“Theme WunderUI with #FDE047.”

Or in other words

  • “Make WunderUI use our brand colour #e11d48.”
  • “Theme the app in our green and keep it accessible.”
  • “Give the admin area its own accent colour.”
scale      brand-50 … brand-950 from #FDE047
light      link → step 700 #6C5D04   6.55:1 ✓   (600 had 1.32:1)
           button text → ink #17181A on primary   13.48:1 ✓
dark       link 400 on page and card              ✓
check      9 of 9 pairings pass AA in light and dark
wrote      wunderui-theme.css · .wunderui/theme-report.md
Install

Free and open source. One folder for your agent.

One command installs it from GitHub into your agent's skills folder (Claude Code, Codex, Cursor and more). The source is MIT licensed.

npx skills add wunder-ui/wunderui --skill wunderui-theme

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

What it needs

  • WunderUI in the project (skill Setup)
  • Node.js 20+