What is the stitch shadcn-ui skill?
The shadcn-ui skill is a SKILL.md in google-labs-code/stitch-skills, in the stitch-build plugin. It guides an AI coding agent to discover shadcn/ui components with the shadcn MCP tools, install them with the shadcn CLI, theme them with CSS variables and extend them with CVA variants and wrapper components.
The shadcn-ui skill is part of the stitch-build plugin in Google's stitch-skills collection. The skill's frontmatter name is shadcn-ui. It is expert guidance for using shadcn/ui in a React project, and it does not need Stitch to work.
It is separate from the official shadcn skill, which injects project context for shadcn/ui. This one is a guided workflow with a resources folder, examples and a setup verification script.
What changes in your agent's output
- The agent looks up components with the shadcn MCP tools, such as
list_components,get_component_metadata,get_component_demoandget_component, instead of guessing at props. - New work starts with the shadcn CLI:
createfor new projects,initfor existing ones andaddfor components. - Theming uses CSS variables, with the styles Vega, Nova, Maia, Lyra and Mira and the base colors slate, gray, zinc, neutral and stone.
- Components are extended with CVA variants and wrapper components such as a LoadingButton.
Who the stitch shadcn-ui skill is for
Best for
- React projects that use shadcn/ui and need consistent component choices.
- Agents that invent component APIs instead of reading them.
- Teams that want blocks such as dashboard, login, sidebar or calendar set up quickly.
Not for
- Choosing between UI libraries. Use pick-ui-library first.
- Non-React stacks.
- Registry access without a skill. The shadcn MCP is the tool layer this skill relies on.
Use it with UiChemy
This skill is for React front ends. If your target is WordPress, UiChemy builds there: AI to WordPress imports an existing AI build, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Stitch shadcn-ui Skill: shadcn/ui Guidance for Agents
git clone https://github.com/google-labs-code/stitch-skills.gitSet up the Stitch MCP server
These skills assume the Stitch MCP server is configured in your agent. Follow the Stitch MCP setup docs first.
Clone the repository
Run
git clone https://github.com/google-labs-code/stitch-skills.git. This skill is at plugins/stitch-build/skills/shadcn-ui.Copy the skill folder
Copy that folder into your agent's skills folder with every file in it. The project's own plugin installer,
npx plugins add google-labs-code/stitch-skills, is the alternative and installs the whole collection.Invoke it
Open a React project with shadcn/ui, make sure the shadcn MCP is connected, and ask your agent to use shadcn-ui to add or customize a component.
Check that it loaded
Ask for a login form using shadcn/ui. The agent should look up the component through the shadcn MCP tools, install it with the CLI and theme it with CSS variables. Run the bundled verify-setup script to confirm the project is configured.
Key features
- MCP-driven discoveryComponent lookups use the shadcn MCP tools for metadata, demos and source.
- Registry and block toolsThe skill lists registry and block tools, including
list_blocksandget_block, for calendar, dashboard, login, sidebar and products blocks. - CLI workflow
npx shadcn@latest add,createandinitcover installing and starting projects. - Style and base color optionsFive styles and five base colors are named in the guidance.
- Theming with CSS variablesCustomization stays in CSS variables rather than edits scattered across components.
- CVA variants and wrappersThe skill shows variants through class-variance-authority and wrapper components for repeated patterns.
- Bundled resourcesSetup, component catalog, customization and migration guides sit in the resources folder.
- ExamplesExamples cover an auth layout, a data table and a form pattern.
- Setup checkA
scripts/verify-setup.shscript checks the project's configuration.
Frequently asked questions
What is the stitch shadcn-ui skill?
It is the shadcn-ui skill in the stitch-build plugin of google-labs-code/stitch-skills. It guides an AI coding agent to find, install and customize shadcn/ui components using the shadcn MCP tools, the shadcn CLI, CSS-variable theming and CVA variants.
How do I install it?
Clone google-labs-code/stitch-skills and copy plugins/stitch-build/skills/shadcn-ui into your agent's skills folder, with its resources and examples, or use the project's plugin installer. Connect a shadcn MCP server so the discovery tools are available.
How is it different from the official shadcn skill?
The shadcn skill injects your project's shadcn context so the agent follows your setup. This skill is a guided workflow with MCP lookups, theming, wrapper patterns, examples and a verification script.
Do I need Stitch to use it?
No. It sits in the stitch-build plugin, but its guidance is about shadcn/ui and the shadcn MCP tools. It relies on a shadcn MCP server, not on the Stitch MCP, though it pairs well with Stitch designs.
Which components and blocks does it cover?
It covers the shadcn/ui component catalog through MCP lookups and mentions blocks such as calendar, dashboard, login, sidebar and products. A component catalog guide and examples for auth, data tables and forms are bundled.
Which AI agents can use it?
The stitch-skills README lists Codex, Antigravity, Gemini CLI, Claude Code, Cursor and OpenCode, with OpenCode set up manually. The agent also needs a connected shadcn MCP server. Check your agent's documentation for where skills folders live.
Where does it fit with the other pieces?
Use the community shadcn/ui MCP or the official shadcn MCP for lookups. Turn Stitch screens into React with stitch-react-components, then use this skill to align them with shadcn/ui, so the components follow one system.