菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Multi-agent team orchestration with native Agent Teams. Trigger when the user wants to launch a team of agents, coordinate parallel work with inter-agent communication, or use swarm mode.
Perform a thorough code review. Use when the user requests a review, wants to verify code quality, or before merging a PR.
Context transfer between AI sessions. Trigger when the user wants to save the context, resume a task, or hand off the work to another session.
API mock configuration for tests. Trigger when the user wants to mock APIs, use MSW, or test without a backend.
Debug and resolve problems. Use when the user has a bug, an error, an unexpected behavior, or wants to understand why something is not working.
TDD development with Red-Green-Refactor cycle. Use to implement a feature by writing tests BEFORE the code. Trigger automatically when the user asks for TDD, wants to write tests first, mentions "test first", or asks to implement, add, create, fix, correct code, a new feature, a bugfix, or a functionality.
| name | dev-shadcn |
| description | 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. |
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep"] |
| context | fork |
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.
# 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.
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 |
/qa:wcag-audit for accessibility regressions when customised.!important — modify the CSS variables instead.node_modules/ or a libs-internal folder.