Illustrative cover generated by us — see the source repo for real examples.
How to use
- 1
Copy the install prompt
Click the black button. One click, done.
- 2
Paste it to your agent
Send it in Claude Code, Codex, Cursor or similar. It installs itself.
- 3
Ask in one sentence
Say what you want, like below, and the agent follows this skill.
/shadcn-ui make me: Finding, installing and customising shadcn/ui componentsExample message showing how to invoke it, not a real output.
What you get
- Component discovery and install flow
- Customisation best practices
- Project setup checklist
Good fit
- Finding, installing and customising shadcn/ui components
Not for
- Non-React projects
What you need
- A React project; the shadcn CLI (npx shadcn), optional shadcn MCP
- License
- Apache-2.0
- Author
- @google-labs-code
Upstream description
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
Other ways to install
Prefer doing it yourself? These commands do the same as the button.
Read https://skilloop.dev/skills/shadcn-ui/install.md and follow the instructions to install the skill.
npx skills add https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/shadcn-ui -g -a claude-code
npx skills add https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/shadcn-ui -g -a codex
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git /tmp/stitch-skills mkdir -p ~/.claude/skills && cp -r /tmp/stitch-skills/plugins/stitch-build/skills/shadcn-ui ~/.claude/skills/shadcn-ui
Original work by its authors, redistributed under its license. We only link and describe it.
Related skills
SaaS Landing Page
A single-page SaaS landing site with hero, features, social proof, pricing and CTA — one HTML file.
Taste Design System (DESIGN.md)
Generate an agent-friendly DESIGN.md that enforces premium, anti-generic UI: strict type, calibrated colour, asymmetric layouts, micro-motion.
Design System Extractor
Analyse an existing Stitch project and synthesise its semantic design system into DESIGN.md.
Frontend Design
Helps your agent make distinctive, intentional UI choices — aesthetic direction, typography and self-critique instead of templated defaults.