Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.
npx skills add https://github.com/sonth87/Redprint --skill shadcn-sonth87
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/sonth87/Redprint/tree/main/.agents/skills/shadcn Command: npx skills add https://github.com/sonth87/Redprint --skill shadcn-sonth87
npx shadcn@latest info to generate code matching the project setup. - Enforced composition and styling rules: Critical rules for forms (FieldGroup/Field), icons (data-icon), semantic colors, gap spacing, and accessibility (DialogTitle, AvatarFallback). - Use Case: A developer asks to build a settings form in a Next.js project. The Skill checks installed components, fetches docs via the CLI, and generates code using FieldGroup, ToggleGroup, and data-invalid validation that matches the project's preset and icon library. ## 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 to search, install, and compose the correct components for your project.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 (npx, pnpm dlx, or bunx), and check installed components first with npx shadcn@latest info.
Use npx shadcn@latest add <component> --dry-run to preview 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 and type="single"/"multiple" props, while base uses render props, multiple booleans, and array defaultValues. Check the base field via npx shadcn@latest info.
Run npx shadcn@latest init --preset <code> --force with a named preset, preset code, or URL. Choose reinstall to overwrite all components, merge to smart-merge each installed component, or skip to update only config and CSS variables.
shadcn/ui conventions require gap-* utilities instead of space-x-*/space-y-* for spacing, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. Semantic tokens handle dark mode automatically through CSS variables.
Yes, registries are configured in components.json with names starting with @ and URLs containing {name}. After adding third-party components, verify imports match your project's aliases and swap icon imports to your configured iconLibrary.
openaiGuides shadcn/ui CLI usage, component installation, theming, and custom registry creation.
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.
google-labs-codeIntegrates and customizes shadcn/ui components in React applications using Tailwind CSS.