shadcn · pedronauck — Claude Code skill: what it does, how to install
Guides AI agents through shadcn/ui and Radix UI best practices. Prevents broken themes and keeps component accessibility intact.
npx skills add pedronauck/skills --skill shadcn -a claude-codeWhat shadcn does
This skill guides your AI coding agent when generating or refactoring shadcn/ui components. It enforces semantic design tokens such as bg-background and text-foreground. Hardcoded color classes like bg-white or text-black are explicitly banned because they break light and dark theme switching.
Component exports must stay separate rather than namespaced via Object.assign. The skill keeps Radix UI accessibility attributes untouched, ensuring screen readers and keyboard navigation continue to work. Before completing edits, the agent runs a checklist covering tokens, keyboard navigation, pnpm run typecheck, and project tests.
What it helps with
- apply design tokens for dark and light theme switching
- extend existing components with new props and variants
- preserve Radix UI accessibility attributes and screen reader labels
- structure compound components using individual exports
Example prompts for the agent
- Add a loading variant to the Button component following shadcn rules
- Build an accessible Dialog using design tokens instead of hardcoded colors
- Refactor this card into separate exported subcomponents
How to install shadcn
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a claude-code2Manually: put the files in place
~/.claude/skills/shadcn/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/shadcn/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a codex2Manually: put the files in place
.agents/skills/shadcn/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a cursor2Manually: put the files in place
.cursor/skills/shadcn/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills shadcn2Manually: put the files in place
.github/skills/shadcn/SKILL.md1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a gemini-cli2Platform CLI
gemini skills install https://github.com/pedronauck/skills --path skills/curated/shadcnManually: put the files in place
.devin/skills/shadcn/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about shadcn
How do I install shadcn in Claude Code?
Run npx skills add pedronauck/skills --skill shadcn -a claude-code in your terminal. You can also save the file directly to ~/.claude/skills/shadcn/SKILL.md.
What does the shadcn skill do?
It provides conventions for working with shadcn/ui and Radix UI primitives. It enforces design system tokens, separate compound component exports, and accessibility standards.
Why does this skill ban classes like bg-white?
Explicit color utilities break theme switching. The skill requires semantic tokens like bg-background linked to CSS variables in globals.css so dark mode functions reliably.
Similar skills
Everything for Frontend and UI →shadcn by other authors comes first.
