Summary
This is the skill you want if you're building with shadcn/ui and want Claude to follow the actual patterns instead of inventing broken variants. It enforces the real composition rules: FieldGroup for forms, data-icon for button icons, gap over space-y, size-* when dimensions match. It knows to check installed components first, use ToggleGroup instead of manual button states, and never override semantic colors with raw Tailwind values. The skill pulls live project context and component docs via the CLI, so Claude sees what's actually installed. Honestly just saves you from explaining "no, use InputGroupInput inside InputGroup" for the third time in a session.
Install to Claude Code
npx -y skills add shadcn-ui/ui --skill shadcn --agent claude-codeInstalls into .claude/skills of the current project.
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Files
SKILL.md
Select a file.
Featured
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
