Manages shadcn/ui components, presets, and registries through the official CLI.
npx skills add https://github.com/rmethodm/resumegen --skill shadcn-rmethodm
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/shadcn Command: npx skills add https://github.com/rmethodm/resumegen --skill shadcn-rmethodm
npx shadcn@latest info output (aliases, base, icon library, Tailwind version, RSC) so imports, directives, and styling match the real project setup. - CLI-driven registry operations: Search, view, add, diff, and smart-merge components from official, namespaced, and GitHub registries without manually fetching files. - Preset management: Initialize projects, apply preset codes, and switch presets with overwrite, partial, merge, or skip strategies. - Enforced composition rules: Incorrect/Correct rule files for forms, styling, icons, composition, base-vs-radix APIs, and chat UI primitives. - Use Case: Ask the assistant to build a settings form in a Next.js project; it checks installed components, fetches docs, and produces FieldGroup/ToggleGroup markup with semantic tokens and correct validation attributes. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern in your project, and it will inspect the project context and use the shadcn CLI to install and compose the right components.High-intent search queries and answers about installing and using this skill.
Run npx shadcn@latest add followed by component names, registry-prefixed names like @magicui/shimmer-button, or GitHub addresses like owner/repo/item. Use --dry-run or --diff first to preview changes before writing files.
Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> per file to compare upstream against local. Overwrite files with no local changes and manually merge files you have customized.
The base field in components.json selects the primitive library, which changes component APIs. Radix uses asChild and type="single"/"multiple", while base uses render, a multiple boolean, array defaultValues, and an items prop on Select.
Pass the code directly to npx shadcn@latest apply <code> for existing projects or init --preset <code> for new ones. Never decode codes manually; use preset decode, preset url, or preset resolve to inspect them.
Yes, the CLI supports templates for Vite, TanStack Start, React Router, Astro, and Laravel, all with monorepo scaffolding except Laravel. Run npx shadcn@latest info to see the detected framework and configuration.
Community registry items may hardcode default paths like @/components/ui that do not match your aliases. Run npx shadcn@latest info to get the correct ui alias and rewrite the imports in the added files.
zaid-khan-codeConfigure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.
marcd35Scaffold a complete feature with types, repository, API routes, UI components, store actions, and tests.
telum-aiValidate UI components against design tokens and WCAG AA standards.
google-labs-codeIntegrates and customizes shadcn/ui components in React applications using Tailwind CSS.