Manages shadcn/ui components, presets, and registries via the shadcn CLI.
npx skills add https://github.com/adinj00/player-performance --skill shadcn-adinj00
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/adinj00/player-performance/tree/main/.agents/skills/shadcn Command: npx skills add https://github.com/adinj00/player-performance --skill shadcn-adinj00
npx shadcn@latest info to generate code matching the project setup. - Preset Workflows: Initialize projects, apply preset codes, and switch presets with overwrite, partial, merge, or skip strategies. - Enforced UI Rules: Incorrect/Correct code pairs for forms, composition, styling, icons, and chat interfaces (MessageScroller, Bubble, Attachment, Marker). - Use Case: A developer asks to build a settings form in a Next.js shadcn project; the Skill ensures FieldGroup/Field layout, ToggleGroup for options, data-invalid validation, semantic colors, and the correct icon library. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a settings form using the shadcn CLI in your project.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.
Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes per file. Overwrite files with no local changes and manually merge files you have customized, never using --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> for existing projects 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.
The Skill's styling rules require flex with gap-* 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 in dark mode.
Yes, templates include next, vite, start, react-router, and astro, all supporting the --monorepo flag, plus laravel without monorepo support. The CLI auto-detects the framework and package manager from the project.
openaiGuides shadcn/ui CLI usage, component installation, theming, and custom registry creation.
sburlDeploy projects to Railway, Vercel, or GitHub Pages with automatic platform detection.
mgkyawzayyaAudit UI patterns and implement accessible shadcn/ui changes with Tailwind tokens.
google-labs-codeIntegrates and customizes shadcn/ui components in React applications using Tailwind CSS.