skills.rest
Hamzaoui-Louai
Hamzaoui-LouaiCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manages shadcn/ui components, registries, and styling rules for building React design systems.

1|Updated Aug 4, 2026
Search Tags:#react#design system#cli#registry#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill shadcn-hamzaoui-louai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend/tree/main/.opencode/skills/shadcn
Command: npx skills add https://github.com/Hamzaoui-Louai/LEAN-gym-dashboard-frontend --skill shadcn-hamzaoui-louai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent UIs with shadcn/ui requires knowing the correct component composition, CLI commands, registry workflows, and styling conventions. This Skill provides the operational knowledge to add, update, debug, and compose shadcn/ui components correctly without guessing APIs or violating design system rules. ## Core Features & Use Cases - Component Management: Search registries, add components, preview changes with dry-run and diff, and smart-merge upstream updates while preserving local modifications. - Composition & Styling Rules: Enforces correct patterns for forms (FieldGroup/Field), icons (data-icon), spacing (gap-*), semantic colors, and base-vs-radix API differences. - Project Context Awareness: Reads framework, aliases, Tailwind version, icon library, and RSC status from the CLI to generate code matching the project configuration. - Use Case: When asked to build a settings form, the Skill produces code using FieldGroup, ToggleGroup, data-invalid validation states, and the project's configured icon library instead of raw divs and hardcoded imports. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a settings form using the shadcn skill in your project.

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 version. 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, and array defaultValues for components like Select, ToggleGroup, Slider, and Accordion.

Does shadcn/ui work with Vite and frameworks other than Next.js?▼

Yes, the CLI supports next, vite, start (TanStack Start), react-router, astro, and laravel templates. All except laravel support monorepo scaffolding via the --monorepo flag, and the CLI auto-detects your framework and package manager.

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

The 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.

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

Choose reinstall, merge, or skip. Reinstall overwrites all components with init --preset <code> --force --reinstall, merge updates config then smart-merges each component individually, and skip only updates config and CSS variables while leaving components unchanged.

Related Skills

Explore More Software Engineering Skills→
Tonybleything76Tonybleything76

senior-frontend

Scaffold React and Next.js projects with TypeScript, Tailwind CSS, and authentication.

Community
Advanced
trungenglishtrungenglish
1

expo-ui

Build native iOS and Android UI in React using @expo/ui SwiftUI and Jetpack Compose components.

Community
Intermediate
ojallingtonojallington

accessibility-auditor

Run Playwright-based accessibility, visual regression, and performance audits on a dashboard.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate