Manages shadcn/ui components, presets, and registries through the shadcn CLI.
npx skills add https://github.com/obispobruno/dotfiles --skill shadcn-obispobruno
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/obispobruno/dotfiles/tree/main/dot_agents/skills/shadcn Command: npx skills add https://github.com/obispobruno/dotfiles --skill shadcn-obispobruno
--dry-run/--diff, add components, and smart-merge upstream updates while preserving local modifications. - Enforced UI rules: Critical Incorrect/Correct rules for forms (FieldGroup/Field), composition (Groups, Dialog titles, Card structure), icons (data-icon), styling (semantic tokens, gap-*, cn()), and chat UI (MessageScroller, Bubble, Attachment, Marker). - Preset and registry workflows: Initialize projects with named presets or preset codes, switch presets via overwrite/partial/merge/skip strategies, and author or consume custom and GitHub registries. - Use Case: Ask to build a settings form in a Next.js shadcn project, and the Skill produces code using FieldGroup, ToggleGroup, data-invalid validation, semantic colors, and the project's configured icon library. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern in your project, for example: add a login form block to my shadcn project using the correct registry and project conventions.High-intent search queries and answers about installing and using this skill.
Run npx shadcn@latest add followed by component names, registry namespaces like @magicui/shimmer-button, or GitHub addresses like owner/repo/item. Use --dry-run to preview changes and --diff to compare against existing files before writing.
Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes. Merge updates manually where local modifications exist, 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", while base uses render, a multiple boolean, array defaultValues, and an items prop on Select.
Use npx shadcn@latest apply <code> for existing projects or init --preset <code> when creating one. Never decode preset codes manually; use preset decode, preset url, or preset resolve to inspect them, and choose overwrite, partial, merge, or skip when switching.
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 space-y-* break theming, dark mode, and consistency with component variants.
Yes, the CLI supports namespaced registries configured in components.json and public GitHub repos with a root registry.json via owner/repo/item addresses. After adding third-party items, verify imports match your project's aliases and icon library.
arthtyagiConfigure shadcn/ui components and registries across supported frameworks.
apireaisecurityScaffold Next.js App Router pages that fetch data from a backend API.
froide-kkProvide UI component design guidelines for accessible, responsive interfaces.
mgd34msuProvides reusable, themeable, accessible React UI components for Chakra UI v3 projects.