| name | shadcn-ui |
| description | Project-aware shadcn/ui workflow for searching, adding, composing, and fixing
components with correct patterns. Understands the local component registry
and avoids common shadcn anti-patterns during implementation.
|
| triggers | ["shadcn","shadcn/ui","shadcn component","ui component"] |
| das | {"category":"visual-components","upstream":"https://github.com/shadcn-ui/ui","upstream_path":"SKILL.md","version":"latest","install":true} |
shadcn-ui
Catalogue stub — full skill: shadcn-ui/ui
Decision tree
Run this before any shadcn/ui component work:
-
Is the full skill already installed?
Check: ~/.design-agent-skills/skills/shadcn-ui/SKILL.md exists AND does NOT contain a das: block.
- Yes → invoke
shadcn-ui and proceed
- No → go to step 2
-
Do you have shell access?
- Yes → run the install command below, then invoke the skill
- No → show the install command; in Claude Code, send it as a chat message starting with
! — add -g for global install or omit for project-only
Install command
npx skills add shadcn-ui/skills
Or per-agent:
- Claude Code:
claude skills add shadcn-ui/skills
- Cursor/OpenCode:
npx skills add shadcn-ui/skills
Invoke after install
- Skill name:
shadcn-ui
- Trigger phrases: "shadcn", "shadcn/ui", "shadcn component", "ui component"
What it does
Provides a project-aware workflow for working with shadcn/ui — searching the available component registry, adding components with the correct CLI command, composing components correctly, and fixing common implementation mistakes. Ensures component usage follows shadcn/ui patterns and integrates cleanly with the existing project setup.
