skills.rest
Okeysir198
Okeysir198COMMUNITY
Explore all skills by this author →
GitHub

nextjs-shadcn-builder

Analyze codebases and generate migration plans for Next.js and shadcn/ui adoption.

2|4|Updated Nov 21, 2025
Search Tags:#frontend#MCP#Next.js#migration#design-system#shadcn-ui
One-click install
npx skills add https://github.com/Okeysir198/P20251122-claude-skills --skill nextjs-shadcn-builder-okeysir198
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-shadcn-builder
Source: https://github.com/Okeysir198/P20251122-claude-skills/tree/main/nextjs-shadcn-builder
Command: npx skills add https://github.com/Okeysir198/P20251122-claude-skills --skill nextjs-shadcn-builder-okeysir198

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires class-variance-authority, clsx, tailwind-merge, lucide-react, next-themes, tailwindcss-animate, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of production-grade Next.js apps and the systematic migration of existing frontends to Next.js + shadcn/ui, enforcing CSS variables for theming and MCP-driven component adoption.

Core Features & Use Cases

  • Automated project bootstrapping: Next.js 15+ App Router, TypeScript, Tailwind CSS, and shadcn/ui integration with design tokens.
  • Migration planning: automated codebase analysis to map components to shadcn equivalents and plan 5-10 component batches.
  • MCP-driven design system: discover and compose with shadcn/ui components, generate a design system documentation scaffold.
  • Phase-based workflow: 5 phases (Analysis → Planning → Setup → Systematic Conversion → Verification & Cleanup) ensures controlled migrations.
  • Cross-framework support: migrate React, Vue, Angular, or vanilla JS frontends to Next.js + shadcn/ui.

Quick Start

  • Start a new project: run the provided init-nextjs-shadcn.sh script to bootstrap a Next.js app with shadcn/ui.
  • Analyze an existing codebase: run analyze-codebase.py to produce codebase-analysis.json and hardcoded-values report.
  • Plan and execute migration: run generate-migration-report.py to create a migration-plan.md and follow the Batch Organization Plan.

Frequently Asked Questions about nextjs-shadcn-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate an existing React or Vue frontend to Next.js with shadcn/ui?▼

To migrate a React or Vue frontend to Next.js with shadcn/ui, the Skill analyzes your codebase, maps components to shadcn equivalents, and generates a batch-based conversion plan enforcing CSS variables for theming.

What is the process for bootstrapping a new Next.js app with a shadcn/ui design system?▼

Bootstrapping a new Next.js app with shadcn/ui involves running an init script to configure Next.js 15+ App Router, TypeScript, Tailwind CSS, and design tokens for a ready-to-run setup workflow.

Can I use this to migrate an Angular or vanilla JavaScript codebase to Next.js?▼

Yes, you can migrate an Angular or vanilla JavaScript codebase to Next.js. The workflow supports cross-framework migration by producing an end-to-end plan and systematic component conversion.

How does MCP-driven component mapping work when adopting shadcn/ui?▼

MCP-driven component mapping works by using MCP to discover and compose shadcn/ui components during migration, ensuring systematic adoption and generating a design system documentation scaffold.

Do I need to configure CSS variables manually when setting up shadcn/ui?▼

You do not need to configure CSS variables manually when setting up shadcn/ui. The workflow enforces CSS variables for theming and handles design-token configuration automatically during setup.

Related Skills

Explore More Software Engineering Skills→
ovachieverovachiever
52

nextjs-shadcn-builder

Migrate React, Vue, Angular, or vanilla frontends to Next.js with shadcn/ui.

Community
Advanced
MikisbellMikisbell

nextjs-shadcn-builder

Automate Next.js app creation and frontend migration to shadcn/ui with design-system enforcement.

Community
Advanced
JordiNodeJSJordiNodeJS

component-development

Create accessible React 19 UI components with Shadcn UI and Tailwind CSS 4.

Community
Intermediate
DanSnowDanSnow
2

biome-to-oxc

Migrate JavaScript and TypeScript projects from Biome to oxlint and oxfmt.

Community
Intermediate