Skill: dev-shadcn
Integration and customization of shadcn/ui (copy-paste React components, Radix + Tailwind). Trigger when the user wants to install shadcn, add components, customize the theme, or when shadcn/ui usage is detected in the project.
Configuration
| Property | Value |
|---|---|
| Context | inline |
| Pre-approved tools | None declared: the project's permission settings apply |
| Trigger | keywords: dev, shadcn |
Detailed description
shadcn/ui (pointer)
The canonical shadcn skill ships inside the library repository itself at shadcn-ui/ui/skills/shadcn. Because it lives next to the source, it stays in sync with the CLI v4 release flow — registry workflows, Radix + Base UI primitives, theming, and component patterns are updated the moment they ship, substantially deeper and fresher than the prior foundation skill (258 lines) could maintain.
Delegate to the vendor skill
# shadcn's own CLI exposes the skill (verify on https://ui.shadcn.com/docs/skills):
npx shadcn skill add shadcn
# Fallback — clone the canonical repo and symlink:
git clone --depth 1 https://github.com/shadcn-ui/ui ~/dev/vendor-skills/shadcn-ui
ln -s ~/dev/vendor-skills/shadcn-ui/skills/shadcn ./.claude/skills/shadcn
Recipe entry: docs/recipes/recommended-vendor-skills.md §"shadcn/ui — canonical skill in main repo". Reduction rationale: specs/foundation-positioning-review/spec.md Wave 1.
Foundation-unique angle preserved: art direction
If the project declares a Style: direction in CLAUDE.md (.claude/rules/design-style.md), adapt the shadcn CSS tokens accordingly — the vendor skill stays direction-neutral, this mapping is foundation-specific:
| Direction | shadcn adaptation |
|---|---|
| terminal | --radius: 0px, dark palette + neon accent, mono font everywhere |
| cockpit | --radius: 4px, functional colors (OK/warn/alert), dense layout |
| vitality | --radius: 14px, vivid palette, spring animations |
| editorial | --radius: 2px, black/white + one accent, serif for titles |
| glass | --radius: 14px, backdrop-blur on cards and dialogs |
| signal | --radius: 4px, gray only, compact sizes |
Foundation rules preserved
- shadcn components are copy-pasted into your codebase, not installed as a dependency — treat them as first-class application code subject to TDD, security review, and
/qa:wcag-auditfor accessibility regressions when customised. - NEVER override component styles via
!important— modify the CSS variables instead. - NEVER copy shadcn components into
node_modules/or a libs-internal folder.
Automatic triggering
This skill is automatically activated when:
- The matching keywords are detected in the conversation
- The task context matches the skill's domain
Triggering examples
- "I want to dev..."
- "I want to shadcn..."
Context inline
Inline means the skill runs in the conversation (the default, no context key):
- Sees the full history
- Its work is visible as it happens
- Right for almost every skill