shadcn
Use a project-aware shadcn/ui workflow to search, add, compose, theme, and repair components with the correct CLI and implementation patterns.
Best for
React and Next.js developers building product interfaces with shadcn/ui, Tailwind CSS, Radix, or Base UI.
npx skills add https://github.com/shadcn-ui/ui --skill shadcn
Common use cases
When to use this skill
- Inspect a project's shadcn configuration before adding components.
- Find and compose existing primitives instead of rebuilding them.
- Apply presets or update components with a safe diff-first workflow.
Example prompts
Prompts you can adapt
How to use it
A simple workflow
Open the verified shadcn/ui source on GitHub and review its SKILL.md or repository documentation.
npx skills add https://github.com/shadcn-ui/ui --skill shadcn
Start with an example prompt below, adapt it to your project, and verify the result.
FAQ
Questions about shadcn
Is this linked to an official public source?
Yes. This page links directly to the shadcn/ui GitHub source shown above. Review its documentation and license before production use.
How do I add this skill?
Run the setup command shown on this page, then refresh your agent if required.
Related skills
Keep building the workflow
React Best Practices
Apply Vercel Engineering guidance to React and Next.js code, with emphasis on performance, rendering, and bundle efficiency.
React Composition Patterns
Refactor React components with compound components, state lifting, and composition patterns that avoid boolean-prop sprawl.
Frontend Design
Create distinctive, production-grade frontend interfaces with deliberate typography, color, layout, and visual identity instead of generic AI-generated styling.