skills.rest
arthurbarbosaa
arthurbarbosaaCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

Updated May 12, 2026
Search Tags:#frontend#react#cli#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/arthurbarbosaa/my-portfolio --skill shadcn-arthurbarbosaa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/arthurbarbosaa/my-portfolio/tree/main/.github/skills/shadcn
Command: npx skills add https://github.com/arthurbarbosaa/my-portfolio --skill shadcn-arthurbarbosaa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent React UI 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 base-vs-radix API differences with Incorrect/Correct examples. - Preset and theme workflows: Initialize projects with named presets or preset codes, apply or merge presets, and customize themes via CSS variables in Tailwind v3 or v4. - Use Case: When asked to build a settings form in a Next.js project, the Skill reads project context via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and proper validation attributes. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a settings form using the project's existing shadcn configuration.

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 components without losing my customizations?▼

Use the smart merge workflow: run npx shadcn@latest add <component> --dry-run to list affected files, then --diff <file> to compare upstream changes. Apply upstream updates manually where local modifications exist, 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, multiple booleans, items props on Select, and scalar Slider values.

How do I apply or switch shadcn presets?▼

Use npx shadcn@latest apply <code> to overwrite an existing project's preset, or init --preset <code> --force --no-reinstall to update only config and CSS. Inspect codes with preset decode, and choose overwrite, partial, merge, or skip based on whether components are customized.

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. This keeps components consistent with the theme's CSS variables across light and dark modes.

Does shadcn/ui support monorepo and non-Next.js frameworks?▼

Yes. The CLI supports next, vite, start, react-router, and astro templates, all with --monorepo scaffolding; laravel is supported without monorepo. The framework and paths are detected automatically via npx shadcn@latest info.

Related Skills

Explore More Software Engineering Skills→
designbycodedesignbycode

shadcn

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

Official
Advanced
offers-pngoffers-png

fullstack-js

Define architecture, data modeling, and end-to-end conventions for full-stack JavaScript applications.

Community
Advanced
blueprintuiblueprintui
335

testing-visual

Automate visual regression testing for UI components across themes and states.

Official
Intermediate
mgd34msumgd34msu
4

chakra-ui

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

Community
Intermediate