Shadcn management

Skill Microck/ordinary-claude-skills/skills_categorized/divination-mysticism/shadcn-management

An unappealing collection of Claude Skills and resources.

Install

npx -y skills add Microck/ordinary-claude-skills --skill shadcn-management

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

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"

SKILL.md

2.9 KB, as published. Nobody here has run it

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"):

Search - Find component in registry:

shadcn___search_items_in_registries(registries, query)

View - Get implementation details:

shadcn___view_items_in_registries(items: ["@shadcn/component-name"])

Examples - Get usage demo:

shadcn___get_item_examples_from_registries(registries, query: "component-demo")

Install - Get add command:

shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])

Output - Provide installation command and example code

Complex Build Workflow

For multi-component features (e.g., "build a login form"), see 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:

Use shadcn-management for component structure and composition
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