What problem does it solve? Building consistent UIs with shadcn/ui requires knowing the correct component composition, CLI commands, registry workflows, and styling conventions. This Skill provides the operational knowledge to add, update, debug, and style shadcn/ui components correctly without guessing APIs or violating design system rules. ## Core Features & Use Cases - Component Management: Search registries, add components, preview changes with dry-run and diff, and smart-merge upstream updates while preserving local modifications. - Enforced Styling Rules: Apply semantic color tokens, gap-based spacing, data-icon attributes, and correct form patterns (FieldGroup, Field, InputGroup) with Incorrect/Correct code pairs. - Project Context Awareness: Reads framework, Tailwind version, icon library, aliases, and base (radix vs base) from the CLI to generate code matching the project configuration. - Use Case: When asked to build a settings form in a Next.js app, the Skill checks installed components, fetches docs via the CLI, and produces code using FieldGroup, ToggleGroup, and proper validation states. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a form following shadcn/ui best practices in your project.
