Ordinary-claude-skills shadcn-management

install

source · Clone the upstream repo

git clone https://github.com/Microck/ordinary-claude-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/Microck/ordinary-claude-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills_all/shadcn-management" ~/.claude/skills/microck-ordinary-claude-skills-shadcn-management && rm -rf "$T"

manifest: skills_all/shadcn-management/SKILL.md

source content

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