Manages shadcn/ui components, registries, presets, and styling rules via the shadcn CLI.
npx skills add https://github.com/Ssrrb/cerramos-codebase --skill shadcn-ssrrb
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/Ssrrb/cerramos-codebase/tree/main/.agents/skills/shadcn Command: npx skills add https://github.com/Ssrrb/cerramos-codebase --skill shadcn-ssrrb
--dry-run/--diff, and smart-merge upstream updates while preserving local modifications. - Enforced composition and styling rules: Built-in Incorrect/Correct rule files cover forms (FieldGroup/Field), icons (data-icon), semantic colors, spacing (gap-*), and base-vs-radix API differences. - Preset and theme workflows: Initialize projects with named presets or preset codes, switch presets via reinstall/merge/skip strategies, and customize themes through CSS variables. - Use Case: When asked to build a settings form, the Skill checks installed components, fetches official docs via npx shadcn@latest docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes matching the project's configuration. ## 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 with the correct project context and rules.High-intent search queries and answers about installing and using this skill.
Run npx shadcn@latest add followed by component names, using your project's package runner (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn@latest info, and preview changes with --dry-run or --diff before writing files.
Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to compare upstream changes against your local version. Apply upstream updates manually where you have 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, a multiple boolean, items props on Select, and scalar Slider values.
Yes, the CLI supports monorepo scaffolding via the --monorepo flag for next, vite, start, react-router, and astro templates. Laravel templates do not support monorepos. Use npx shadcn@latest init --name my-app --preset base-nova --monorepo to scaffold.
The skill's styling rules require gap-* with flex layouts instead of space-x-*/space-y-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. This keeps components themeable through CSS variables and consistent across light and dark modes.
Choose reinstall, merge, or skip. Reinstall overwrites all components with init --preset <code> --force --reinstall; merge uses --no-reinstall then smart-merges each component; skip updates only config and CSS. Never decode preset codes manually—pass them directly to the CLI.
arthtyagiConfigure shadcn/ui components and registries across supported frameworks.
hamzaPixlScaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.
samymityAutomate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.
JNZader-VaultBuild React interfaces with Mantine components, forms, charts, and notifications.