skills.rest
fred-meng
fred-mengCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

Updated Apr 29, 2026
Search Tags:#frontend#react#cli#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/fred-meng/harness --skill shadcn-fred-meng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/fred-meng/harness/tree/main/.github/skills/shadcn
Command: npx skills add https://github.com/fred-meng/harness --skill shadcn-fred-meng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? Building consistent React interfaces with shadcn/ui requires knowing the correct component APIs, composition rules, Tailwind conventions, and CLI workflows. This Skill encodes those rules so generated UI code follows shadcn/ui best practices instead of reinventing markup or misusing components. ## Core Features & Use Cases - Component lifecycle management: Search registries, add components, preview changes with dry-run and diff, and smart-merge upstream updates while preserving local edits. - Enforced UI rules: Applies critical rules for forms (FieldGroup/Field), composition (Groups, Titles, Card structure), icons (data-icon), and styling (semantic tokens, gap-*, cn()). - Preset and theme workflows: Initialize projects with named presets or preset codes, switch presets via overwrite/partial/merge/skip strategies, and customize themes through CSS variables. - Use Case: Ask for a settings form with validation states, and receive code using FieldGroup, Field, ToggleGroup, data-invalid/aria-invalid, and semantic color tokens matching your project's base (radix or base) and icon library. ## Quick Start Ask the assistant to add a shadcn/ui dialog component to your project and build a profile editing form with proper validation states.

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/ui components without losing local changes?▼

Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to compare upstream changes against your local edits. Apply upstream updates per file while preserving local modifications, 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, which changes component APIs. Radix uses asChild and type="single"/"multiple" props, while base uses render props, multiple booleans, items arrays on Select, and scalar Slider values.

How do I switch shadcn/ui presets in an existing project?▼

Use npx shadcn@latest apply <code> to overwrite, apply --only theme,font for partial updates, or init --preset <code> --force --no-reinstall to keep components unchanged. Inspect presets first with preset decode or preset resolve, and always run commands inside the project directory.

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

shadcn/ui conventions require flex with gap-* for spacing and semantic tokens like bg-primary or text-muted-foreground for colors. Raw values like bg-blue-500 and space-y-* break theme consistency and dark mode handling through CSS variables.

Does shadcn/ui support icon libraries other than lucide?▼

Yes, the iconLibrary field in project context determines imports, such as @tabler/icons-react for tabler. Icons inside components use the data-icon attribute and no sizing classes, since components handle icon sizing via CSS.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
DazlarusDazlarus

frontend-development

Implements React and Vue components, state management, routing, and form validation patterns.

Community
Intermediate
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
merileymeriley

mantine-reviewing

Review React components using Mantine UI for accessibility and performance issues.

Community
Intermediate