What problem does it solve? Working with shadcn/ui requires knowing the correct CLI commands, registry conventions, composition rules, and project-specific configuration (aliases, icon library, base vs radix primitives). This Skill eliminates guesswork by injecting live project context and enforcing correct component usage patterns, preventing common mistakes like hardcoded imports, missing accessibility titles, or wrong icon packages. ## Core Features & Use Cases - CLI-driven component management: Add, search, view, diff, and update components from official and community registries using npx shadcn@latest, with dry-run and smart-merge workflows that preserve local customizations. - Composition and styling rules: Enforces correct patterns for forms (FieldGroup/Field), overlays (Dialog with DialogTitle), icons (data-icon attribute), and Tailwind styling (semantic tokens, gap-* spacing, cn() utility). - Preset and theme management: Initialize projects with named presets or preset codes, switch presets safely (reinstall, merge, or skip), and customize themes via CSS variables for Tailwind v3 and v4. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads the project context, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes matching the project's radix or base primitive library. ## Quick Start Ask the agent to add a shadcn/ui component such as a dialog or build a settings form using shadcn/ui in the current project.
