Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.
npx skills add https://github.com/designbycode/uidesign --skill shadcn-designbycode
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/designbycode/uidesign/tree/main/.openhands/skills/shadcn Command: npx skills add https://github.com/designbycode/uidesign --skill shadcn-designbycode
--dry-run/--diff, add components, and smart-merge upstream updates while preserving local changes. - Enforced UI rules: Critical rules for forms (FieldGroup/Field), styling (semantic tokens, gap-, size-), icons (data-icon), and composition (Groups, Titles, AvatarFallback) with Incorrect/Correct examples. - Project-aware guidance: Reads npx shadcn@latest info output to adapt imports, icon libraries, RSC directives, and Tailwind v3/v4 theming to the project. - Use Case: Ask to build a settings form, and the Skill produces code using FieldGroup, ToggleGroup, data-invalid validation, and the project's configured icon library instead of generic markup. ## Quick Start Ask the assistant to add a shadcn/ui component like a dialog or build a settings form in your project, and it will use the shadcn CLI with the correct project context.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 preview changes first with --dry-run or --diff before writing files.
Use the smart merge workflow: run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> per file to compare upstream changes. Apply upstream updates manually where you have local modifications, 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" props, while base uses render props, multiple booleans, items props on Select, and scalar Slider values. Check the base field via npx shadcn@latest info.
Yes, shadcn/ui supports both Tailwind v3 and v4. Check the tailwindVersion field from npx shadcn@latest info: v4 registers custom colors via @theme inline blocks in the global CSS file, while v3 uses tailwind.config.js.
The skill's styling rules require gap-* with flex layouts instead of space-x-*/space-y-*, 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.
Run npx shadcn@latest init --preset <code> --force, choosing reinstall (overwrite all components), merge (smart-merge each installed component), or skip (update only config and CSS). Preset codes are opaque base62 strings passed directly to the CLI without manual decoding.
openaiGuides shadcn/ui CLI usage, component installation, theming, and custom registry creation.
derek2035Deploy Web and WeChat Mini Program apps with integrated databases and cloud functions.
telum-aiValidate UI components against design tokens and WCAG AA standards.
DagimAlemayehuuIntegrates and customizes shadcn/ui components in React applications with Tailwind CSS.