skills.rest
Odonno
OdonnoCOMMUNITY
Explore all skills by this author →
Website𝕏@dbottiauGitHub

shadcn

Manages shadcn/ui components through CLI commands for adding, searching, updating, and composing UI.

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

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, and project configuration details like aliases, Tailwind version, and icon libraries. This Skill eliminates guesswork by injecting live project context and enforcing correct usage patterns, preventing common mistakes like wrong imports, invalid composition, or raw color overrides. ## Core Features & Use Cases - Component Management: Add, search, view, and update components from official and community registries using the shadcn CLI with dry-run and diff previews. - Composition & Styling Rules: Enforces correct patterns for forms (FieldGroup/Field), overlays, icons (data-icon), semantic colors, and Tailwind spacing across radix and base primitive libraries. - Preset & Theme Workflows: Initialize projects with named presets or preset codes, switch themes via reinstall/merge/skip strategies, and customize CSS variables. - Use Case: When asked to build a settings form, the Skill checks installed components, fetches docs via npx shadcn@latest docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes matching the project's configuration. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a form, and it will use the shadcn CLI with your project's configuration to generate correct code.

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 use --dry-run or --diff to preview changes before writing files.

How do I update shadcn components without losing my customizations?▼

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

What is the difference between radix and base 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.

How do I switch shadcn presets or themes?▼

Run npx shadcn@latest init --preset <code> --force with a named preset, base62 code, or URL. Choose reinstall to overwrite all components, merge to smart-merge each component individually, or skip to update only config and CSS variables.

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

shadcn/ui conventions require gap-* utilities instead of space-x-*/space-y-* for spacing, 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.

Related Skills

Explore More Software Engineering Skills→
dsgalkardsgalkar

shadcn

Guides shadcn/ui CLI usage, component installation, theming, and custom registry workflows.

Community
Intermediate
DazlarusDazlarus

frontend-development

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

Community
Intermediate
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced
merileymeriley

mantine-reviewing

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

Community
Intermediate