Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When a developer needs to integrate, install, customize, or troubleshoot shadcn/ui components in a React/Tailwind project, especially new setups or complex UI patterns.
npx shadcn@latest add/init/create for installation and configA correctly configured shadcn/ui project with owned, customizable, accessible components and blocks, following best practices with reduced integration errors.
Use Cases
A developer starts a new dashboard project and needs to set up shadcn/ui with custom theme and components. Using this skill, they run `npx shadcn@latest create`, configure style and tokens, then add data-table and dialog components via MCP discovery. The skill ensures correct file structure, theming, and accessibility, saving setup time and avoiding common pitfalls.
A team migrates from Material UI to shadcn/ui for full code ownership. The skill's migration-guide and customization patterns help them manually integrate components, adapt cva variants, and preserve a11y. They use `get_component_metadata` to resolve deps. Result is a lighter bundle, free customization, and no version lock-in.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File