skills.rest
rachmadideni
rachmadideniCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manages shadcn/ui components, presets, and registries through the shadcn CLI.

Updated Jun 27, 2026
Search Tags:#react#design system#cli#registry#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/rachmadideni/ai-staff-assistant --skill shadcn-rachmadideni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/rachmadideni/ai-staff-assistant/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/rachmadideni/ai-staff-assistant --skill shadcn-rachmadideni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with shadcn/ui requires knowing the correct CLI commands, component composition rules, styling conventions, and preset workflows. This Skill provides project-aware context and enforced rules so components are added, updated, and composed correctly without guessing APIs or violating design system conventions. ## 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. - Enforced Code Rules: Applies critical rules for forms (FieldGroup/Field), styling (semantic colors, gap-* spacing), icons (data-icon), and composition (Groups, Titles, Card structure) with Incorrect/Correct examples. - Preset & 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: When asked to build a settings form in a Next.js project, the Skill reads the project context (base vs radix, icon library, Tailwind version), fetches component docs via the CLI, and generates code using FieldGroup, ToggleGroup, and proper validation attributes. ## Quick Start Ask the assistant to add a shadcn/ui component or build a UI pattern, for example: create a login form using shadcn/ui components in my 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, registry-prefixed names like @magicui/shimmer-button, or GitHub addresses like owner/repo/item. Use --dry-run to preview changes and --diff to compare against existing files before writing.

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

Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to inspect upstream changes per file. Apply upstream updates 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", while base uses render props, multiple booleans, array defaultValues, and items props on Select.

How do I apply or switch a shadcn preset code?▼

Use npx shadcn@latest apply <code> for existing projects or init --preset <code> for new ones. For switching, choose overwrite, partial (--only theme,font), merge, or skip strategies, and never decode preset codes manually.

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

The styling rules require flex with gap-* instead of space-x-*/space-y-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. This keeps components themeable through CSS variables and consistent in dark mode.

Can I use community registries with the shadcn CLI?▼

Yes, the CLI supports namespaced registries configured in components.json, public GitHub sources as owner/repo, and registry URLs. After adding third-party components, verify imports match the project's aliases and icon library.

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
ralvarezdevralvarezdev
3

ui-ux-architect

Standardize accessible React/Next.js UI design with WCAG 2.2 AA compliance.

Community
Advanced
JNZader-VaultJNZader-Vault

mantine-ui

Build React interfaces with Mantine components, forms, charts, and notifications.

Official
Intermediate