skills.rest
project-ax
project-axOFFICIAL
Explore all skills by this author →
GitHub

shadcn

Manage shadcn/ui component workflows via CLI registry operations with dry-run safety.

1|Updated Apr 23, 2026
Search Tags:#cli#shadcn/ui#monorepo#frontend styling#smart merge#component installation#preset management
One-click install
npx skills add https://github.com/project-ax/ax-next --skill shadcn-project-ax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/project-ax/ax-next/tree/main/.claude/skills/shadcn
Command: npx skills add https://github.com/project-ax/ax-next --skill shadcn-project-ax

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents inconsistent shadcn/ui usage by giving a single set of rules for adding, searching, fixing, debugging, styling, and composing UI components, including project-aware guidance for presets and monorepos.

Core Features & Use Cases

  • Project-aware shadcn/ui workflows: applies whenever you work with shadcn/ui components, registries, presets, preset codes, or any project containing a components.json file (including monorepo projects requiring the correct workspace flag).
  • Safe installation and updates: guides you to use dry-run, diffs, and smart merge so you can preview changes and preserve local modifications.
  • Quality and correctness guardrails: enforces form/layout conventions (FieldGroup + Field, ToggleGroup for option sets), styling rules (semantic tokens, gap-* spacing, size-*), icon rules (data-icon), and composition rules (proper Group nesting, required titles in overlays).

Quick Start

Ask the Skill to install a UI component by name and preview exactly what files will change for your current project preset and monorepo workspace setup.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I safely update shadcn/ui components without losing local modifications?▼

You can safely update shadcn/ui components by using dry-run, diffs, and smart merge to preview changes and preserve local modifications during installation and registry updates.

What's the best way to install shadcn/ui components in a monorepo?▼

Install shadcn/ui components in a monorepo by obeying workspace execution flags during CLI operations, ensuring deterministic registry operations target the correct project workspace.

Does shadcn/ui work with preset management for frontend styling?▼

Yes, shadcn/ui supports preset management for frontend styling by applying and switching preset codes, ensuring consistent semantic token usage and component styling across project configurations.

Why does shadcn/ui component composition require specific layout conventions?▼

shadcn/ui component composition requires layout conventions like FieldGroup plus Field and ToggleGroup to enforce form correctness, proper Group nesting, and required titles in overlays for consistent UI behavior.

Can I use shadcn CLI commands instead of fetching components manually from GitHub?▼

Yes, you should use shadcn CLI commands with deterministic comparison steps instead of manual GitHub fetching to manage component installation, documentation lookup, and registry operations consistently.

Related Skills

Explore More Software Engineering Skills→
alexzhang1030alexzhang1030

shadcn

Manage shadcn/ui components and project workflows via CLI-driven registry resolution.

Community
Advanced
iamhenryiamhenry
5

shadcn

Installs and configures shadcn/ui components via CLI.

Community
Intermediate
iterateiterate
198

shadcn

Generate and fix shadcn/ui components via CLI registry operations and styling rules.

Official
Advanced
manhthien2005manhthien2005

shadcn-add

Add or update shadcn/ui components in a Next.js project via the official CLI.

Community
Intermediate