skills.rest
abhinaaaavvv
abhinaaaavvvCOMMUNITY
Explore all skills by this author →
Website𝕏@abhinaaaavvvGitHub

shadcn

Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.

Updated Mar 12, 2026
Search Tags:#frontend#react#design system#cli#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/abhinaaaavvv/dotfiles --skill shadcn-abhinaaaavvv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/abhinaaaavvv/dotfiles/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/abhinaaaavvv/dotfiles --skill shadcn-abhinaaaavvv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent UI with shadcn/ui requires knowing the correct component APIs, composition patterns, Tailwind conventions, and CLI workflows. This Skill provides project-aware context, enforced styling rules, and CLI guidance so generated code matches the project's actual configuration instead of generic guesses. ## Core Features & Use Cases - Component management via CLI: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local modifications. - Enforced code conventions: 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 generation: Reads framework, aliases, Tailwind version, base (radix vs base), and icon library from npx shadcn@latest info so imports and APIs match the project. - Use Case: Ask for a settings form and get code using FieldGroup, ToggleGroup, data-invalid validation, semantic colors, and the project's configured icon library — then install missing components with the correct package runner. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern, for example: create a dashboard with stat cards using shadcn/ui and install any missing components.

Frequently Asked Questions about shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn/ui components to my project?▼

Run npx shadcn@latest add followed by component names, using your project's package runner (npx, pnpm dlx, or bunx). Check installed components first with npx shadcn@latest info, and preview changes with --dry-run or --diff before writing files.

How do I update shadcn components without losing my local changes?▼

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 local modifications exist, and never use --overwrite without explicit approval.

What is the difference between base and radix in shadcn/ui?▼

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, multiple booleans, items props on Select, and scalar Slider values. Check the base field via npx shadcn@latest info.

How do I apply or switch shadcn presets in an existing project?▼

Use npx shadcn@latest apply --preset <code> to overwrite components, fonts, and CSS variables, or init --preset <code> --force --no-reinstall to update only config and CSS. Preset codes are opaque strings from ui.shadcn.com — pass them directly to the CLI without decoding.

Why should I avoid space-y-* and raw colors in shadcn/ui code?▼

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 via CSS variables.

Can I use community registries like Magic UI with shadcn?▼

Yes, add registry-prefixed items like npx shadcn@latest add @magicui/shimmer-button. After installing, verify the added files and fix hardcoded import paths, since third-party registries may use default aliases that don't match your project.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

shadcn

Configure shadcn/ui components and registries across supported frameworks.

Community
Advanced
mamu7211mamu7211

test-ui

Automate browser-based UI testing with Playwright and backend diagnostic tools.

Community
Advanced
thec3ukthec3uk

Frontend Responsive

Enforce responsive design standards across React, Vue, Angular, and HTML/CSS projects.

Official
Basic
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate