Nextjs Shadcn Builder

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.

skills.sh installs: 263
GitHub stars: 56
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ovachiever/droid-tings --skill nextjs-shadcn-builder --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js + shadcn/ui Builder & Migration Tool

Build production-grade Next.js applications or systematically migrate existing frontends to Next.js + shadcn/ui following strict design principles and best practices.

Overview

This skill handles two primary workflows:

Creating New Next.js Applications - Initialize projects with Next.js 15+ (App Router), shadcn/ui, and proper design system setup
Migrating Existing Frontends - Analyze any frontend codebase (React, Vue, Angular, vanilla JS) and systematically convert to Next.js + shadcn/ui

Core Philosophy: 100% adherence to shadcn/ui design principles: