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:

1. Creating New Next.js Applications - Initialize projects with Next.js 15+ (App Router), shadcn/ui, and proper design system setup
2. 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:

• CSS variables for all theming (colors, spacing, typography)
• Standard shadcn/ui components only (no custom UI components)
• No hardcoded values (colors, spacing, fonts)
• Consistent design tokens across the application
• Mobile-first responsive design for all devices (phone, tablet, desktop)
• WCAG 2.1 Level AA accessibility compliance
• Best practices from https://ui.shadcn.com