skills.rest
rub803030
rub803030COMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working with shadcn/ui requires knowing the correct CLI commands, component composition rules, and project-specific configuration (aliases, Tailwind version, icon library, base vs radix primitives). This Skill eliminates guesswork by injecting live project context and enforcing correct usage patterns when adding, updating, debugging, or composing components. ## Core Features & Use Cases - CLI-driven component management: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local modifications. - Enforced composition and styling rules: Critical rules for forms (FieldGroup/Field), styling (semantic tokens, gap-* spacing), icons (data-icon), and component structure (Groups, Titles, AvatarFallback) with Incorrect/Correct code pairs. - Preset and theme workflows: Initialize projects with named presets or preset codes, switch presets via reinstall/merge/skip strategies, and customize themes through CSS variables. - Use Case: A developer asks to build a settings form in a Next.js project. The Skill reads the project context, fetches component docs via the CLI, and generates code using FieldGroup, ToggleGroup, and proper validation attributes matching the project's base (radix vs base) and icon library. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a settings form using shadcn/ui 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, such as npx shadcn@latest add button card dialog. Use the package runner matching your project (npx, pnpm dlx, or bunx), and check installed components first with npx shadcn@latest info.

How to update shadcn 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, array defaultValues, and features like Select items props and object values.

Does shadcn/ui support monorepo project scaffolding?▼

Yes, pass the --monorepo flag to npx shadcn@latest init with templates like next, vite, start, react-router, or astro. The CLI uses monorepo-specific template directories; only the laravel template does not support monorepos.

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. This keeps components themeable through CSS variables and consistent across light and dark modes.

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

Run npx shadcn@latest init --preset <code> --force, then choose reinstall (overwrite all components), merge (smart-merge each component via --diff), or skip (update only config and CSS). The CLI preserves your current base from components.json automatically.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

shadcn

Configure shadcn/ui components and registries across supported frameworks.

Community
Advanced
Benmore-StudioBenmore-Studio
1

pcs-new-service

Generate a complete PCS microservice scaffold with FastAPI, Kafka, and Docker.

Official
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
merileymeriley

mantine-reviewing

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

Community
Intermediate