Manages shadcn/ui components, presets, and registries via the shadcn CLI.
npx skills add https://github.com/singhaganesh/Urban-assist --skill shadcn-singhaganesh
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/singhaganesh/Urban-assist/tree/main/.cursor/skills/shadcn Command: npx skills add https://github.com/singhaganesh/Urban-assist --skill shadcn-singhaganesh
npx shadcn@latest info to generate code that matches the project setup. - Enforced UI Rules: Applies critical rules for forms (FieldGroup/Field), composition (Groups, Dialog titles, Card structure), icons (data-icon), styling (semantic tokens, gap-* spacing), and chat primitives (MessageScroller, Bubble, Attachment, Marker). - Preset Workflows: Initialize projects with named presets or codes, apply presets to existing projects, and switch presets via overwrite, partial, merge, or skip strategies. - 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 generates code using FieldGroup, ToggleGroup, and data-invalid validation instead of raw divs and manual state. ## Quick Start Ask the assistant to add a shadcn/ui component such as "add the dialog and card components to my project" and it will run the appropriate shadcn CLI commands and compose them correctly.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 (pnpm dlx or bunx for pnpm/bun projects), and preview changes first with --dry-run or --diff.
Run 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 per file while preserving local modifications, and never use --overwrite without explicit approval.
The base field in components.json determines the primitive library and component APIs. Radix uses asChild for composition while base uses render, and components like Select, ToggleGroup, Slider, and Accordion have different props between the two.
Use npx shadcn@latest apply <code> to overwrite an existing project's preset, or npx shadcn@latest init --preset <code> when initializing. Never decode preset codes manually; use preset decode, preset url, or preset resolve commands to inspect them.
shadcn/ui conventions require flex with gap-* for spacing and semantic tokens like bg-primary or text-muted-foreground for colors. Raw values like bg-blue-500 and manual dark: overrides break theming because components derive styles from CSS variables.
Yes, add them with namespaced addresses like npx shadcn@latest add @magicui/shimmer-button or GitHub addresses like owner/repo/item. After adding, verify the files and fix hardcoded import paths to match your project's aliases from npx shadcn@latest info.
TierOne-StudioConfigure Tailwind CSS v4 with shadcn/ui, Vite, and React including dark mode theming.
hamzaPixlScaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.
murphytruemanAudit design system theme coverage, consistency, and component tier propagation.
mgd34msuProvides reusable, themeable, accessible React UI components for Chakra UI v3 projects.