home / skills / julianromli / ai-skills / shadcn-management

shadcn-management skill

safe

This skill helps you manage shadcn/ui components, generate install commands, and assemble multi-component UI features efficiently.

npx playbooks add skill julianromli/ai-skills --skill shadcn-management

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

2.9 KB

---
name: shadcn-management
description: |
  Manage shadcn/ui components using MCP tools. Use when user needs to:
  (1) Add new shadcn components to a project
  (2) Build complex UI features requiring multiple components
  (3) Research component implementations and examples
  (4) Get component installation commands
  Triggers: "add shadcn", "shadcn component", "build UI with shadcn", "install component", "create form", "create dialog"
---

# Shadcn Component Management

## Prerequisites

Verify project setup:
```
shadcn___get_project_registries
```
If no components.json exists, instruct user: `npx shadcn@latest init`

## Quick Add Workflow

For simple component additions (e.g., "add a date picker"):

1. **Search** - Find component in registry:
   ```
   shadcn___search_items_in_registries(registries, query)
   ```

2. **View** - Get implementation details:
   ```
   shadcn___view_items_in_registries(items: ["@shadcn/component-name"])
   ```

3. **Examples** - Get usage demo:
   ```
   shadcn___get_item_examples_from_registries(registries, query: "component-demo")
   ```

4. **Install** - Get add command:
   ```
   shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])
   ```

5. **Output** - Provide installation command and example code

## Complex Build Workflow

For multi-component features (e.g., "build a login form"), see [references/workflows.md](references/workflows.md).

**When to use Complex Build:**
- Feature requires 3+ components
- Need component hierarchy planning
- Building complete sections (forms, dashboards, modals)

## Component Naming Patterns

Common search queries:
- Forms: `form`, `input`, `select`, `checkbox`, `radio-group`
- Layout: `card`, `dialog`, `sheet`, `drawer`, `tabs`
- Feedback: `alert`, `toast`, `skeleton`, `progress`
- Navigation: `button`, `dropdown-menu`, `navigation-menu`

Example queries for demos: `form-demo`, `card-with-form`, `dialog-demo`

## After Implementation

Always run audit:
```
shadcn___get_audit_checklist
```

## Custom Styling & Theming

Shadcn provides **structural foundation** with default styling. For custom aesthetics:

**Invoke `frontend-design` skill when:**
- User wants unique/distinctive visual style beyond default shadcn theme
- Need custom typography, color schemes, or motion effects
- Building landing pages or marketing sites requiring creative design
- User mentions "custom styling", "unique design", "not generic"

**Workflow:**
1. Use `shadcn-management` for component structure and composition
2. Invoke `frontend-design` for visual customization:
   - Custom CSS variables in `globals.css`
   - Tailwind theme extensions in `tailwind.config.js`
   - Animation and micro-interaction enhancements
   - Typography and color refinements

**Customization targets:**
- `@/app/globals.css` - CSS variables, custom fonts
- `tailwind.config.js` - theme colors, fonts, animations
- Component-level className overrides

Overview

This skill manages shadcn/ui components using MCP tools to add, inspect, and compose UI pieces into projects. It guides quick single-component additions and coordinates multi-component builds for complex features. The skill also provides installation commands, example usage, and post-implementation audit steps.

How this skill works

It inspects project registries to find available shadcn components, views implementation details, and retrieves example demos from registries. For additions it returns the exact add/install command and sample code; for complex features it helps plan component hierarchy and suggests a multi-step build workflow. It also produces an audit checklist to run after implementation.

When to use it

Add a single shadcn component (e.g., date picker, dialog)
Build features that require multiple components (forms, modals, dashboards)
Research component implementations or view usage examples
Get exact installation/add commands for components
Plan component hierarchy for a multi-part UI feature

Best practices

Verify project registries and initialize with npx shadcn@latest init if components.json is missing
Use search -> view -> examples -> install workflow for fast, reliable additions
Choose complex build workflow when a feature needs 3+ components or a planned hierarchy
Run the audit checklist after implementation to catch integration issues
Separate structure (shadcn components) from visual theming and invoke frontend-design for custom styles

Example use cases

Add a date picker: search registry, view implementation, fetch demo, and return add command
Build a login form: plan inputs, buttons, and dialog flow, then assemble multiple shadcn components
Create a dialog-based settings panel combining sheet, form, and tabs components
Install a component during onboarding and provide example code for quick integration
Research card-with-form demos to use as a base for a profile edit screen

FAQ

What if components.json is missing?

Run npx shadcn@latest init to create the project manifest and register registries before adding components.

When should I use the complex build workflow?

Use it for features requiring three or more components, when you need a planned component hierarchy, or when building complete sections like forms or dashboards.