- Alert
- Autocomplete
- Badge
- CascaderCascader keeps a saved selection's full path, popup open or closed
- Code Block
- Color Picker
- Data GridData Grid works in apps that run React Compiler, with resizing, edits and callbacks kept live
- Date SelectorDate Selector keeps its year list and Today button current in apps that run React Compiler
- Emoji Picker
- Event CalendarEvent Calendar keeps today and the agenda current in apps that run React Compiler
- File TypeFile Type knows 171 formats, .env and Dockerfile included
- File Upload
- Filters
- Frame
- GanttGantt keeps its Today button and tooltip current in apps that run React Compiler
- Icon Stack
- Icon Tile
- Kanban
- Number Field
- Phone Input
- Rating
- Scrollspy
- Signature Pad
- Sortable
- Stepper
- Time Picker
- Timeline
- Tree
The ReUI Agent Skill is a small set of markdown files that teaches your coding agent how to build with ReUI: how to find the right item, install it, read its real API, and adapt it by reuse. It pairs with the ReUI MCP server - together they turn "make me a dashboard" into real ReUI blocks wired to your data.
The skill is free and works with every supported agent. Each per-agent guide sets it up for you; this page explains what it does.
Skill and MCP are a team
They do different jobs, and they are best together:
- The MCP server is the live data and the hands. It answers
search, returns the real component APIs (get_component), validates prop usage (validate_usage), and hands back the exact shadcn install command - all against the current registry, scored and ranked. - The skill is the workflow brain. It tells the agent when to reach for ReUI, which tool to call next, and how to adapt what it installs (reuse the block, wire real data, keep the design, never invent props).
Without the skill an agent can still call the tools, but it tends to over-customize, hand-roll what ReUI already ships, or invent APIs. The skill keeps it on rails.
The workflow it teaches
Plan
Before any UI code, the agent writes a short UI plan in its reply: the layout, the regions top to bottom and what fills each, the density, the empty, loading and error states, and any motion. Then it builds that plan.
Find
Call search with the user's intent. It returns ranked matches across components, examples, blocks, and icons, each with an install command, preview, a thumbnail image on blocks and examples, docs link, and the components it uses.
Install
Run the returned shadcn command non-interactively. The CLI resolves dependencies and your base style from components.json.
Read the API
Call get_component for each component the item uses and read its inline API (no guessing), then get_examples to copy a real, working composition.
Adapt by reuse
Swap demo data for real data, fix icon imports, and align to your theme tokens. Keep the block's structure and styling - do not redesign what ReUI already provides. validate_usage flags any prop or name the agent invented before it ships.
Check
After every UI edit, the agent runs the skill's self-checks on the files it changed, works through get_audit_checklist, fixes what they flag, and hands back in 5 short lines.
Beyond the loop, the skill carries ReUI's design rules for color, theming, motion and layout, plus the compose guide behind the plan and the quality check behind the last step. Each lives in its own topic file that the agent reads on demand, only when the task touches it, so the core stays small: an installed copy opens the file, and over the MCP get_agent_skill returns the core workflow with a topic index, then 1 topic per call.
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). |
In Claude Code these run as /mcp__reui__build; other agents show MCP prompts under their own names, or not at all. No command surface? Just describe what you want - this skill drives the identical loop.
When to reach for ReUI vs plain shadcn
The skill also teaches the agent when to leave ReUI alone. This is the decision table it follows:
| Need | Reach for |
|---|---|
| A full page or section (dashboard, billing, auth, pricing, settings) | compose_page first (it plans the sections, then fills each one with the best Pro block, or with free c-* examples on a free account) |
| 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 |
A weakMatch on a search result is the signal to stop: the registry does not carry what was asked for, so compose the screen from components instead of forcing the top hit.
Set it up in your agent
The skill reaches every agent the right way - local CLIs and editors like Claude Code, Codex, Cursor, OpenCode, and Gemini CLI get it written into your project by a one-line installer, as do agents that read the same skill folders, such as VS Code and Antigravity; every other agent receives it at runtime through the MCP, with nothing to install. Any MCP client can also pull it on demand with the get_agent_skill tool.
curl -fsSL https://mcp.reui.io/install | node -In a project, the installer also adds a short block of ReUI's design rules to AGENTS.md, to GEMINI.md when that file already exists, and to an always-applied Cursor rule (.cursor/rules/reui.mdc): installed components first, semantic color tokens, the spacing ladder, type sizes, motion values, empty, loading and error states, and a short UI plan before code with the skill's self-check before finishing. In AGENTS.md and GEMINI.md the block sits between <!-- BEGIN:reui-agent-rules --> and <!-- END:reui-agent-rules --> markers and nothing outside them changes, so a re-run only refreshes the block; the Cursor rule is a file the installer owns and replaces on each run. When the project has a CLAUDE.md, .claude/CLAUDE.md or CLAUDE.local.md and no AGENTS.md, the installer does not create one and prints the block for you to paste instead (REUI_AGENTS_MD=create creates it anyway). Every run, project mode included, also adds a reui entry to Codex's ~/.codex/config.toml in your home directory.
Put REUI_AGENTS_MD=0 before node to leave AGENTS.md and GEMINI.md alone, or REUI_DRY_RUN=1 to print every planned write without writing anything. Every install prints the command that takes the block back out of AGENTS.md and GEMINI.md:
curl -fsSL https://mcp.reui.io/install | REUI_AGENTS_MD=remove node -Pick your agent to jump to its skill setup:
The skill and the MCP are free and only need a ReUI account. A Pro license unlocks premium blocks, Ultimate adds Motion Icons, and either removes the daily request limit, so the workflow above can install and adapt the paid parts of the registry too.