Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.
npx skills add https://github.com/Rocktown-Labs/reluxury --skill shadcn-rocktown-labs
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/Rocktown-Labs/reluxury/tree/main/.agents/skills/shadcn Command: npx skills add https://github.com/Rocktown-Labs/reluxury --skill shadcn-rocktown-labs
npx shadcn@latest commands, including dry-run previews and smart merges that preserve local changes. - Enforced composition and styling rules: Built-in rule files cover forms (FieldGroup/Field), composition (Groups, Cards, Dialogs), icons (data-icon), styling (semantic tokens, gap spacing), and base-vs-radix API differences. - Preset and theme workflows: Apply, decode, and switch presets (named or code-based) with overwrite, partial, merge, or skip strategies, plus CSS variable theming guidance. - Use Case: A developer asks to build a settings form. The Skill reads the project's components.json context, fetches docs for the needed components, and generates code using FieldGroup, ToggleGroup, and proper validation attributes instead of raw divs and manual state. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a form, and it will use the shadcn CLI and project context to generate correct code.High-intent search queries and answers about installing and using this skill.
Run npx shadcn@latest add followed by component names, such as npx shadcn@latest add button card dialog. Use the package runner matching your project (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn@latest info to avoid re-adding existing ones.
Use npx shadcn@latest add <component> --dry-run to preview affected files, then --diff <file> to compare upstream changes against your local version. Apply upstream updates per file while preserving local modifications, and never use --overwrite without explicit approval.
The base field in components.json determines the primitive library, which changes component APIs. Radix uses asChild and type="single"/"multiple" props, while base uses render props, multiple booleans, and array defaultValues. Check the base field via npx shadcn@latest info before writing component code.
Use npx shadcn@latest apply <code> to overwrite an existing project with a preset, or npx shadcn@latest init --preset <code> --force --no-reinstall to update only config and CSS. Partial updates are supported with --only theme,font. Never decode preset codes manually.
shadcn/ui conventions require gap-* utilities instead of space-x-*/space-y-* for spacing, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. Semantic tokens handle dark mode automatically through CSS variables.
Yes, the CLI supports registry-prefixed names like npx shadcn@latest add @magicui/shimmer-button. After adding third-party components, verify imports match your project's aliases and icon library, since registry items may use default paths that differ from your configuration.
openaiGuides shadcn/ui CLI usage, component installation, theming, and custom registry creation.
aryan083Build, test, and deploy Express.js REST APIs with MongoDB on Vercel.
telum-aiValidate UI components against design tokens and WCAG AA standards.
aashahinIntegrates and customizes shadcn/ui components in React applications using Tailwind CSS.