skills.rest
serguei9090
serguei9090COMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

Updated Mar 22, 2026
Search Tags:#theming#frontend#react#cli#tailwind#ui components#shadcn
One-click install
npx skills add https://github.com/serguei9090/LogLensAi --skill shadcn-serguei9090
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/serguei9090/LogLensAi/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/serguei9090/LogLensAi --skill shadcn-serguei9090

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, preventing common mistakes like wrong imports, invalid composition, or non-semantic styling. ## Core Features & Use Cases - CLI-driven component management: Add, search, view, diff, and update components from registries using npx shadcn@latest with dry-run and smart-merge workflows that preserve local changes. - Enforced composition and styling rules: Built-in Incorrect/Correct rule files cover forms (FieldGroup/Field), icons (data-icon), styling (semantic tokens, gap-*, cn()), and base-vs-radix API differences. - Preset and theme management: Apply named presets or preset codes, switch themes with overwrite/merge/skip strategies, and customize CSS variables in the project's Tailwind config. - Use Case: When asked 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 icon library and base primitive. ## 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 to install components and generate compliant 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, 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 local changes?▼

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 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 props, multiple booleans, and array defaultValues. Check the base field via npx shadcn@latest info before writing component code.

How do I apply or switch shadcn presets and themes?▼

Use npx shadcn@latest apply --preset <code> to overwrite an existing project's theme, fonts, and components. To preserve customized components, use init --preset <code> --force --no-reinstall, then smart-merge components individually. Partial updates support --only theme,font.

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.

Related Skills

Explore More Software Engineering Skills→
dsgalkardsgalkar

shadcn

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

Community
Intermediate
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
blueprintuiblueprintui
335

testing-visual

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

Official
Intermediate
merileymeriley

mantine-reviewing

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

Community
Intermediate