Agent skill
shadcn
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.
Install this agent skill to your Project
npx add-skill https://github.com/iamhenry/ai-project-starter-kit/tree/main/.opencode/skills/shadcn
SKILL.md
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 incomponents.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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
iamhenry/ai-project-starter-kit
verification-gate
Reusable verification gate for completed work before commit or merge. Use when implementation is done and Claude must prove the task works, verify the main user flow, choose between browser-flow, browser-static, or non-browser validation, and return a PASS/FAIL/BLOCKED verdict with evidence. When browser verification is needed, rely on the agent-browser skill for browser actions, screenshots, and recordings.
iamhenry/ai-project-starter-kit
osgrep
Semantic code search using natural language queries. Use when users ask "where is X implemented", "how does Y work", "find the logic for Z", or need to locate code by concept rather than exact text. Returns file paths with line numbers and code snippets.
iamhenry/ai-project-starter-kit
napkin
Maintain a per-repo napkin file that tracks mistakes, corrections, and what works. Activates EVERY session, unconditionally. Read the napkin before doing anything. Write to it continuously as you work — not just at session boundaries. Log your own mistakes, not just user corrections. The napkin lives in the repo at `.opencode/napkin.md`.
iamhenry/ai-project-starter-kit
dogfood
Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.
iamhenry/ai-project-starter-kit
tmux
Manage concurrent background processes using tmux. Use when spawning dev servers, running long-running tasks, monitoring multiple processes, or capturing output from background commands without blocking the main session.
iamhenry/ai-project-starter-kit
viral-research
Viral content research and DNA extraction for Instagram Reels. Use this skill whenever you need to research what's performing in a niche on Instagram, find viral faceless Reels, download and analyze them frame-by-frame, identify patterns, and produce a structured research brief. Trigger whenever the user mentions viral content research, Instagram research, Reel analysis, content DNA, swipe file building, niche research, competitor analysis for social content, or wants to understand why certain content performs. Also trigger when the user wants to find content formats to adapt, study what's working in a niche, or build a research-backed content strategy. This skill is research-only — it does not generate or publish content.
Didn't find tool you were looking for?