wunderui-mcp 1.0.2 → 1.1.0

package/README.md

@@ -19,6 +19,10 @@ Works with Claude Code, Cursor, Windsurf, Cline, Codex, VS Code and any other cl
 | `list_templates` | The full-page templates and what each is built from |
 | `get_starter` | Copy-paste TSX: app shell, dashboard, data grid, AI chat, theming |
 | `get_library_info` | Package name, version, install commands, stack, counts, data source |
+| `get_instructions` | The short, always-on rules (components, tokens, motion, copy) for CLAUDE.md / AGENTS.md |
+| `list_skills` | The WunderUI agent skills, free and Pro |
+| `get_skill` | One skill's instructions (SKILL.md), so the agent can follow it without installing — Pro skills need `WUNDERUI_LICENSE_KEY` |
+| `get_block_source` | The React source of a UI block and its shared helpers — needs a Pro key in `WUNDERUI_LICENSE_KEY` |
 
 Every component carries its plan. On the Free plan, an agent should only use components marked `free`; the others need WunderUI Core or Pro.
 
@@ -56,6 +60,7 @@ The server starts with the bundled copy and answers immediately. In the backgrou
 | --- | --- |
 | `WUNDERUI_OFFLINE=1` | never touch the network, use the bundled copy |
 | `WUNDERUI_SITE=<url>` | fetch the live data from another origin |
+| `WUNDERUI_LICENSE_KEY=<key>` | your WunderUI Pro key — unlocks Pro skills (`get_skill`) and block source (`get_block_source`); sent only to wunderui.com |
 
 ## Without MCP
 

package/data/DESIGN.md

@@ -2,9 +2,9 @@
 
 > Design context for AI coding agents. Paste this into your prompt, or let your
 > agent pull it from https://wunderui.com/DESIGN.md.
-> Generated from the WunderUI source on 2026-10-08 · @wunderui/react@0.1.0
+> Generated from the WunderUI source on 2026-10-09 · @wunderui/react@0.1.0
 
-WunderUI is a React component library and design system: 201
+WunderUI is a React component library and design system: 204
 documented components in 6 groups, built on Base UI
 primitives and Tailwind CSS v4. It covers the parts most kits skip — data grid,
 kanban, charts, an application shell and a full AI chat set.
@@ -15,7 +15,7 @@ Core and Pro licence holders (the wunderui-core download from the purchase). Not
 
 Unzip the wunderui-core download, run `npm install && npm run build` in it once, then in your project: `npm pack <wunderui-core>/packages/react --pack-destination .wunderui` and `npm install ./.wunderui/<the .tgz>`. The wunderui-setup agent skill does all of it.
 
-Do not run `npm install @wunderui/react` — the package is not published, the command fails. Free plan: the 76 free components are MIT source at https://github.com/wunder-ui/wunderui — copy components/, lib/ and styles/wunderui.css into your project (each free component in design.json has a sourceRaw URL). Core and Pro components come with a plan (https://wunderui.com/#pricing).
+Do not run `npm install @wunderui/react` — the package is not published, the command fails. Free plan: the 76 free components are MIT source at https://github.com/wunder-ui/wunderui — add them with `npx wunderui-cli add <name>` (files, dependencies and styles), or copy components/, lib/ and styles/wunderui.css (each free component in design.json has a sourceRaw URL). Core and Pro components come with a plan (https://wunderui.com/#pricing).
 
 Then wire up the styles and import:
 
@@ -314,10 +314,10 @@ Light is `:root`, dark is `.dark`. Same names in both themes.
 | `--success` | `#1AD598` | `#1AD598` |
 | `--success-foreground` | `#17181A` | `#17181A` |
 | `--chart-1` | `var(--brand-600)` | `var(--brand-600)` |
-| `--chart-2` | `#F3654A` | `#F3654A` |
-| `--chart-3` | `#A584F3` | `#A584F3` |
-| `--chart-4` | `#FACA4A` | `#FACA4A` |
-| `--chart-5` | `#1AD598` | `#1AD598` |
+| `--chart-2` | `#12AFF0` | `#3CC2F5` |
+| `--chart-3` | `#A584F3` | `#B79CF6` |
+| `--chart-4` | `#1AD598` | `#3DDBA6` |
+| `--chart-5` | `#A2A3A3` | `#6E7078` |
 | `--sidebar` | `#F9FBFC` | `#17181A` |
 | `--sidebar-foreground` | `#000000` | `#FFFFFF` |
 | `--sidebar-primary` | `var(--brand-600)` | `var(--brand-600)` |
@@ -589,10 +589,15 @@ on an `animate-in` the same way it works on a `transition`.
 4. **Never fade in the LCP element.** An element at `opacity: 0` is not an LCP candidate, so a 600ms hero fade adds 600ms to your LCP. Render headline copy at full opacity; animate `transform` only.
 5. **Restrain the travel.** Anything anchored to a trigger moves `--travel-xs` or `--travel-sm`. A menu that slides 20px looks like it fell in.
 6. **One overshoot per screen.** `ease-overshoot` is punctuation. Two of them on one view and the interface reads as a toy.
-7. **Reduced motion is opt-in, not a kill switch.** Wrap the animation in `@media (prefers-reduced-motion: no-preference)` so the still state is the default and you cannot forget a selector.
+7. **Reduced motion is opt-in, not a kill switch.** Wrap the animation in `@media (prefers-reduced-motion: no-preference)` so the still state is the default and you cannot forget a selector. Reduced means calmer, not nothing: drop transforms and travel, keep opacity and colour changes (rule 15).
 8. **Never `transition-all`.** Name the properties — `transition-[opacity,transform]` — or use bare `transition`, which covers colour, shadow, transform and opacity but no layout property. `transition-all` animates things you did not mean to animate, including on first paint.
 9. **Loading keeps its height.** A skeleton occupies the same box as the content it stands in for, and crossfades — it never collapses and reflows.
 10. **A looping ambient animation is the one place `ease-in-out` belongs.** A shimmer that runs forever has no entrance and no exit, so symmetry is correct there and nowhere else.
