shadcn

Manage shadcn/ui components and configurations via CLI interactions.

1|Updated Mar 27, 2026
One-click install
npx skills add https://github.com/imalfect/callwrench-ai --skill shadcn-imalfect
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/imalfect/callwrench-ai/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/imalfect/callwrench-ai --skill shadcn-imalfect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

shadcn UI project management unifies component orchestration and configuration, reducing boilerplate and enabling consistent workflows across setups.

Core Features & Use Cases

  • Adds, searches, fixes, debugs, styles, and composes shadcn/ui components and projects.
  • Provides project context, component docs, and usage examples; triggers on actions like shadcn init, create an app with --preset, or switch to a different preset.

Quick Start

Set up and manage shadcn/ui contexts and components with the CLI to begin productive development.

Frequently Asked Questions about shadcn

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

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

To manage shadcn/ui components, use the CLI to add, search, fix, debug, style, and compose UI elements within your project. This process relies on your components.json file to maintain consistent configuration and streamline component orchestration across your setup.

What is a shadcn/ui preset and when do I need to switch presets?

A shadcn/ui preset defines a specific configuration for your component registry. You need to switch presets when you want to change your project's styling or component architecture, triggered via CLI actions like creating an app with the --preset flag.

How do I initialize shadcn/ui using the command line interface?

To initialize shadcn/ui, run the `shadcn init` CLI command within your project directory. This action sets up the components.json file and establishes the necessary project context to begin productive UI development.

Does this approach work with an existing components.json configuration file?

Yes, this approach works directly with an existing components.json configuration file. The Skill actively detects this file to provide accurate project context, component documentation, and CLI interactions for managing your UI components.

What's the best way to fix and debug styling issues in shadcn/ui components?

The best way to fix and debug styling issues in shadcn/ui components is by leveraging the project context and component documentation provided by the Skill. This allows you to systematically identify and resolve UI composition and styling problems.

Why do I need a component registry for UI development?

You need a component registry to unify component orchestration and configuration, which reduces boilerplate. It enables consistent workflows for maintaining, adding, and searching UI components across different project setups.