Summary
If you're starting a Next.js project with shadcn/ui or migrating an existing frontend from React, Vue, Angular, or vanilla JS, this walks you through the entire process with systematic phase-by-phase workflows. It enforces shadcn design principles hard: CSS variables for theming, no hardcoded colors or spacing, standard components only. The migration workflow is thorough, scanning your codebase for hardcoded values, mapping components to shadcn equivalents, then converting in batches of 5-10 components at a time. It includes MCP integration for shadcn documentation and automated analysis scripts. The structure is almost overly detailed, but that's the point if you want guardrails for doing this properly instead of hacking it together.
Install to Claude Code
npx -y skills add ovachiever/droid-tings --skill nextjs-shadcn-builder --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
