What problem does it solve? Setting up shadcn/ui involves many moving parts—Tailwind configuration, CSS variables, path aliases, Radix dependencies, and provider wiring—and small mistakes cause broken forms, missing dark mode, or hydration errors. This Skill provides a structured workflow for installing, theming, and troubleshooting shadcn/ui components correctly. ## Core Features & Use Cases - Guided Setup: Step-by-step initialization for new and existing Next.js projects, including verification of components.json, globals.css variables, tailwind.config.js, and tsconfig path aliases. - Component Patterns: Complete working examples for forms with React Hook Form and Zod validation, confirmation dialogs, toast notifications, and provider setup in the root layout. - Theming & Customization: Instructions for editing CSS variables, extending cva variants, and overriding styles via the cn() class-merge utility. - Pitfall Reference: Covers common failures such as missing "use client" directives, Select binding with onValueChange, and dark mode class toggling. - Use Case: When building a login page, use this Skill to install the form, input, button, and card components, wire up Zod validation, and avoid the typical FormField registration mistakes. ## Quick Start Use the shadcn-ui skill to set up shadcn/ui in my Next.js project and build a validated login form.
