Agent-Skills.md

Agent Skills: shadcn/ui CLI

Add and manage shadcn/ui components via CLI. Use when installing new UI components, building forms with validation, creating modals/dialogs/sheets, adding navigation menus, setting up data tables or charts, or updating existing shadcn components.

UncategorizedID: iamhenry/ai-project-starter-kit/shadcn
43

Install this agent skill to your local

pnpm dlx add-skill https://github.com/iamhenry/ai-project-starter-kit/tree/HEAD/.opencode/skills/shadcn

Skill Files

Browse the full folder contents for shadcn.

Download Skill

Loading file tree…

.opencode/skills/shadcn/SKILL.md

Skill Metadata

Name
shadcn
Description
Add and manage shadcn/ui components via CLI. Use when installing new UI components, building forms with validation, creating modals/dialogs/sheets, adding navigation menus, setting up data tables or charts, or updating existing shadcn components.

shadcn/ui CLI

Quickly add pre-built, customizable React components based on Radix UI and Tailwind CSS.

Quick Reference

| Command | Purpose | | -------------------------------------- | -------------------------------- | | npx shadcn@latest add <component> | Add single component | | npx shadcn@latest add btn dialog | Add multiple components at once | | npx shadcn@latest add -a | Add ALL components | | npx shadcn@latest add -o <component> | Overwrite existing component | | npx shadcn@latest view <component> | Preview component before install | | npx shadcn@latest init | Initialize project (first-time) |

Common Component Groups

Forms: button, input, label, select, checkbox, radio-group, switch, textarea, form

Layout: card, separator, tabs, accordion, collapsible, resizable

Feedback: alert, alert-dialog, dialog, drawer, sheet, toast, sonner, tooltip, popover

Navigation: dropdown-menu, menubar, navigation-menu, breadcrumb, pagination, command

Data Display: table, data-table, avatar, badge, calendar, carousel, chart

Usage Patterns

Add a single component

npx shadcn@latest add button

Add multiple related components

npx shadcn@latest add form input label select

Skip confirmation prompts

npx shadcn@latest add -y dialog

Overwrite existing component (after shadcn update)

npx shadcn@latest add -o button

Preview before installing

npx shadcn@latest view chart

Custom install path

npx shadcn@latest add button -p src/components/ui

Key Flags

| Flag | Short | Description | | --------------- | ----- | ------------------------ | | --yes | -y | Skip confirmation prompt | | --overwrite | -o | Overwrite existing files | | --all | -a | Install all components | | --path <path> | -p | Custom destination path | | --silent | -s | Suppress output |

Project Notes

  • Components install to src/ui/ in this project (configured in components.json)
  • Uses @/ path alias for imports
  • Tailwind CSS + CVA (class-variance-authority) for variants
  • All components are fully customizable after installation

Troubleshooting

Component already exists: Use -o flag to overwrite

npx shadcn@latest add -o button

Missing dependencies: The CLI auto-installs peer deps, but if issues occur:

npm install @radix-ui/react-<primitive> class-variance-authority

Path issues: Check components.json for configured paths