+11. **Animate by frequency.** Keyboard-driven and 100+/day actions (command palette, shortcuts, moving between tooltips) get no motion; tens a day get a short fade; rare moments may delight. Tooltips skip their entrance when another one was just open (`data-open:data-instant:animate-none`).
+12. **Anchored surfaces grow from their trigger.** Popover, dropdown, tooltip, hover card and select use `origin-(--transform-origin)`. Never start from `scale(0)` — start at 0.92–0.97 with opacity. Centred dialogs are exempt.
+13. **Toggles stay interruptible.** Animate switches, checkboxes, tabs and other repeated state changes with transitions — they retarget from wherever they are — never with keyframes bound to the state, which restart from zero. An overshoot transition (`transition-transform duration-base ease-overshoot`) still swings past the end.
+14. **Hover only where hover exists.** Tailwind v4's `hover:` is already gated to `(hover: hover)`; hand-written `:hover` in CSS goes inside `@media (hover: hover) and (pointer: fine)`, so a tap on a phone does not leave a hover state stuck.
+15. **Reduced motion keeps the fade.** WunderUI's global rule zeroes the scale, slide, spin and blur of every `animate-in` / `animate-out` and every transform transition, and keeps opacity and colour — so do not add `motion-reduce:transition-none` or `motion-reduce:animate-none` to a fade.
 
 ### Motion recipes
 
@@ -651,9 +656,39 @@ on an `animate-in` the same way it works on a `transition`.
 }
 ```
 
+## Copy
+
+Rules for the words inside the product — buttons, labels, errors and empty states.
+
+1. **Buttons say what happens.** A verb and, where it helps, the object: `Save changes`, `Invite member`, `Delete project` — never `OK`, `Submit` or `Yes`. The destructive button repeats the action, the other one is `Cancel`.
+2. **Sentence case everywhere in the product.** Buttons, menu items, headings, labels and tabs start with one capital: `Billing history`, not `Billing History`.
+3. **Errors say what happened and what to do.** `The card was declined. Try another card or contact your bank.` — no `Oops`, no `Something went wrong` on its own, no blame, no error codes without words.
+4. **Empty states explain and offer one action.** What will appear here, why it is empty, and the one button that fills it: `No invoices yet — your first one appears after the first payment.`
+5. **Labels are nouns, hints are sentences.** A field label names the thing (`Work email`); help text under it explains a rule in a full sentence.
+6. **Numbers carry their unit.** Money with the ISO currency or symbol and two decimals (`$299.00`, `EUR 41.80`), percentages with `%`, durations and sizes with units (`12 GB`, `3 min`). Use tabular numbers in tables.
+7. **No filler.** No `please`, `simply`, `just` or `easily`; no exclamation marks in the interface; no `Lorem ipsum`. Sample people are invented (`Alina Lorenz`, `Felix Brandt`).
+8. **Confirmations name the object.** `Delete “Q4 report”?` with what is lost, not `Are you sure?`.
+
+## Skills
+
+Agent skills that build and check with these rules (https://wunderui.com/skills):
+
+- **wunderui-screen** (Free) — Builds a complete React screen with WunderUI from a one-sentence request, within the user's plan (Free uses only the free components) — picks the components and a matching block layout, fills props from design.json, adds the empty, loading and error states that generated screens usually forget, uses motion tokens instead of raw milliseconds, and finishes with a typecheck and a build.
+- **wunderui-setup** (Free) — Sets up WunderUI in a React project from scratch to the first rendered screen — detects the framework, Tailwind version and existing tokens, puts DESIGN.md and design.json into the project, registers the WunderUI MCP server, wires styles.css and the @source path, renders a probe component and writes a setup report.
+- **wunderui-theme** (Free) — Generates a complete WunderUI brand theme from one brand colour (hex) — optionally an accent colour, a radius preference and a font — the eleven-step brand scale (--brand-50 … --brand-1000), the brand tokens derived from it (primary, primary-foreground, text-link, ring, tint and tint text, chart 1) for light and dark, a WCAG AA check of every key pair with shades moved automatically until they pass, and one CSS file to import after @wunderui/react/styles.css (globally or for one subtree), plus a report.
+- **wunderui-token-check** (Free) — Finds hard-coded colours, spacing and radii that bypass the WunderUI design tokens, maps each literal to the nearest token with a measured distance (ΔE for colour, px for spacing and radius), separates safe swaps from values too far from any token, replaces the safe ones and reports how much the look changed.
+- **wunderui-a11y** (Pro) — Accessibility check per component or screen in a WunderUI project — renders every variant, walks the focus order and checks that focus is visible, measures WCAG AA contrast of every text in light and dark, verifies the reduced-motion fallback, and delivers each finding with a patch instead of just a report.
+- **wunderui-agent-ui** (Pro) — Builds the interface of an AI agent with WunderUI's agent components — describes the run (steps, tools, costs, approvals), picks RunTimeline, ApprovalCard, CostMeter, AgentStatus, RunError and their relatives, plays through every state including failure and abort, applies the agent motion tokens and checks the approval moment separately.
+- **wunderui-compose** (Pro) — Composes WunderUI blocks into a complete page — clarifies the page's goal and audience, proposes a block order that follows the visitor's questions, inserts the blocks and fills them with real content, checks the rhythm (one notable effect per section) and protects the LCP element from entrance animation.
+- **wunderui-figma-screen** (Pro) — Builds a screen in Figma from the WunderUI library — real component instances instead of drawn rectangles, every fill and text bound to the theme variables and text styles, auto layout throughout, a light frame first, then the dark frame as a clone with the Dark mode and a 390 px mobile frame — and checks the result with screenshots and an audit (unbound paints, unstyled text, absolute children).
+- **wunderui-figma-sync** (Pro) — Keeps Figma variables and the project's CSS tokens (styles.css) identical in both directions — reads the Figma variable collections and text styles through the Figma MCP server, diffs them against the CSS custom properties (colour per light/dark mode, spacing, radius, type, motion), lists every conflict with the measured difference, asks which side wins and writes only in that direction, then reports what changed.
+- **wunderui-motion-audit** (Pro) — Audits a codebase's animations and transitions against the WunderUI motion rules — transition-all, raw millisecond durations, ease-in-out and other generic curves, scroll-driven animations without an @supports fallback, missing prefers-reduced-motion handling, layout-property animation and fades on the LCP element — justifies every finding with the rule from DESIGN.md, proposes and applies a patch with motion tokens and verifies the build.
+- **wunderui-refactor** (Pro) — Migrates an existing React app to WunderUI — scans the project and detects the UI stack per file (shadcn/ui, Radix primitives, MUI, Chakra, Headless UI, Mantine, hand-built components and hard-coded Tailwind colours), maps every component to its WunderUI equivalent with prop notes, writes a migration plan with effort and order, applies the safe codemods (shadcn imports → @wunderui/react, raw colours → token utilities) and measures before → after (raw colours, foreign UI imports, WunderUI coverage) with the project's typecheck.
+- **wunderui-uiux-design-auditor** (Pro) — Evidence-based UI/UX and accessibility audit of any product — live websites, landing pages, component libraries / front-end code (React, Vue, Svelte, HTML/CSS, Tailwind) and Figma files — against a 497-rule catalog (WCAG 2.2 A/AA, platform guidance, design-system rules).
+
 ## Component inventory
 
-**Plans.** 76 components are **Free** (MIT, source at https://github.com/wunder-ui/wunderui); 125 are **Pro** and need WunderUI Core or Pro — charts, KPI cards, the data grid, the app layout and navigation, AI & agents. On the Free plan, build only with components marked Free and name the Pro component that would do the job better.
+**Plans.** 76 components are **Free** (MIT, source at https://github.com/wunder-ui/wunderui); 128 are **Pro** and need WunderUI Core or Pro — charts, KPI cards, the data grid, the app layout and navigation, AI & agents. On the Free plan, build only with components marked Free and name the Pro component that would do the job better.
 
 ### Primitives
 
@@ -730,6 +765,9 @@ on an `animate-in` the same way it works on a `transition`.
 | `Sparkline` | Pro | A tiny trend line without axes — green when it rises, red when it falls — for table cells, price cards and metric tiles. | SparklineProps |
 | `FunnelChart` | Pro | Shows drop-off across sequential stages, each with a label and value. | — |
 | `ColumnChart` | Pro | Vertical bars for comparing categories side by side. | — |
+| `Heatmap` | Pro | A grid of rounded cells whose shade shows how much happened — commits per day, tickets per hour, deploys per week. | HeatmapCell, HeatmapProps |
+| `StatusStrip` | Pro | A row of day bars from a status page — green when all was well, amber when degraded, red for an outage. | StatusStripDay, StatusStripProps, StatusStripStatus |
+| `Gauge` | Pro | One value against its limit on a half circle, with a needle that swings in and re-aims with a spring. | GaugeProps, GaugeSegment |
 
 ### Data Display
 
@@ -1481,7 +1519,9 @@ function Tabs({ className, orientation, ...props }: Tabs.Root.Props): React.JSX.
 A gradient-filled area chart for visualizing trends over time.
 
 ```tsx
