Integrating shadcn/ui Components
google-labs-code/stitch-skills
Guides finding, installing, customizing and wiring up shadcn/ui components in a project, with MCP tools for the component catalog and registries.
Build and maintain Core UI with the ReUI registry and authenticated ReUI MCP.
$ npx skills add Asymmetric-al/core --skill reui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Asymmetric-al/core reui --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Asymmetric-al/core.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/reui .claude/skills/reui && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "reui" agent skill from https://github.com/Asymmetric-al/core/tree/develop/.agents/skills/reui into .claude/skills/reui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reui", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Asymmetric-al/core/tree/develop/.agents/skills/reuiType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Asymmetric-al/core --skill reui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Asymmetric-al/core reui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Asymmetric-al/core.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/reui .agents/skills/reui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "reui" agent skill from https://github.com/Asymmetric-al/core/tree/develop/.agents/skills/reui into .agents/skills/reui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reui", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Asymmetric-al/core --skill reui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Asymmetric-al/core reui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Asymmetric-al/core.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/reui .cursor/skills/reui && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "reui" agent skill from https://github.com/Asymmetric-al/core/tree/develop/.agents/skills/reui into .cursor/skills/reui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reui", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Asymmetric-al/core.git --path .agents/skills/reui--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Asymmetric-al/core --skill reui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Asymmetric-al/core reui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Asymmetric-al/core.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/reui .gemini/skills/reui && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "reui" agent skill from https://github.com/Asymmetric-al/core/tree/develop/.agents/skills/reui into .gemini/skills/reui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reui", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Asymmetric-al/core reuiInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Asymmetric-al/core --skill reui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Asymmetric-al/core.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/reui .github/skills/reui && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "reui" agent skill from https://github.com/Asymmetric-al/core/tree/develop/.agents/skills/reui into .github/skills/reui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reui", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Asymmetric-al/core --skill reui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Asymmetric-al/core reui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Asymmetric-al/core.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/reui .opencode/skills/reui && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "reui" agent skill from https://github.com/Asymmetric-al/core/tree/develop/.agents/skills/reui into .opencode/skills/reui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "reui", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
reuiBuild and maintain Core UI with the ReUI registry and authenticated ReUI MCP.
Reui is an agent skill from Asymmetric-al/core. Build and maintain Core UI with the ReUI registry and authenticated ReUI MCP. Use for new pages/sections/features, ReUI components/examples/Pro blocks, @reui installs, REUILICENSEKEY setup, and ReUI API or documentation research. Preserve exact base-maia/Base UI, packages/ui ownership, existing shared tables, and Core tokens; use live APIs and worked examples.
Its SKILL.md is about 3.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including reference files (for example `references/docs.md`, `references/upstream-manifest.json` and `references/upstream.md`).
It sits in Frontend & Design. It works with Model Context Protocol and shadcn/ui. The repository describes itself as: A high-performance, enterprise-grade Next.js 16 application for mission-focused non-profit organizations. Built for high impact teams. The licence is AGPL-3.0.
8 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit c30c8ff. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
Bash(npx shadcn@latest *)Bash(pnpm dlx shadcn@latest *)Bash(bunx --bun shadcn@latest *)From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
bunnpxbunxFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npx and bunx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
REUI_LICENSE_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Reui loads about 3.9k tokens when it runs, and up to ~7.5k if it reads all its reference files. Until then it costs about 92 tokens; SKILL.md has 1,744 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
a key present only in root `.env.local` is not automatically loaded by the CLIIf needed, use git-ignored `packages/ui/.env.local`.Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from Asymmetric-al/core at commit c30c8ff, republished under its AGPL-3.0 licence (© Asymmetric-al). 1,744 words, ~3,875 tokens.
.claude/skills/reui/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.<!-- BEGIN:core-reui-overlay -->
These Core instructions take precedence over the generic upstream guidance below.
Reconcile them before running bun run skills:sync after an upstream refresh.
@reui registry installs, existing ReUI component work, ReUI MCP
setup/debugging, and ReUI documentation or API research.packages/ui/AGENTS.md, docs/ai/rules/frontend.md, the official
.agents/skills/shadcn/SKILL.md, and
docs/ai/skills/moai-library-shadcn/SKILL.md. ReUI does not replace those owners.packages/ui/components.json: exact base-maia, Base UI, Zinc-oriented
semantic CSS variables, and iconLibrary: "lucide". Shared primitives stay in
packages/ui; apps import @asym/ui. Adapt registry output to Core's Maia
system before accepting it; preserve the reusable composition within that
system. Do not run shadcn init, switch presets, introduce Radix, or fork
shared primitives inside an app.reui MCP for live discovery, APIs, and planning. Read its
current tool schemas. get_project_context confirms style and license setup;
a successful premium block search confirms plan access. Every MCP request
requires an OAuth, personal-token, or license credential. Core's headless
setup reads REUI_LICENSE_KEY from the process environment; never paste a
secret into a committed file or command. See tools.md.docs/guides/development/reui-source-license.md for the recorded permission.
Use suitable Pro blocks directly, alongside MIT public components, hooks,
and examples with their notices. Keep commercial-source provenance distinct
from MIT notices. Paid access alone does not establish distribution rights
outside this confirmed scope; templates and Ultimate-only icons require
their own applicable entitlement and permission.
Use compose_page for full pages and scoped search for components/blocks.
Motion
Icons require Ultimate for discovery and install: use the existing
lucide-react icons on Pro. Respect locked, unlock, weakMatch, and
unavailableSections; do not invent missing inventory or promise an upgrade.get_component for the APIs needed by an item, read omitted sections
through the returned next hint, and copy worked get_examples composition.
Confirm the API against already-installed source and current manifests before
upgrading existing components: the live registry may be newer. Resolve API
example imports against the actual shared source and public package exports;
raw upstream paths may not match Core's installed owner. Use
validate_usage for unfamiliar names/props. Documentation routing
explains Base UI .md pages, llms.txt, setup, styling, RTL, and changelogs.
Share an item's returned preview link and the relevant component docs link.bunx --bun shadcn@latest add @reui/<name> --yes --cwd packages/ui.
Preview changes with --dry-run and inspect conflicts first. Never blindly
--overwrite. Inspect registry files[].target and imports using CLI
view/dry-run: explicit targets can create components/reui/* even though
Core already owns the matching primitive under components/shadcn/* (for
example components/shadcn/data-grid). Adapt that existing shared owner
instead of introducing a duplicate tree. For genuinely new primitives or
blocks, deliberately provide public @asym/ui exports and verify consumer
imports; package aliases alone do not create exports. Keep the existing
components.json aliases. packages/ui/components.json already has the authenticated
@reui object with Authorization: "Bearer ${REUI_LICENSE_KEY}"; keep it.
Free items also work through this config. The inherited shell key is usable;
a key present only in root .env.local is not automatically loaded by the CLI
running in packages/ui. If needed, use git-ignored packages/ui/.env.local.
See rules/cli.md.DataTableResponsive from @asym/ui/components/shadcn/data-table for
standard app tables. Use ReUI data-grid for a feature that needs its
specific documented composition, integrated through packages/ui. Follow
docs/guides/development/tanstack-virtual-foundation.md and the installed
TanStack version; do not replace the shared table or apply an old v8 example
to a v9 component. Keep data access in the existing API/database boundaries.render
composition, Core semantic tokens, and shared motion/reduced-motion rules.
New semantic status tokens belong in packages/ui/styles/globals.css, with
purpose, light/dark values, Tailwind mapping, and contrast verification.
Use TDD for substantive behavior, run the applicable package checks and
browser/a11y checks, then the live get_audit_checklist plus Core gates.get_agent_skill.version with the pinned upstream version; stage the
hosted bundle and reconcile Core overlays instead of executing the installer
over this repository. Its direct writes bypass canonical source ownership.base-maia, Base UI, shared ownership, and semantic tokens preservedDataTableResponsive and data-access contracts preservedbun run skills:sync, followed by
non-mutating bun run skills:verifyNaming: ReUI (@reui, this skill) is unrelated to shadcn-studio /rui
(Refine UI) in docs/ai/rules/shadcn-studio-mcp.md.
<!-- END:core-reui-overlay -->
ReUI skill version
e7aac3424a. Compareget_agent_skill.versionwith this pin. Refresh through Core's staged upstream workflow, reconcile the overlays, then sync the generated mirrors.
ReUI is a shadcn-compatible registry. It ships four things you reuse - never redesign:
data-grid, kanban, filters, date-selector, tree, stepper, ... (free)c-* single-pattern use-cases of a component (c-kanban-1); install one and read it to see exact compositiondata-grid-base-2, settings-2); Pro or Ultimate license at installThe 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; Pro unlocks premium blocks, Ultimate additionally unlocks Motion Icons, and either licensed plan 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.
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 command non-interactively: npx shadcn@latest add @reui/<name> --yes, with <name> exactly as a ReUI tool returned it. The CLI resolves deps, aliases, and the base/style from components.json. See cli.md.button, dialog, select, ...) are not ReUI items: install them by bare name, npx shadcn@latest add button --yes. A bare name in an item's registryDependencies is a shadcn/ui item.badge and alert exist in both registries: @reui/badge is ReUI's, bare badge is shadcn's.shadcn add items.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.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.
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.
| 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 | Core DataTableResponsive; ReUI data-grid for its specific composition |
| 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 |
© Asymmetric-al, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 13 other files (references) in .agents/skills/reui of Asymmetric-al/core.
Open the folder on GitHubat commit c30c8ff
Reui next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Reui this skillAsymmetric-al/core | 381 | — | ~3.9k | Automated safety check: Notes | AGPL-3.0 | |
| Integrating shadcn/ui Componentsgoogle-labs-code/stitch-skills | 8.5k | 4 repos | ~2.3k | Automated safety check: Notes | Apache-2.0 | |
| UI UX Pro Maxsaoudi-h/solar-icons | 190 | 18 repos | ~11k | Automated safety check: Notes | Custom licence | |
| Activepieces Design Systemactivepieces/activepieces | 25k | — | ~3.6k | Automated safety check: Pass | Custom licence | |
| UithingBayBreezy/ui-thing | 729 | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Better Designmarvkr/better-design | 254 | — | ~1.2k | Automated safety check: Pass | MIT |
google-labs-code/stitch-skills
Guides finding, installing, customizing and wiring up shadcn/ui components in a project, with MCP tools for the component catalog and registries.
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
activepieces/activepieces
Design system for Activepieces (open-source AI automation platform, "open source replacement for Zapier").
BayBreezy/ui-thing
Manages UI Thing components, prose, blocks, themes, shortcuts, docs, and MCP-driven workflows in Nuxt projects and in the UI Thing source repo.
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
lassejlv/loora
Build, edit, refine, troubleshoot, and review polished responsive product interfaces through the Loora MCP server and its structured Canvas schemas.
Asymmetric-al/core
Implement idempotency keys and handling to ensure operations can be safely retried without duplicate effects.
Asymmetric-al/core
Audit and fix accessibility in Core UI. An agent skill from Asymmetric-al/core.
Asymmetric-al/core
A skill your agent uses when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted…
Asymmetric-al/core
Build modern, composable, and accessible React UI components following the components.build specification.
Asymmetric-al/core
Guides a one-question-at-a-time design interview, captures alignment in agent/EVE-BRIEF.md, then scaffolds and implements a runnable eve agent with verbose teaching comments.
Asymmetric-al/core
Design engineering principles and patterns for building polished, accessible web interfaces.
Works with
Categories
Build and maintain Core UI with the ReUI registry and authenticated ReUI MCP. Reui is an agent skill from Asymmetric-al/core. Build and maintain Core UI with the ReUI registry and authenticated ReUI MCP.
Reui fits situations like: new pages/sections/features; reUI components/examples/Pro blocks; REUILICENSEKEY setup; documentation research.
Run `npx skills add Asymmetric-al/core --skill reui -a claude-code`. Or copy the skill folder (.agents/skills/reui in Asymmetric-al/core) into .claude/skills/reui in your project. Claude Code loads it when a task matches its description.
Run `npx skills add Asymmetric-al/core --skill reui -a codex`. Or copy the skill folder (.agents/skills/reui in Asymmetric-al/core) into .agents/skills/reui in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Asymmetric-al/core --skill reui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/reui, .gemini/skills/reui, .github/skills/reui and .opencode/skills/reui in your project.
Going by SKILL.md and its folder, Reui needs the command-line tools its instructions call (bun, npx and bunx) and credentials named REUI_LICENSE_KEY. Our summary lists: Node.js; A credential in REUI_LICENSE_KEY. Its frontmatter pre-approves these tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *).
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
Reui is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.9k tokens (SKILL.md is roughly 16k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.7k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Reui: Integrating shadcn/ui Components (google-labs-code/stitch-skills, 8.5k stars), UI UX Pro Max (saoudi-h/solar-icons, 190 stars), Activepieces Design System (activepieces/activepieces, 25k stars) and Uithing (BayBreezy/ui-thing, 729 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Asymmetric-al (a GitHub organization) maintains it in Asymmetric-al/core, which has 381 GitHub stars. The repository holds 43 skills in this directory. The repository was last updated on October 9, 2026.
Source: Asymmetric-al/core on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.