skills.rest
kyamsSRL
kyamsSRLCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manage shadcn/ui components via the shadcn CLI with dry-run and diff previews.

Updated Mar 18, 2026
Search Tags:#ui#components#cli#tailwind#shadcn#presets#component-registry
One-click install
npx skills add https://github.com/kyamsSRL/TinyCopro --skill shadcn-kyamssrl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/kyamsSRL/TinyCopro/tree/main/.claude/skills/shadcn
Command: npx skills add https://github.com/kyamsSRL/TinyCopro --skill shadcn-kyamssrl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a disciplined, CLI-driven workflow for adding, updating, fixing, and composing shadcn/ui components so teams avoid broken imports, inconsistent styling, and unsafe overwrites when integrating third-party registry components or switching presets.

Core Features & Use Cases

  • Project-aware CLI integration: Uses the shadcn CLI via the project's package runner to inspect components.json, resolved paths, aliases, and Tailwind configuration before making changes.
  • Safe install and update workflows: Supports dry-run, diff, and smart merge steps to preview changes, review diffs per-file, and preserve local modifications when updating upstream components.
  • Composition, styling, and accessibility rules: Enforces composition patterns (groups, overlays, titles), styling best practices (semantic tokens, gap-* spacing, cn() usage), and icon import conventions to ensure consistent UI and accessibility.
  • Preset and registry management: Guides switching or initializing presets (reinstall, merge, skip), requires explicit registry selection when adding components, and includes MCP tools for registry queries and audits.

Quick Start

Run the project's shadcn CLI with the package runner to inspect the project (info) and list or fetch docs for components before adding or updating them.

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 breaking existing imports?▼

Use the shadcn CLI with dry-run and diff flags to safely add components without breaking imports. The CLI inspects components.json, resolved paths, and aliases to preview changes per-file, preventing unsafe overwrites and ensuring local modifications are preserved during updates.

What is the best way to update shadcn/ui components while preserving local styling changes?▼

Use the shadcn CLI smart merge workflow to update components while preserving local styling. Run info and docs commands to inspect changes, then apply smart merge steps that review diffs per-file to protect local modifications from being overwritten during upstream updates.

How do I switch shadcn/ui presets without losing my current component configuration?▼

To switch shadcn presets safely, use the CLI reinstall, merge, and skip options. This preset management workflow inspects components.json and Tailwind configuration to merge new preset codes without losing your existing component configuration and styling overrides.

Does the shadcn CLI support third-party component registries for adding custom UI components?▼

Yes, the shadcn CLI supports third-party component registries. It requires explicit registry selection when adding components and includes MCP tools for registry queries and audits, ensuring consistent UI and accessibility when integrating custom components from external sources.

Why does my shadcn/ui styling look inconsistent after adding new components?▼

Inconsistent shadcn styling happens when composition and styling rules are skipped. The CLI enforces semantic tokens, gap-* spacing, cn() usage, and icon import conventions to ensure consistent UI and accessibility across all added or updated components.

Can I use shadcn/ui components with my existing Tailwind configuration and custom aliases?▼

Yes, you can use shadcn components with existing Tailwind configuration and custom aliases. The CLI inspects components.json, resolved paths, and Tailwind settings before making changes, ensuring component integration respects your project's specific configuration and alias structure.

Related Skills

Explore More Software Engineering Skills→
Rafaelp122Rafaelp122
2

shadcn

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

Community
Advanced
quanngynxquanngynx

shadcn

Enforce shadcn/ui component composition, styling, and accessibility rules.

Community
Advanced
sebasmzgsebasmzg

tailwind-4

Enforce Tailwind CSS 4 semantic theme classes and cn-style merging in React components.

Community
Basic
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate