skills.rest
Rafaelp122
Rafaelp122COMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manage shadcn/ui components and presets via the official CLI.

2|2|Updated Jul 1, 2025
Search Tags:#ui#frontend#react#components#cli#tailwind#shadcn
One-click install
npx skills add https://github.com/Rafaelp122/wedding_management --skill shadcn-rafaelp122
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Rafaelp122/wedding_management/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Rafaelp122/wedding_management --skill shadcn-rafaelp122

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes and automates working with shadcn/ui so teams can safely add, update, style, and audit UI components without breaking project aliases, Tailwind configuration, or composition rules. It prevents guesswork by providing project-aware guidance, enforcing composition and styling conventions, and using the official shadcn CLI to preview and apply changes.

Core Features & Use Cases

  • Project-aware CLI integration: uses npx/pnpm/bun runners and npx shadcn info to discover framework, aliases, tailwind config, installed components, and icon library.
  • Safe component installation and updates: supports add with --dry-run, --diff, and smart merge workflows to preview changes, preserve local edits, and choose overwrite/merge/skip strategies.
  • Enforced coding rules & accessibility: includes rules for styling, forms, composition, and icons to ensure consistent use of FieldGroup, Field, semantic tokens, asChild/render differences, and accessibility titles.
  • Registry and MCP support: can search/view registry items, fetch docs/examples, produce install commands, and run audits before installing third-party components.
  • Preset management: guides switching or applying presets with clear prompts to avoid accidental overwrites and ensures correct base (radix vs base) handling.

Quick Start

Run npx shadcn@latest info in your project directory using the project's package runner to fetch project context and installed components.

Frequently Asked Questions about shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I safely add shadcn/ui components without overwriting local edits?▼

To safely add shadcn/ui components, use the official CLI with --dry-run and --diff flags to preview changes, preserving local edits by choosing overwrite, merge, or skip strategies during installation.

What's the best way to manage Tailwind config and aliases when installing shadcn/ui components?▼

Managing Tailwind config and aliases requires project-aware CLI integration using npx shadcn info to discover your framework, aliases, tailwind settings, and installed components for correct registry resolutions.

Can I audit third-party shadcn registry components before installing them?▼

Yes, you can audit third-party shadcn registry components before installing them. The registry support fetches docs and examples, produces install commands, and runs audits to ensure safe integration.

How do I apply shadcn presets without accidental overwrites?▼

Applying shadcn presets safely involves guided switching with clear prompts to avoid accidental overwrites, ensuring correct base handling between radix and base presets during the application process.

Does shadcn CLI work with pnpm or bun package runners?▼

Yes, the shadcn CLI works with pnpm or bun package runners. It uses the project's specific package runner to execute commands and honor the components.json configuration for consistent results.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-setup-and-theming

Install and configure shadcn/ui with Tailwind and design tokens in React projects.

Official
Intermediate
officebeatsofficebeats
8

shadcn-ui

Build accessible Tailwind CSS interfaces using shadcn/ui components.

Community
Intermediate
franzosterkampfranzosterkamp

shadcn-ui

Create accessible React UI components for Next.js with Tailwind CSS.

Community
Intermediate
iAmAdheiliAmAdheil

react-shadcn-tailwind-builder

Automate React UI construction with shadcn-ui and Tailwind.

Community
Advanced