skills.rest
jasonviipers
jasonviipersCOMMUNITY
Explore all skills by this author →
Website𝕏@jasonviipersGitHub

shadcn

Manages shadcn/ui components, presets, and registries via the shadcn CLI.

Updated Sep 16, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/jasonviipers/vipers --skill shadcn-jasonviipers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/jasonviipers/vipers/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/jasonviipers/vipers --skill shadcn-jasonviipers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with shadcn/ui involves many CLI commands, registry formats, preset codes, and composition rules that are easy to get wrong. This Skill provides project-aware guidance for adding, searching, updating, and styling shadcn/ui components so generated UI code follows correct patterns instead of hand-rolled markup. ## Core Features & Use Cases - Component Management: Search registries, add components, preview changes with --dry-run/--diff, and smart-merge upstream updates while preserving local modifications. - Enforced UI Rules: Applies critical rules for forms (FieldGroup/Field), composition (Groups, Titles, Card structure), styling (semantic tokens, gap-, size-), icons (data-icon), and chat primitives (MessageScroller, Bubble, Attachment, Marker). - Preset & Theme Workflows: Initialize projects with named presets or codes, apply or merge presets into existing projects, and customize themes via CSS variables. - Use Case: When asked to build a settings form in a Next.js project, the Skill checks the 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 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 the 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 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 edits, 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 for composition while Base uses render, and components like Select, ToggleGroup, Slider, and Accordion have different props between the two.

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

Use npx shadcn@latest apply <code> to overwrite preset-driven config, fonts, and components, or init --preset <code> --force --no-reinstall to update only config and CSS. Never decode preset codes manually; pass them directly to the CLI.

Can I use components from community registries with shadcn?▼

Yes, add items using namespaced addresses like @magicui/shimmer-button or GitHub addresses like owner/repo/item. After adding, verify the files and fix hardcoded import paths to match your project's aliases from npx shadcn@latest info.

Why should I not use space-y or raw color classes with shadcn/ui?▼

The Skill enforces flex with gap-* instead of space-x-*/space-y-* and semantic tokens like bg-primary instead of raw colors like bg-blue-500. This keeps components themeable through CSS variables and consistent with dark mode.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

shadcn

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

Official
Intermediate
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
Daiwik-ChilukuriDaiwik-Chilukuri

normalize

Normalize UI implementations to match a project's design system and eliminate one-off styles.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced