shadcn-ui

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:

1. 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

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.