shadcn

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

Updated Mar 17, 2026
One-click install
npx skills add https://github.com/alexzhang1030/platform-demo --skill shadcn-alexzhang1030
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/alexzhang1030/platform-demo/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/alexzhang1030/platform-demo --skill shadcn-alexzhang1030

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the guesswork and repetitive setup involved in working with shadcn/ui by guiding component selection, installation, debugging, and project-aware customization.

Core Features & Use Cases

  • Component Management: Search for, add, update, and troubleshoot shadcn components with workflow guardrails.
  • Project-Aware Guidance: Adapt recommendations to the project’s framework, aliases, Tailwind version, icon library, and component configuration.
  • UI Composition Support: Build accessible forms, dialogs, cards, navigation, and other interface patterns using the right shadcn primitives and conventions.

Quick Start

Ask the shadcn skill to inspect your project and help you add, fix, or compose the UI components you need.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add and configure shadcn/ui components in an existing project?

To add and configure shadcn/ui components, the skill inspects your project context, resolves dependencies via the CLI-driven registry, and applies component-safe patterns. It adapts to your framework, aliases, Tailwind version, and components.json configuration for accurate installation.

Why does my shadcn/ui form or dialog styling break after installation?

Shadcn/ui styling breaks usually due to mismatched project context or incorrect Tailwind version configuration. The skill diagnoses these issues by analyzing your components.json setup, applying project-aware debugging, and enforcing correct theming and composition conventions to fix the UI.

Does shadcn/ui work with custom component registries and presets?

Yes, shadcn/ui works with custom component registries and presets. The skill manages these workflows by performing CLI-driven registry resolution, allowing you to search, install, and compose UI primitives from custom sources while maintaining your project's specific configuration.

What is the best way to compose accessible UI patterns using shadcn primitives?

The best way to compose accessible UI patterns is by using the skill's UI composition support. It guides you in building accessible forms, dialogs, cards, and navigation by selecting the correct shadcn primitives and enforcing component-safe conventions for overlays and theming.

Can I use shadcn/ui components with different Tailwind versions and icon libraries?

Yes, you can use shadcn/ui with different Tailwind versions and icon libraries. The skill provides project-aware guidance that adapts recommendations specifically to your project's framework, aliases, icon library choices, and component configuration.

How to fix shadcn CLI errors when resolving component dependencies?

To fix shadcn CLI errors during dependency resolution, the skill applies project-context-aware configuration checks. It troubleshoots the registry resolution process, validates your component setup, and ensures component-safe patterns are followed to resolve installation failures.