Manages shadcn/ui components, presets, and registries via the shadcn CLI.
npx skills add https://github.com/Nadav011/nadavai-claude --skill shadcn-nadav011
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/Nadav011/nadavai-claude/tree/main/plugins/nadavai/skills/shadcn Command: npx skills add https://github.com/Nadav011/nadavai-claude --skill shadcn-nadav011
npx shadcn@latest info output (aliases, base vs radix, Tailwind version, icon library, RSC) so code matches the project's real setup. - Preset workflows: Init new projects with named presets or codes, apply presets to existing projects, and switch presets via overwrite, partial, merge, or skip strategies. - Rule enforcement: Built-in Incorrect/Correct rules for forms (FieldGroup/Field), composition (Groups, Dialog titles, Card structure), icons (data-icon), styling (semantic tokens, gap-*), and chat UI (MessageScroller, Bubble, Attachment, Marker). - Use Case: Ask the AI to build a settings form in a Next.js shadcn project; it checks installed components, fetches component docs, and produces code using FieldGroup, ToggleGroup, and proper validation attributes instead of raw divs. ## Quick Start Ask the AI to add a dialog and card component to your shadcn/ui project and build a profile settings form following the project's preset and icon library.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 to preview changes and --diff to compare against existing files before writing.
Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes. Merge updates per file, 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.
Pass the code directly to npx shadcn@latest apply <code> for existing projects or init --preset <code> for new ones. Never decode preset codes manually; use preset decode, preset url, or preset resolve to inspect them.
The skill's styling rules require flex with gap-* instead of space-y-*/space-x-*, 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 dark mode.
Yes, namespaced registries are configured in components.json and public GitHub repos with a root registry.json work as owner/repo sources. After adding third-party items, verify imports match the project's aliases and icon library.
arthtyagiConfigure shadcn/ui components and registries across supported frameworks.
krutikJainAutomate Compose UI tests and Espresso checks for Android applications.
discourseWrite and repair HTML, CSS, and SCSS for Discourse core, plugins, themes, and theme components.
DagimAlemayehuuIntegrates and customizes shadcn/ui components in React applications with Tailwind CSS.