| name | reui |
| description | Use the ReUI registry from your AI agent - find, install, and correctly use ReUI components (the 20 free building blocks like data-grid, kanban, filters), their free examples, premium blocks, and Motion Icons. Applies in any project using ReUI, the @reui registry, REUI_LICENSE_KEY, or any shadcn project where the user asks for premium blocks, data grids, kanban boards, dashboards, or full pages. Pairs with the free ReUI MCP server for live, scored registry search and inline component APIs. |
| user-invocable | false |
| allowed-tools | Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *) |
ReUI skill version 668fb463eb. If the ReUI MCP's get_agent_skill reports a newer version, re-run the ReUI installer (see get_agent_skill -> install.recommended) to update this skill. Cloud/tools-only agents have no local file and always read the latest - they can ignore this.
ReUI for Agents
ReUI is a shadcn-compatible registry. It ships four things you reuse - never redesign:
- components - the 20 ReUI building blocks with real APIs:
data-grid, kanban, filters, date-selector, tree, stepper, ... (free)
- examples - free
c-* single-pattern use-cases of a component (c-kanban-1); install one and read it to see exact composition
- blocks - premium full-page sections that compose components (
data-grid-2, pricing-page-1); Pro or Ultimate license at install
- icons - Motion Icons in 4 styles, static + hover-animated variants; Ultimate license at install
The skill is free and this MCP is free to use; it just needs a ReUI account. On first use your agent opens a browser "Sign in with ReUI" prompt (a free account is created if you don't have one). Free covers components and examples with a daily request allowance; a Pro or Ultimate license unlocks premium blocks and Motion Icons and removes the limit (see rules/registry.md). The same account and skill work in every agent and service the MCP connects to - this skill is agent-agnostic.
Skill + MCP are a team: this skill is the workflow (how to find, install, read the API, and adapt by reuse); the MCP is the live data and the hands (search, get_component, install commands). Your job: find the right item, install it with the shadcn CLI, read its real API, and adapt by reuse - wire real data and theme it; do not hand-roll or restyle what ReUI already provides. This skill layers on the shadcn skill: follow that for generic rules (spacing, cn(), semantic colors, forms); follow this for everything ReUI-specific.
The core loop (MCP-native)
- Find - call the ReUI MCP
search tool with the user's intent. It returns a ranked, scored list across components/examples/blocks/icons, each with an install command, previewUrl, docsUrl, and componentsUsed. Pass hints (type, component, category, features, free) when you can infer them.
- Install - run the returned command non-interactively (
npx shadcn@latest add @reui/<name> --yes). The CLI resolves deps, aliases, and the base/style from components.json. See cli.md.
- Read the API (on your base) - first note your base from
components.json -> style (base-nova -> Base UI, radix-nova -> Radix UI). For each component an item uses, call get_component(name) and read its inline api (no web fetch); then get_examples(name) to install a worked example and copy its composition - the installed files are already in your base. Whenever you work with a component's API, also share its docsUrl (the primitive's API documentation page) with the user so they have the full reference. See components.md.
- Adapt (reuse-first) - swap demo data for real data, fix icon imports, align tokens. Do not redesign. See adapting.md.
Always show the preview. Every item a tool returns carries a previewUrl (a live preview page). Whenever you list, recommend, or present ReUI items to the user - blocks, components, examples, or icons, whether from search, search_icons, list_components, compose_page, or any getter - include each item's previewUrl so they can SEE it before installing. Blocks and examples open an individual live preview; icons and components link to their live category/component page. Never present an item without its preview link.
If the ReUI MCP is not configured, fall back to npx shadcn@latest search @reui -q "..." then add - but the MCP gives scored matches + inline APIs; prefer it.
Commands
Run ReUI as explicit slash commands (via the ReUI MCP) or just ask in plain language - both run the same workflow.
| Command | Invoke | Does |
|---|
| build | /mcp__reui__build <what> | Compose a page/section/feature from ReUI: plan → install → read API → adapt → craft → audit. |
| add | /mcp__reui__add <item> | Find & install one component/example/block/icon and wire it in. |
| fix | /mcp__reui__fix [target] | Diagnose & fix ReUI usage: wrong/undocumented props, base/radix mismatch, missing states, a11y/scroll. |
| improve | /mcp__reui__improve [target] | Refine + extend existing ReUI UI to a production-exceptional bar (hierarchy, density, states, responsive, motion). |
Invocation differs slightly per agent (/mcp__reui__build in Claude Code/Cursor/Windsurf, /mcp.reui.build in VS Code). No command surface? Just describe what you want - this skill drives the identical loop.
When to reach for ReUI vs plain shadcn
| Need | Reach for |
|---|
| A full page or section (dashboard, billing, auth, pricing, settings) | compose_page first (plans sections + best blocks), then ReUI blocks |
| A data table with sorting/filtering/pagination/virtualization | the data-grid component (never hand-roll a <table>) |
| A drag-and-drop board | the kanban component |
| Advanced column filtering, date range, tree, stepper, ... | the matching ReUI component |
| A single generic control already in shadcn (Button, Dialog, Select) | plain shadcn |
Detailed references
- rules/registry.md - the four types, the @reui registry, base/radix, free vs premium + license
- rules/workflow.md - the find -> install -> read-API -> adapt loop (most important)
- rules/components.md - the 20 components, the data-grid contract, base vs radix
- rules/adapting.md - reuse-first: preserve the design (no over-customizing), reuse examples + a block's own elements, real data, don't invent APIs
- rules/craft.md - make it exceptional: point of view, hierarchy, density, states, responsive, motion, the bar
- rules/quality.md - security, accessibility, and scroll gates (the done gate)
- rules/styling.md - ReUI extended tokens, theme adaptation, density
- rules/icons.md - portable icons, swapping imports, Motion Icons (static + animated)
- tools.md - the ReUI MCP: golden path, the 19 tools, token rules, result shapes, errors
