skills.rest
sujaykundu777
sujaykundu777COMMUNITY
Explore all skills by this author →
Website𝕏@xplor4rGitHub

shadcn

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

5|Updated Feb 15, 2026
Search Tags:#theming#react#cli#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/sujaykundu777/mission-control --skill shadcn-sujaykundu777
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/sujaykundu777/mission-control/tree/main/.github/skills/shadcn
Command: npx skills add https://github.com/sujaykundu777/mission-control --skill shadcn-sujaykundu777

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent UI with shadcn/ui requires knowing the correct component APIs, composition rules, presets, and CLI workflows; this Skill provides project-aware context and enforced rules so generated code follows shadcn/ui conventions instead of ad-hoc markup. ## 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, data-icon attributes, gap-* spacing, and correct base-vs-radix API usage. - Preset and theme workflows: Init projects with named presets or 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 states. ## Quick Start Ask the assistant to add a shadcn/ui component such as a dialog or build a settings form, and it will use the shadcn CLI to inspect the project 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, using your project's package runner. 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 local changes?▼

Use npx shadcn@latest add <component> --dry-run to see affected files, then --diff per file to compare upstream changes. Apply upstream updates 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 and component APIs. Radix uses asChild and type props, while base uses render, multiple booleans, and array defaultValues for components like Select, ToggleGroup, Slider, and Accordion.

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. Decode codes with preset decode; never construct preset URLs manually.

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

Related Skills

Explore More Software Engineering Skills→
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
semicolon-devteamsemicolon-devteam

onboarding-backend

Guide backend developer onboarding through API design, database schema, and deployment in SAX-Backend.

Official
Basic
baloisebaloise
111

ds-test-component

Generate visual, accessibility, and unit tests for Helvetia Design System components.

Official
Advanced
mgd34msumgd34msu
4

chakra-ui

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

Community
Intermediate