-<AreaChart data={data} index="month" categories={["revenue", "cost"]} />
+<ChartCard title="Revenue" value="$84,250" delta={{ value: "18.2%", caption: "vs last year" }} periods={["12M", "30D"]}>
+  <AreaChart data={data} index="month" categories={["revenue"]} height={200} />
+</ChartCard>
 ```
 
 ```ts
@@ -1493,11 +1533,13 @@ function AreaChart({ data, index, categories, colors, height, stacked, curveType
 Compares categorical data with grouped or stacked bars.
 
 ```tsx
-<BarChart data={data} index="month" categories={["revenue", "cost"]} stacked={false} />
+<ChartCard title="Active users" value="349k" delta={{ value: "6.4%", caption: "this week" }} periods={["Week", "Month"]}>
+  <BarChart data={data} index="day" categories={["users"]} height={200} highlight={3} />
+</ChartCard>
 ```
 
 ```ts
-function BarChart({ data, index, categories, colors, height, layout, stacked, stackGap, radius, barSize, maxBarSize, barGap, lollipop, segments, background, showGrid, showAxis, showTooltip, showLegend, yAxisFormatter, yDomain, yTicks, valueFormatter, animate, loading, className, }: BarChartProps): React.JSX.Element;
+function BarChart({ data, index, categories, colors, height, layout, stacked, stackGap, radius, barSize, maxBarSize, barGap, lollipop, segments, background, showGrid, showAxis, showTooltip, showLegend, yAxisFormatter, yDomain, yTicks, valueFormatter, animate, highlight, loading, className, }: BarChartProps): React.JSX.Element;
 ```
 
 #### LineChart
@@ -1505,7 +1547,9 @@ function BarChart({ data, index, categories, colors, height, layout, stacked, st
 Plots one or more series as smooth or linear lines.
 
 ```tsx
-<LineChart data={data} index="month" categories={["revenue", "cost"]} curved />
+<ChartCard title="Monthly revenue" value="$94k" delta={{ value: "46.9%", caption: "vs 2025" }} legend={[{ label: "2026" }, { label: "2025", color: "var(--chart-5)" }]}>
+  <LineChart data={data} index="month" categories={["y2026", "y2025"]} colors={["var(--chart-1)", "var(--chart-5)"]} dashed={["y2025"]} height={200} />
+</ChartCard>
 ```
 
 ```ts
@@ -1517,7 +1561,9 @@ function LineChart({ data, index, categories, colors, height, showGrid, showAxis
 Combines bars and a trend line in a single chart.
 
 ```tsx
-<ComposedChart data={data} index="month" bars={["revenue"]} lines={["cost"]} />
+<ChartCard title="Revenue and cost" value="$365k" delta={{ value: "12.8%", caption: "margin up" }} legend={[{ label: "Revenue" }, { label: "Cost", color: "var(--chart-2)" }]}>
+  <ComposedChart data={data} index="month" bars={["revenue"]} lines={["cost"]} height={200} />
+</ChartCard>
 ```
 
 ```ts
@@ -1529,7 +1575,9 @@ function ComposedChart({ data, index, bars, lines, colors, height, showGrid, sho
 Shows proportions of a whole, with an optional donut mode.
 
 ```tsx
-<PieChart data={[{ name: "Direct", value: 42 }]} donut />
+<ChartCard title="Traffic sources" description="Last 30 days">
+  <PieChart data={data} variant="donut" legend="right" height={180} centerLabel={{ label: "Visits", value: "48,230" }} cornerRadius={4} />
+</ChartCard>
 ```
 
 ```ts
@@ -1541,7 +1589,9 @@ function PieChart({ data, colors, height, donut, variant, innerRadius, paddingAn
 Compares multiple series across shared axes on a polar grid.
 
 ```tsx
-<RadarChart data={data} index="metric" categories={["a", "b"]} />
+<ChartCard title="Team profile" description="Two teams compared" legend={[{ label: "Team A" }, { label: "Team B", color: "var(--chart-2)" }]}>
+  <RadarChart data={data} index="metric" categories={["a", "b"]} height={240} />
+</ChartCard>
 ```
 
 ```ts
@@ -1553,7 +1603,9 @@ function RadarChart({ data, index, categories, colors, height, showTooltip, fill
 A circular progress-style chart for a single goal value.
 
 ```tsx
-<RadialChart data={[{ name: "Goal", value: 72 }]} />
+<ChartCard title="Quarterly goal" value="72%" description="$360k of $500k · 23 days left">
+  <RadialChart data={[{ name: "Goal", value: 72 }]} height={200} />
+</ChartCard>
 ```
 
 ```ts
@@ -1647,6 +1699,30 @@ import { ColumnChart } from "@wunderui/react"
 <ColumnChart data={data} index="month" categories={["revenue", "cost"]} />
 ```
 
+#### Heatmap
+
+A grid of rounded cells whose shade shows how much happened — commits per day, tickets per hour, deploys per week.
+
+```ts
+function Heatmap({ data, rowLabels, columnLabels, max, levels, color, cellSize, gap, legend, valueFormatter, cellLabel, animate, tooltip, onCellHover, className, "aria-label": ariaLabel, }: HeatmapProps): React.JSX.Element;
+```
+
+#### StatusStrip
+
+A row of day bars from a status page — green when all was well, amber when degraded, red for an outage.
+
+```ts
+function StatusStrip({ days, startLabel, endLabel, height, animate, tooltip, onDayHover, className, "aria-label": ariaLabel, }: StatusStripProps): React.JSX.Element;
+```
+
+#### Gauge
+
+One value against its limit on a half circle, with a needle that swings in and re-aims with a spring.
+
+```ts
+function Gauge({ value, max, label, format, minLabel, maxLabel, color, dangerAt, ticks, size, animate, className, "aria-label": ariaLabel, }: GaugeProps): React.JSX.Element;
+```
+
 #### Agenda
 
 A time-ordered list of scheduled events.

package/data/INSTRUCTIONS.md

@@ -0,0 +1,52 @@
+# WunderUI — instructions for your coding agent
+
+Paste this into CLAUDE.md, AGENTS.md or .cursor/rules. It is the short, always-on version;
+the full context is https://wunderui.com/DESIGN.md and the MCP server answers everything else
+(`claude mcp add wunderui -- npx -y wunderui-mcp`).
+
+## Always
+- Never hardcode colours.
+- Theme by overriding tokens, not by restyling components.
+- Dark mode is a `.dark` class on `<html>`.
+- The package is client code.
+- Import from the package root, never from `dist/` or `src/` paths.
+- `cn` is not re-exported — import it from the `cn` package directly.
+- Prefer a composite over rebuilding one.
+- Charts take a `loading` prop; do not build your own skeleton.
+- A KPI chart ends on the trend line.
+- Motion comes from tokens too.
+- Agent UI has its own components.
+- Before writing UI by hand, look up the component: the Task → component table in DESIGN.md, or the MCP tool `list_components`.
+
+## Motion
+- Duration and easing are class names, not numbers.
+- Only `transform` and `opacity`.
+- Entrances decelerate, exits accelerate.
+- Never fade in the LCP element.
+- Restrain the travel.
+- One overshoot per screen.
+- Reduced motion is opt-in, not a kill switch.
+- Never `transition-all`.
+- Loading keeps its height.
+- A looping ambient animation is the one place `ease-in-out` belongs.
+- Animate by frequency.
+- Anchored surfaces grow from their trigger.
+- Toggles stay interruptible.
+- Hover only where hover exists.
+- Reduced motion keeps the fade.
+
+## Copy
+- Buttons say what happens.
+- Sentence case everywhere in the product.
+- Errors say what happened and what to do.
+- Empty states explain and offer one action.
+- Labels are nouns, hints are sentences.
+- Numbers carry their unit.
+- No filler.
+- Confirmations name the object.
+
+## Before you finish
+- Run the free skills `wunderui-token-check` (no raw colours) and, with Pro, `wunderui-motion-audit` and `wunderui-a11y` on the files you changed.
+- Check light, dark and 390 px.
+
+https://wunderui.com/DESIGN.md · https://wunderui.com/skills · https://wunderui.com/llms-full.txt

package/data/design.json

@@ -4,12 +4,12 @@
   "version": "0.1.0",
   "description": "WunderUI — a design system and component library for React.",
   "site": "https://wunderui.com",
-  "generatedAt": "2026-10-08",
+  "generatedAt": "2026-10-09",
   "install": {
     "available": "Core and Pro licence holders (the wunderui-core download from the purchase). Not on the public npm registry.",
     "package": "Unzip the wunderui-core download, run `npm install && npm run build` in it once, then in your project: `npm pack <wunderui-core>/packages/react --pack-destination .wunderui` and `npm install ./.wunderui/<the .tgz>`. The wunderui-setup agent skill does all of it.",
     "doNot": "Do not run `npm install @wunderui/react` — the package is not published, the command fails.",
-    "free": "Free plan: the 76 free components are MIT source at https://github.com/wunder-ui/wunderui — copy components/, lib/ and styles/wunderui.css into your project (each free component in design.json has a sourceRaw URL). Core and Pro components come with a plan (https://wunderui.com/#pricing).",
+    "free": "Free plan: the 76 free components are MIT source at https://github.com/wunder-ui/wunderui — add them with `npx wunderui-cli add <name>` (files, dependencies and styles), or copy components/, lib/ and styles/wunderui.css (each free component in design.json has a sourceRaw URL). Core and Pro components come with a plan (https://wunderui.com/#pricing).",
     "import": "import { Button, Card } from \"@wunderui/react\"",
     "styles": "@import \"@wunderui/react/styles.css\";"
   },
@@ -20,12 +20,12 @@
     "charts": "recharts"
   },
   "counts": {
-    "components": 201,
+    "components": 204,
     "categories": 12,
-    "exports": 594,
+    "exports": 603,
     "templates": 5,
     "free": 76,
-    "pro": 125
+    "pro": 128
   },
   "plans": {
     "free": "WunderUI Free: the components with tier \"free\" are open source under the MIT License (https://github.com/wunder-ui/wunderui) — any project, commercial included. Every \"pro\" component needs WunderUI Core or Pro.",
@@ -69,10 +69,10 @@
       "--success": "#1AD598",
       "--success-foreground": "#17181A",
       "--chart-1": "var(--brand-600)",
-      "--chart-2": "#F3654A",
+      "--chart-2": "#12AFF0",
       "--chart-3": "#A584F3",
-      "--chart-4": "#FACA4A",
-      "--chart-5": "#1AD598",
+      "--chart-4": "#1AD598",
+      "--chart-5": "#A2A3A3",
       "--radius": "0.75rem",
       "--sidebar": "#F9FBFC",
       "--sidebar-foreground": "#000000",
@@ -288,10 +288,10 @@
       "--success": "#1AD598",
       "--success-foreground": "#17181A",
       "--chart-1": "var(--brand-600)",
-      "--chart-2": "#F3654A",
-      "--chart-3": "#A584F3",
-      "--chart-4": "#FACA4A",
-      "--chart-5": "#1AD598",
+      "--chart-2": "#3CC2F5",
+      "--chart-3": "#B79CF6",
+      "--chart-4": "#3DDBA6",
+      "--chart-5": "#6E7078",
       "--sidebar": "#17181A",
       "--sidebar-foreground": "#FFFFFF",
       "--sidebar-primary": "var(--brand-600)",
@@ -422,10 +422,15 @@
       "**Never fade in the LCP element.** An element at `opacity: 0` is not an LCP candidate, so a 600ms hero fade adds 600ms to your LCP. Render headline copy at full opacity; animate `transform` only.",
       "**Restrain the travel.** Anything anchored to a trigger moves `--travel-xs` or `--travel-sm`. A menu that slides 20px looks like it fell in.",
       "**One overshoot per screen.** `ease-overshoot` is punctuation. Two of them on one view and the interface reads as a toy.",
-      "**Reduced motion is opt-in, not a kill switch.** Wrap the animation in `@media (prefers-reduced-motion: no-preference)` so the still state is the default and you cannot forget a selector.",
+      "**Reduced motion is opt-in, not a kill switch.** Wrap the animation in `@media (prefers-reduced-motion: no-preference)` so the still state is the default and you cannot forget a selector. Reduced means calmer, not nothing: drop transforms and travel, keep opacity and colour changes (rule 15).",
       "**Never `transition-all`.** Name the properties — `transition-[opacity,transform]` — or use bare `transition`, which covers colour, shadow, transform and opacity but no layout property. `transition-all` animates things you did not mean to animate, including on first paint.",
       "**Loading keeps its height.** A skeleton occupies the same box as the content it stands in for, and crossfades — it never collapses and reflows.",
-      "**A looping ambient animation is the one place `ease-in-out` belongs.** A shimmer that runs forever has no entrance and no exit, so symmetry is correct there and nowhere else."
+      "**A looping ambient animation is the one place `ease-in-out` belongs.** A shimmer that runs forever has no entrance and no exit, so symmetry is correct there and nowhere else.",
+      "**Animate by frequency.** Keyboard-driven and 100+/day actions (command palette, shortcuts, moving between tooltips) get no motion; tens a day get a short fade; rare moments may delight. Tooltips skip their entrance when another one was just open (`data-open:data-instant:animate-none`).",
+      "**Anchored surfaces grow from their trigger.** Popover, dropdown, tooltip, hover card and select use `origin-(--transform-origin)`. Never start from `scale(0)` — start at 0.92–0.97 with opacity. Centred dialogs are exempt.",
+      "**Toggles stay interruptible.** Animate switches, checkboxes, tabs and other repeated state changes with transitions — they retarget from wherever they are — never with keyframes bound to the state, which restart from zero. An overshoot transition (`transition-transform duration-base ease-overshoot`) still swings past the end.",
+      "**Hover only where hover exists.** Tailwind v4's `hover:` is already gated to `(hover: hover)`; hand-written `:hover` in CSS goes inside `@media (hover: hover) and (pointer: fine)`, so a tap on a phone does not leave a hover state stuck.",
+      "**Reduced motion keeps the fade.** WunderUI's global rule zeroes the scale, slide, spin and blur of every `animate-in` / `animate-out` and every transform transition, and keeps opacity and colour — so do not add `motion-reduce:transition-none` or `motion-reduce:animate-none` to a fade."
     ],
     "recipes": {
       "Overlay enter and exit": "/* Dialog, sheet, popover, dropdown, context menu — one pattern for all of them.\n   Base UI exposes data-open / data-closed; tw-animate-css turns them into keyframes. */\n<Dialog.Popup className=\"\n  data-open:animate-in   data-open:fade-in-0   data-open:zoom-in-92\n  data-open:slide-in-from-bottom-2\n  data-open:duration-slow  data-open:ease-overshoot\n  data-closed:animate-out  data-closed:fade-out-0 data-closed:zoom-out-96\n  data-closed:duration-fast data-closed:ease-exit\n\" />",
@@ -1118,7 +1123,7 @@
         "AreaChart"
       ],
       "props": "function AreaChart({ data, index, categories, colors, height, stacked, curveType, variant, fillOpacity, dashed, outline, fillOnly, strokeWidth, strokeWidths, showGrid, showAxis, showTooltip, showLegend, yDomain, baseline, yTicks, xTicks, xAxisFormatter, sparkline, yAxisFormatter, valueFormatter, animate, loading, className, }: AreaChartProps): React.JSX.Element;",
-      "example": "<AreaChart data={data} index=\"month\" categories={[\"revenue\", \"cost\"]} />",
+      "example": "<ChartCard title=\"Revenue\" value=\"$84,250\" delta={{ value: \"18.2%\", caption: \"vs last year\" }} periods={[\"12M\", \"30D\"]}>\n  <AreaChart data={data} index=\"month\" categories={[\"revenue\"]} height={200} />\n</ChartCard>",
       "docs": "https://wunderui.com/components/area-chart"
     },
     {
@@ -1131,8 +1136,8 @@
       "exports": [
         "BarChart"
       ],
-      "props": "function BarChart({ data, index, categories, colors, height, layout, stacked, stackGap, radius, barSize, maxBarSize, barGap, lollipop, segments, background, showGrid, showAxis, showTooltip, showLegend, yAxisFormatter, yDomain, yTicks, valueFormatter, animate, loading, className, }: BarChartProps): React.JSX.Element;",
-      "example": "<BarChart data={data} index=\"month\" categories={[\"revenue\", \"cost\"]} stacked={false} />",
+      "props": "function BarChart({ data, index, categories, colors, height, layout, stacked, stackGap, radius, barSize, maxBarSize, barGap, lollipop, segments, background, showGrid, showAxis, showTooltip, showLegend, yAxisFormatter, yDomain, yTicks, valueFormatter, animate, highlight, loading, className, }: BarChartProps): React.JSX.Element;",
+      "example": "<ChartCard title=\"Active users\" value=\"349k\" delta={{ value: \"6.4%\", caption: \"this week\" }} periods={[\"Week\", \"Month\"]}>\n  <BarChart data={data} index=\"day\" categories={[\"users\"]} height={200} highlight={3} />\n</ChartCard>",
       "docs": "https://wunderui.com/components/bar-chart"
     },
     {
@@ -1147,7 +1152,7 @@
         "LineChartReferenceLine"
       ],
       "props": "function LineChart({ data, index, categories, colors, height, showGrid, showAxis, showXAxis, showTooltip, showLegend, showDots, endDot, curved, curveType, dashed, area, strokeWidth, strokeWidths, xTicks, xAxisFormatter, yDomain, yTicks, activeIndex, referenceLines, yAxisFormatter, valueFormatter, animate, loading, className, }: LineChartProps): React.JSX.Element;",
-      "example": "<LineChart data={data} index=\"month\" categories={[\"revenue\", \"cost\"]} curved />",
+      "example": "<ChartCard title=\"Monthly revenue\" value=\"$94k\" delta={{ value: \"46.9%\", caption: \"vs 2025\" }} legend={[{ label: \"2026\" }, { label: \"2025\", color: \"var(--chart-5)\" }]}>\n  <LineChart data={data} index=\"month\" categories={[\"y2026\", \"y2025\"]} colors={[\"var(--chart-1)\", \"var(--chart-5)\"]} dashed={[\"y2025\"]} height={200} />\n</ChartCard>",
       "docs": "https://wunderui.com/components/line-chart"
     },
     {
@@ -1161,7 +1166,7 @@
         "ComposedChart"
       ],
       "props": "function ComposedChart({ data, index, bars, lines, colors, height, showGrid, showAxis, showTooltip, valueFormatter, animate, loading, className, }: ComposedChartProps): React.JSX.Element;",
-      "example": "<ComposedChart data={data} index=\"month\" bars={[\"revenue\"]} lines={[\"cost\"]} />",
+      "example": "<ChartCard title=\"Revenue and cost\" value=\"$365k\" delta={{ value: \"12.8%\", caption: \"margin up\" }} legend={[{ label: \"Revenue\" }, { label: \"Cost\", color: \"var(--chart-2)\" }]}>\n  <ComposedChart data={data} index=\"month\" bars={[\"revenue\"]} lines={[\"cost\"]} height={200} />\n</ChartCard>",
       "docs": "https://wunderui.com/components/composed-chart"
     },
     {
@@ -1175,7 +1180,7 @@
         "PieChart"
       ],
       "props": "function PieChart({ data, colors, height, donut, variant, innerRadius, paddingAngle, cornerRadius, startAngle, endAngle, track, centerLabel, legend, showLabel, showTooltip, valueFormatter, animate, loading, className, }: PieChartProps): React.JSX.Element;",
-      "example": "<PieChart data={[{ name: \"Direct\", value: 42 }]} donut />",
+      "example": "<ChartCard title=\"Traffic sources\" description=\"Last 30 days\">\n  <PieChart data={data} variant=\"donut\" legend=\"right\" height={180} centerLabel={{ label: \"Visits\", value: \"48,230\" }} cornerRadius={4} />\n</ChartCard>",
       "docs": "https://wunderui.com/components/pie-chart"
     },
     {
@@ -1189,7 +1194,7 @@
         "RadarChart"
       ],
       "props": "function RadarChart({ data, index, categories, colors, height, showTooltip, fillOpacity, showDots, animate, loading, className, }: RadarChartProps): React.JSX.Element;",
-      "example": "<RadarChart data={data} index=\"metric\" categories={[\"a\", \"b\"]} />",
+      "example": "<ChartCard title=\"Team profile\" description=\"Two teams compared\" legend={[{ label: \"Team A\" }, { label: \"Team B\", color: \"var(--chart-2)\" }]}>\n  <RadarChart data={data} index=\"metric\" categories={[\"a\", \"b\"]} height={240} />\n</ChartCard>",
       "docs": "https://wunderui.com/components/radar-chart"
     },
     {
@@ -1203,7 +1208,7 @@
         "RadialChart"
       ],
       "props": "function RadialChart({ data, colors, height, showTooltip, innerRadius, centerLabel, animate, loading, className, }: RadialChartProps): React.JSX.Element;",
-      "example": "<RadialChart data={[{ name: \"Goal\", value: 72 }]} />",
+      "example": "<ChartCard title=\"Quarterly goal\" value=\"72%\" description=\"$360k of $500k · 23 days left\">\n  <RadialChart data={[{ name: \"Goal\", value: 72 }]} height={200} />\n</ChartCard>",
       "docs": "https://wunderui.com/components/radial-chart"
     },
     {
@@ -1291,6 +1296,55 @@
       "example": "import { ColumnChart } from \"@wunderui/react\"\n\n<ColumnChart data={data} index=\"month\" categories={[\"revenue\", \"cost\"]} />",
       "docs": "https://wunderui.com/components/column-chart"
     },
+    {
+      "slug": "heatmap",
+      "title": "Heatmap",
+      "category": "Charts",
+      "description": "A grid of rounded cells whose shade shows how much happened — commits per day, tickets per hour, deploys per week.",
+      "group": "Data & Charts",
+      "tier": "pro",
+      "exports": [
+        "Heatmap",
+        "HeatmapCell",
+        "HeatmapProps"
+      ],
+      "props": "function Heatmap({ data, rowLabels, columnLabels, max, levels, color, cellSize, gap, legend, valueFormatter, cellLabel, animate, tooltip, onCellHover, className, \"aria-label\": ariaLabel, }: HeatmapProps): React.JSX.Element;",
+      "example": null,
+      "docs": "https://wunderui.com/components/heatmap"
+    },
+    {
+      "slug": "status-strip",
+      "title": "Status Strip",
+      "category": "Charts",
+      "description": "A row of day bars from a status page — green when all was well, amber when degraded, red for an outage.",
+      "group": "Data & Charts",
+      "tier": "pro",
+      "exports": [
+        "StatusStrip",
+        "StatusStripDay",
+        "StatusStripProps",
+        "StatusStripStatus"
+      ],
+      "props": "function StatusStrip({ days, startLabel, endLabel, height, animate, tooltip, onDayHover, className, \"aria-label\": ariaLabel, }: StatusStripProps): React.JSX.Element;",
+      "example": null,
+      "docs": "https://wunderui.com/components/status-strip"
+    },
+    {
+      "slug": "gauge",
+      "title": "Gauge",
+      "category": "Charts",
+      "description": "One value against its limit on a half circle, with a needle that swings in and re-aims with a spring.",
+      "group": "Data & Charts",
+      "tier": "pro",
+      "exports": [
+        "Gauge",
+        "GaugeProps",
+        "GaugeSegment"
+      ],
+      "props": "function Gauge({ value, max, label, format, minLabel, maxLabel, color, dangerAt, ticks, size, animate, className, \"aria-label\": ariaLabel, }: GaugeProps): React.JSX.Element;",
+      "example": null,
+      "docs": "https://wunderui.com/components/gauge"
+    },
     {
       "slug": "agenda",
       "title": "Agenda",
@@ -3773,5 +3827,79 @@
       ],
       "url": "https://wunderui.com/templates/sign-in"
     }
