skills.rest
alecanche04-cyber
alecanche04-cyberCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent React UIs with shadcn/ui requires knowing the correct component APIs, composition rules, Tailwind conventions, and CLI workflows. This Skill encodes those rules and CLI operations so generated code follows project configuration instead of guesswork. ## Core Features & Use Cases - Component lifecycle management: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local edits. - Enforced composition and styling rules: FieldGroup-based forms, semantic color tokens, gap-* spacing, data-icon attributes, and accessibility requirements like DialogTitle and AvatarFallback. - Project-aware context: Reads framework, aliases, Tailwind version, base (radix vs base), and icon library from npx shadcn@latest info to generate code matching the actual project setup. - Use Case: Ask for a settings page and get a correctly composed Tabs + Card + FieldGroup form using the project's configured icon library and preset, with components installed via the CLI. ## Quick Start Ask the assistant to add a shadcn/ui dialog component to your project and build a profile edit form with it.

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). Preview changes first with --dry-run or --diff before writing files.

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

Use the smart merge workflow: run 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 manually where you have 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. Check the base field from npx shadcn@latest info before writing component code.

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

Yes, the CLI supports templates for Next.js, Vite, TanStack Start, React Router, Astro, and Laravel. All except Laravel support monorepo scaffolding via the --monorepo flag. The CLI auto-detects your framework from the project configuration.

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

shadcn/ui conventions 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 automatically handle dark mode through CSS variables, while raw values break theming.

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

Run npx shadcn@latest init --preset <code> --force with one of three strategies: --reinstall to overwrite all components, --no-reinstall followed by per-component smart merges, or --no-reinstall alone to update only config and CSS. Always ask which approach fits before running the command.

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
trungenglishtrungenglish
1

expo-ui

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

Community
Intermediate
luanrodriguesluanrodrigues
2

bee:dev-frontend-visual-react-native

Generate Jest snapshot tests for React Native components across iOS and Android.

Community
Advanced
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate