What problem does it solve? Building consistent, accessible UIs in Next.js often means choosing between rigid component libraries and writing everything from scratch. This Skill provides production-grade patterns for shadcn/ui, where components are copied into your codebase so you own and customize them directly. ## Core Features & Use Cases - Component Architecture: Canonical file structure separating auto-generated ui/ components from your composed business components, with the cn() utility for class merging. - Theming & Dark Mode: CSS variable-based theming with next-themes integration and custom brand color extension via Tailwind config. - Forms & Data Tables: Standard patterns for React Hook Form + Zod validation and TanStack Table-based data tables with sorting, filtering, and pagination. - Use Case: You are building a Next.js dashboard and need an accessible data table with a confirmation dialog and validated forms. This Skill guides you to install the right components via CLI, compose them correctly, and keep dark mode and keyboard navigation working. ## Quick Start Ask the AI to scaffold a shadcn/ui form with React Hook Form and Zod validation for your Next.js project.