+  ],
+  "skills": [
+    {
+      "name": "wunderui-screen",
+      "tier": "free",
+      "group": "free",
+      "description": "Builds a complete React screen with WunderUI from a one-sentence request, within the user's plan (Free uses only the free components) — picks the components and a matching block layout, fills props from design.json, adds the empty, loading and error states that generated screens usually forget, uses motion tokens instead of raw milliseconds, and finishes with a typecheck and a build. Use when the user asks for a page, screen, view, dashboard, settings page, table view, form or similar in a project that uses WunderUI (@wunderui/react)."
+    },
+    {
+      "name": "wunderui-setup",
+      "tier": "free",
+      "group": "free",
+      "description": "Sets up WunderUI in a React project from scratch to the first rendered screen — detects the framework, Tailwind version and existing tokens, puts DESIGN.md and design.json into the project, registers the WunderUI MCP server, wires styles.css and the @source path, renders a probe component and writes a setup report. Use when the user wants to install, add, set up or connect WunderUI (or \"@wunderui/react\") in a project, or asks why WunderUI components render unstyled."
+    },
+    {
+      "name": "wunderui-theme",
+      "tier": "free",
+      "group": "free",
+      "description": "Generates a complete WunderUI brand theme from one brand colour (hex) — optionally an accent colour, a radius preference and a font — the eleven-step brand scale (--brand-50 … --brand-1000), the brand tokens derived from it (primary, primary-foreground, text-link, ring, tint and tint text, chart 1) for light and dark, a WCAG AA check of every key pair with shades moved automatically until they pass, and one CSS file to import after @wunderui/react/styles.css (globally or for one subtree), plus a report. Use when the user wants to rebrand, theme or white-label WunderUI, use their own brand / primary / accent colour, change the radius or font of the library, asks for a \"design system from my colour\", or wants to check an existing WunderUI theme file for contrast."
+    },
+    {
+      "name": "wunderui-token-check",
+      "tier": "free",
+      "group": "free",
+      "description": "Finds hard-coded colours, spacing and radii that bypass the WunderUI design tokens, maps each literal to the nearest token with a measured distance (ΔE for colour, px for spacing and radius), separates safe swaps from values too far from any token, replaces the safe ones and reports how much the look changed. Use when the user asks to check or clean up tokens, remove hardcoded colours/hex values, make a codebase use the design system, or before a theming or dark-mode change in a WunderUI project."
+    },
+    {
+      "name": "wunderui-a11y",
+      "tier": "pro",
+      "group": "coding",
+      "description": "Accessibility check per component or screen in a WunderUI project — renders every variant, walks the focus order and checks that focus is visible, measures WCAG AA contrast of every text in light and dark, verifies the reduced-motion fallback, and delivers each finding with a patch instead of just a report. Use when the user asks for an accessibility or a11y check, WCAG contrast, keyboard or focus review, or a reduced-motion check of a component, page or pull request."
+    },
+    {
+      "name": "wunderui-agent-ui",
+      "tier": "pro",
+      "group": "coding",
+      "description": "Builds the interface of an AI agent with WunderUI's agent components — describes the run (steps, tools, costs, approvals), picks RunTimeline, ApprovalCard, CostMeter, AgentStatus, RunError and their relatives, plays through every state including failure and abort, applies the agent motion tokens and checks the approval moment separately. Use when the user asks for an agent run view, an agent dashboard, a tool-call transcript, a human-in-the-loop approval, a cost or usage view, or any UI that shows what an AI agent is doing, in a project that uses @wunderui/react."
+    },
+    {
+      "name": "wunderui-compose",
+      "tier": "pro",
+      "group": "coding",
+      "description": "Composes WunderUI blocks into a complete page — clarifies the page's goal and audience, proposes a block order that follows the visitor's questions, inserts the blocks and fills them with real content, checks the rhythm (one notable effect per section) and protects the LCP element from entrance animation. Use when the user asks for a landing page, marketing page, pricing page, product page, about page or any multi-section page assembled from WunderUI blocks or sections."
+    },
+    {
+      "name": "wunderui-figma-screen",
+      "tier": "pro",
+      "group": "figma",
+      "description": "Builds a screen in Figma from the WunderUI library — real component instances instead of drawn rectangles, every fill and text bound to the theme variables and text styles, auto layout throughout, a light frame first, then the dark frame as a clone with the Dark mode and a 390 px mobile frame — and checks the result with screenshots and an audit (unbound paints, unstyled text, absolute children). Use when the user asks to design, mock up or build a screen, page or dashboard in Figma with WunderUI, or to turn a React screen or a description into a Figma frame."
+    },
+    {
+      "name": "wunderui-figma-sync",
+      "tier": "pro",
+      "group": "figma",
+      "description": "Keeps Figma variables and the project's CSS tokens (styles.css) identical in both directions — reads the Figma variable collections and text styles through the Figma MCP server, diffs them against the CSS custom properties (colour per light/dark mode, spacing, radius, type, motion), lists every conflict with the measured difference, asks which side wins and writes only in that direction, then reports what changed. Use when the user asks to sync Figma and code, compare design tokens with Figma, update styles.css from Figma, push token changes into Figma, or check for design↔code drift in a WunderUI project."
+    },
+    {
+      "name": "wunderui-motion-audit",
+      "tier": "pro",
+      "group": "coding",
+      "description": "Audits a codebase's animations and transitions against the WunderUI motion rules — transition-all, raw millisecond durations, ease-in-out and other generic curves, scroll-driven animations without an @supports fallback, missing prefers-reduced-motion handling, layout-property animation and fades on the LCP element — justifies every finding with the rule from DESIGN.md, proposes and applies a patch with motion tokens and verifies the build. Use when the user asks for a motion or animation audit, wants transitions to feel less generic, asks about reduced motion, or before shipping UI built with WunderUI."
+    },
+    {
+      "name": "wunderui-refactor",
+      "tier": "pro",
+      "group": "coding",
+      "description": "Migrates an existing React app to WunderUI — scans the project and detects the UI stack per file (shadcn/ui, Radix primitives, MUI, Chakra, Headless UI, Mantine, hand-built components and hard-coded Tailwind colours), maps every component to its WunderUI equivalent with prop notes, writes a migration plan with effort and order, applies the safe codemods (shadcn imports → @wunderui/react, raw colours → token utilities) and measures before → after (raw colours, foreign UI imports, WunderUI coverage) with the project's typecheck. Use when the user wants to switch to WunderUI, migrate or refactor an app from shadcn, MUI, Chakra, Mantine or Headless UI, replace a component library, estimate how much work a switch is, or asks \"how do I move this project to WunderUI\"."
+    },
+    {
+      "name": "wunderui-uiux-design-auditor",
+      "tier": "pro",
+      "group": null,
+      "description": "Evidence-based UI/UX and accessibility audit of any product — live websites, landing pages, component libraries / front-end code (React, Vue, Svelte, HTML/CSS, Tailwind) and Figma files — against a 497-rule catalog (WCAG 2.2 A/AA, platform guidance, design-system rules). Produces findings with evidence, severity and acceptance criteria, a coverage matrix, a change plan and a client-ready HTML report. Read-only. Use when the user asks for a UI/UX audit, accessibility or WCAG check, design review, landing-page review, design-system or Figma audit, design↔code (token) comparison, or a re-check after fixes."
+    }
   ]
 }

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "wunderui-mcp",
-  "version": "1.0.2",
+  "version": "1.1.0",
+  "mcpName": "io.github.Kl-webmedia/wunderui-mcp",
   "description": "MCP server that gives AI coding agents the WunderUI design system: tokens, component props, templates and starters. Works with Claude Code, Cursor, Windsurf, Cline and Codex.",
   "keywords": [
     "mcp",

package/src/index.mjs

@@ -373,6 +373,88 @@ server.registerTool(
     })
 )
 
