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

Setup. From an empty project to the first WunderUI screen — the skill everyone installs first.

Detects the framework, Tailwind version and existing tokens, installs the package, puts DESIGN.md and design.json into the project, registers the WunderUI MCP server, wires styles.css with the right @source path, renders a probe component and writes a setup report.

Download free skillsSee the workflow
Workflow

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

  1. 1

    Detect the project

    Framework (Next.js App or Pages Router, Vite, React Router, Astro), React and Tailwind versions, the CSS entry and the colour tokens the project already defines. Tailwind v3 stops here with the upgrade command.

    setup.mjs detect
  2. 2

    Install and fetch DESIGN.md

    Installs @wunderui/react — from npm, or as a packed copy of your WunderUI checkout so the bundler and React resolve cleanly — and copies DESIGN.md and design.json into .wunderui/, with a pointer in CLAUDE.md or AGENTS.md.

    setup.mjs install · setup.mjs agent-files
  3. 3

    Register the MCP server

    Writes the wunderui server into .mcp.json (and Cursor or VS Code config if present) so the agent can look up components, props and tokens.

    setup.mjs mcp
  4. 4

    Wire the styles

    Adds the WunderUI import and the @source path after @import "tailwindcss". The path is computed relative to the CSS file — the usual cause of unstyled components.

    setup.mjs styles
  5. 5

    Render a probe

    A Card with Button, Badge and Input on its own route; the agent opens it and checks that the button actually has the primary colour.

    setup.mjs probe
  6. 6

    Report

    What was found, every file that changed, what is still open and the next three steps.

    setup.mjs report
Example run

Real output. From a test run of this skill.

You ask

“Set up WunderUI in this project.”

Or in other words

  • “Set up WunderUI in this project.”
  • “Why do the WunderUI components render without styles?”
  • “Connect the WunderUI MCP server.”
framework  next-app · React 19.2 · Tailwind 4.3 · CSS entry app/globals.css
package    packed from the wunderui-core checkout → .wunderui/wunderui-react-0.1.0.tgz
agent      .wunderui/DESIGN.md, .wunderui/design.json, CLAUDE.md
mcp        .mcp.json → node wunderui-core/packages/mcp/src/index.mjs
styles     @import "@wunderui/react/styles.css"; @source "../node_modules/@wunderui/react/dist";
probe      /wunderui-probe → button background rgb(85, 92, 243) ✓
open       restart the agent so the wunderui MCP tools load
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-setup ~/.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

  • A React project with Tailwind CSS v4
  • Node.js 20+