Shadcn
This is the skill you want if you're building with shadcn/ui and want Claude to follow the actual patterns instead of inventing broken variants. It enforces the real composition rules: FieldGroup for forms, data-icon for button icons, gap over space-y, size-* when dimensions match. It knows to check installed components first, use ToggleGroup instead of manual button states, and never override semantic colors with raw Tailwind values. The skill pulls live project context and component docs via the CLI, so Claude sees what's actually installed. Honestly just saves you from explaining "no, use InputGroupInput inside InputGroup" for the third time in a session.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 38
- skills.sh installs
- 142.4K
- GitHub stars
- 127.8K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add shadcn-ui/ui --skill shadcn --agent claude-codeInstalls into .claude/skills of the current project.
Files
shadcn/ui
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
IMPORTANT: Run all CLI commands using the project's package runner:
npx shadcn@latest,pnpm dlx shadcn@latest, orbunx --bun shadcn@latest— based on the project'spackageManager. Examples below usenpx shadcn@latestbut substitute the correct runner for the project.
Current Project Context
!`npx shadcn@latest info --json`
The JSON above contains the project config and installed components. Use npx shadcn@latest docs <component> to get documentation and example URLs for any component.
Principles
- Use existing components first. Use
npx shadcn@latest searchto check registries before writing custom UI. Check community registries too. - Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
- Use built-in variants before custom styles.
variant="outline",size="sm", etc. - Use semantic colors.
bg-primary,text-muted-foreground— never raw values likebg-blue-500.
Critical Rules
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/shadcn-ui/ui
- Categories
- Frontend Development, Documentation, Debugging
- First seen
- May 16, 2026
Recommended
More Frontend Development
gsap-reactgreensock/gsap-skillsOfficial GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with Reac75.3Kskills.sh installs
clerk-nextjs-patternsclerk/skillsAdvanced Next.js patterns - middleware, Server Actions, caching with Clerk.55.5Kskills.sh installs
nextjs-on-cloudflarecloudflare/skillsBuild, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers,54.4Kskills.sh installs
vue-best-practicesvuejs-ai/skillsMUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-45Kskills.sh installsvue-debug-guidesvuejs-ai/skillsVue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.27.9Kskills.sh installs
vue-best-practicesantfu/skillsMUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-23.4Kskills.sh installs