+/* ---------------------------------------------- skills, instructions, Pro */
+
+const siteUrl = () => (process.env.WUNDERUI_SITE ?? design.site ?? "https://wunderui.com").replace(/\/$/, "")
+const licenseKey = () => process.env.WUNDERUI_LICENSE_KEY?.trim() || null
+const authHeaders = () => (licenseKey() ? { authorization: `Bearer ${licenseKey()}` } : {})
+let instructions = null
+try {
+  instructions = readFileSync(resolve(dataDir, "INSTRUCTIONS.md"), "utf8")
+} catch {}
+
+server.registerTool(
+  "get_instructions",
+  {
+    title: "Get the short WunderUI rules",
+    description:
+      "The short, always-on rules for building with WunderUI (components, tokens, motion, copy) — the text to keep in CLAUDE.md / AGENTS.md. Read this first; use get_design_md for the full context.",
+    inputSchema: {},
+  },
+  async () => {
+    if (instructions) return text(instructions)
+    const r = await fetch(`${siteUrl()}/INSTRUCTIONS.md`, { signal: AbortSignal.timeout(8000) }).catch(() => null)
+    return text(r?.ok ? await r.text() : "INSTRUCTIONS.md is not available offline; use get_design_md.")
+  }
+)
+
+server.registerTool(
+  "list_skills",
+  {
+    title: "List WunderUI agent skills",
+    description:
+      "The agent skills that build and check with WunderUI (set up a project, build screens, theme from a brand colour, migrate from shadcn/MUI/Chakra, token check, motion and accessibility audits, Figma). Free skills work for everyone; Pro skills need WUNDERUI_LICENSE_KEY.",
+    inputSchema: {},
+  },
+  async () =>
+    text({
+      licenseKeySet: Boolean(licenseKey()),
+      skills: (design.skills ?? []).map((skill) => ({ name: skill.name, tier: skill.tier, description: skill.description })),
+      use: "get_skill({ name }) returns the skill's instructions so you can follow them without installing it.",
+    })
+)
+
+server.registerTool(
+  "get_skill",
+  {
+    title: "Get a WunderUI agent skill",
+    description:
+      "Returns one skill's instructions (its SKILL.md) from wunderui.com, so the agent can follow the workflow without installing the skill. Pro skills are sent only with a valid Pro key in WUNDERUI_LICENSE_KEY. Scripts the skill mentions come with the installed skill (wunderui.com/skills).",
+    inputSchema: { name: z.string().describe("Skill name, e.g. wunderui-theme or wunderui-screen") },
+  },
+  async ({ name }) => {
+    const r = await fetch(`${siteUrl()}/api/skills/${encodeURIComponent(name)}`, { headers: authHeaders(), signal: AbortSignal.timeout(10000) }).catch(() => null)
+    if (!r) return text("wunderui.com is not reachable — install the skill from https://wunderui.com/skills instead.")
+    const body = await r.json().catch(() => null)
+    if (r.status === 401) return text(`${name} is a Pro skill. Set WUNDERUI_LICENSE_KEY to your WunderUI Pro key (https://wunderui.com/#pricing).`)
+    if (!r.ok || !body?.skill) return text(`No skill called "${name}". Available: ${(design.skills ?? []).map((s) => s.name).join(", ")}`)
+    return text(body.skill)
+  }
+)
+
+server.registerTool(
+  "get_block_source",
+  {
+    title: "Get a WunderUI block's source (Pro)",
+    description:
+      "The React source of a UI block (e.g. category 'app', block 'billing'), optionally one screen, plus the shared helpers it imports. Needs a WunderUI Pro key in WUNDERUI_LICENSE_KEY. Use https://wunderui.com/api/registry/index to see every block.",
+    inputSchema: {
+      category: z.string(),
+      block: z.string(),
+      screen: z.string().optional(),
+    },
+  },
+  async ({ category, block, screen }) => {
+    if (!licenseKey()) return text("Blocks come with WunderUI Pro. Set WUNDERUI_LICENSE_KEY to your Pro key (https://wunderui.com/#pricing), or browse the free previews at https://wunderui.com/blocks.")
+    const url = `${siteUrl()}/api/registry/block/${encodeURIComponent(category)}/${encodeURIComponent(block)}${screen ? `?screen=${encodeURIComponent(screen)}` : ""}`
+    const r = await fetch(url, { headers: authHeaders(), signal: AbortSignal.timeout(15000) }).catch(() => null)
+    if (!r) return text("wunderui.com is not reachable.")
+    if (r.status === 401) return text("The key was not accepted for blocks (blocks need a Pro key).")
+    if (!r.ok) return text(`No block ${category}/${block}${screen ? ` screen ${screen}` : ""}.`)
+    return text(await r.json())
+  }
+)
+
 /* --------------------------------------------------------------------- run */
 
 async function main() {