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

Token check. Finds hard-coded colours, spacing and radii and maps each one to the nearest token — with the measured difference.

Collects colour, spacing and radius literals, finds the nearest WunderUI token for each (ΔE in OKLab for colours, px for spacing and radius), separates invisible swaps from values too far from any token, replaces the safe ones and reports the largest visual change.

Download free skillsSee the workflow
Workflow

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

  1. 1

    Collect the literals

    Arbitrary Tailwind values (bg-[#…], p-[13px], rounded-[10px]), CSS and style declarations, and Tailwind palette classes that are not WunderUI tokens.

    token-check.mjs scan
  2. 2

    Find the nearest token

    The three nearest colour tokens with their light and dark value and ΔE; the nearest spacing step or radius with the px difference. Semantic tokens win over palette primitives.

    token-check.mjs show T-012
  3. 3

    Show what is too far

    Values more than ΔE 6 or 2 px away are grouped by value with a recommendation: map anyway, propose a token, or keep with a reason.

  4. 4

    Replace and quantify

    Swaps the invisible ones (and the visible ones after a yes), then reports before → after and the largest colour and px shift.

    token-check.mjs fix --visible
Example run

Real output. From a test run of this skill.

You ask

“Check src for hard-coded colours, spacing and radii.”

Or in other words

  • “Check our code for hard-coded colours.”
  • “Replace hex values with WunderUI tokens.”
  • “Are we ready for dark mode?”
scanned 2 files · 13 findings — swap 7 · visible 5 · review 1

T-001 src/Card.tsx:3   bg-[#555CF3]   →  bg-primary            ΔE 0
T-002 src/Card.tsx:3   text-[#454648] →  text-text-secondary   ΔE 0
T-003 src/Card.tsx:3   p-[13px]       →  p-3                   1px off
T-004 src/Card.tsx:3   rounded-[10px] →  rounded-md            2px off
T-009 src/Card.tsx:6   text-gray-600  →  review: Tailwind palette, pick the semantic token

fix --visible: 8 replaced · largest colour shift ΔE 0.15 · largest px shift 2px
Install

Free for personal projects. One folder for your agent.

Download the free skills zip, unzip it and copy the folder into your skills directory — .claude/skills/ in one project or ~/.claude/skills/ for all of them.

# from the free skills zip
cp -r wunderui-skills/skills/wunderui-token-check ~/.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 20+