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

Refactor to WunderUI. Moves an existing app from shadcn/ui, MUI, Chakra, Mantine, Headless UI or hand-made components to WunderUI — planned, partly automatic, measured.

Detects the UI stack per file, maps every component to its WunderUI equivalent with prop and variant notes (about 700 mappings across shadcn/ui, Radix, MUI, Chakra, Headless UI, Mantine and hand-made components), writes a migration plan with effort and order, rewrites shadcn imports and hard-coded Tailwind colours automatically where it is safe, leaves files with uncommitted changes alone, and measures raw colours, foreign UI imports and WunderUI coverage before and after.

Get All-AccessSee the workflow
Workflow

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

  1. 1

    Scan the stack

    Per file: shadcn/ui, Radix, MUI, Chakra, Headless UI, Mantine, hand-made components and hard-coded colours. The first run stores the baseline.

    refactor.mjs scan
  2. 2

    Plan the move

    Every file with its effort (auto, guided, manual), the order — setup, tokens, simple components, composites, layout, clean-up — and the risks.

    refactor.mjs plan
  3. 3

    Apply the safe codemods

    shadcn imports to @wunderui/react where component and props match (variant="outline" becomes plain, asChild becomes render), raw Tailwind colours to tokens by role. Shows a diff; skips files with uncommitted changes.

    refactor.mjs fix --only shadcn-imports,tokens
  4. 4

    Guide the rest

    MUI, Chakra, Mantine and the rest get a recipe per component in the plan — and TODO comments if you ask for them.

  5. 5

    Verify

    Raw colours, foreign UI imports and WunderUI coverage before → after, plus the project's typecheck or build. Then token check and motion audit.

    refactor.mjs verify --build
Example run

Real output. From a test run of this skill.

You ask

“Move this shadcn app to WunderUI.”

Or in other words

  • “Move this app from shadcn/ui to WunderUI.”
  • “How much work is it to switch our MUI app to WunderUI?”
  • “Replace our hand-made buttons, modals and tables with WunderUI.”
scan       14 files · shadcn 7 · MUI 1 · Chakra 1 · hand-made 1
plan       auto 6 · guided 5 · manual 3   → .wunderui/refactor-plan.md
fix        6 files changed · 5 shadcn sources no longer imported
           <Button variant="outline"> → <Button variant="plain">
           bg-white dark:bg-zinc-900 → bg-card
verify     raw colours 58 → 5 · foreign imports 57 → 30
           WunderUI coverage 0 % → 55 % · typecheck 0 errors
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-refactor ~/.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

  • WunderUI set up in the project (skill Setup)
  • A git repository (files with uncommitted changes are skipped)
  • Node.js 20+