shadcn-management
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"
Best use case
shadcn-management is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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"
Teams using shadcn-management should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/shadcn-management/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How shadcn-management Compares
| Feature / Agent | shadcn-management | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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"
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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
Related Skills
workflow-management
Create, debug, or modify QStash workflows for data updates and social media posting in the API service. Use when adding new automated jobs, fixing workflow errors, or updating scheduling logic.
secrets-management
Implement secure secrets management for CI/CD pipelines using Vault, AWS Secrets Manager, or native platform solutions. Use when handling sensitive credentials, rotating secrets, or securing CI/CD environments.
project-session-management
Track progress across work sessions using SESSION.md with git checkpoints and concrete next actions. Converts IMPLEMENTATION_PHASES.md into trackable session state with phase status, progress markers, and recovery points. Use when: starting projects after planning phase, resuming work after context clears, managing multi-phase implementations, or troubleshooting lost context, missing progress tracking, or unclear next steps.
product-management
Assist with core product management activities including writing PRDs, analyzing features, synthesizing user research, planning roadmaps, and communicating product decisions. Use when you need help with PM documentation, analysis, or planning workflows that integrate with your codebase.
monorepo-management
Master monorepo management with Turborepo, Nx, and pnpm workspaces to build efficient, scalable multi-package repositories with optimized builds and dependency management. Use when setting up monorepos, optimizing builds, or managing shared dependencies.
github-release-management
Comprehensive GitHub release orchestration with AI swarm coordination for automated versioning, testing, deployment, and rollback management
github-project-management
Comprehensive GitHub project management with swarm-coordinated issue tracking, project board automation, and sprint planning
zapier-workflows
Manage and trigger pre-built Zapier workflows and MCP tool orchestration. Use when user mentions workflows, Zaps, automations, daily digest, research, search, lead tracking, expenses, or asks to "run" any process. Also handles Perplexity-based research and Google Sheets data tracking.
writing-skills
Create and manage Claude Code skills in HASH repository following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skill activation, or implementing progressive disclosure. Covers skill structure, YAML frontmatter, trigger types (keywords, intent patterns), UserPromptSubmit hook, and the 500-line rule. Includes validation and debugging with SKILL_DEBUG. Examples include rust-error-stack, cargo-dependencies, and rust-documentation skills.
writing-plans
Use when design is complete and you need detailed implementation tasks for engineers with zero codebase context - creates comprehensive implementation plans with exact file paths, complete code examples, and verification steps assuming engineer has minimal domain knowledge
workflow-orchestration-patterns
Design durable workflows with Temporal for distributed systems. Covers workflow vs activity separation, saga patterns, state management, and determinism constraints. Use when building long-running processes, distributed transactions, or microservice orchestration.
workflow-interactive-dev
用于开发 FastGPT 工作流中的交互响应。详细说明了交互节点的架构、开发流程和需要修改的文件。