Agent skill

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"

View SKILL.md on GitHub Repository
Stars 52
Forks 9

Install this agent skill to your Project

npx add-skill https://github.com/julianromli/droid-factory-template/tree/main/skills/shadcn-management

SKILL.md

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.

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

julianromli/droid-factory-template

task-generator

Generate structured task lists from specs or requirements. IMPORTANT: After completing ANY spec via ExitSpecMode, ALWAYS ask the user: "Would you like me to generate a task list for this spec?" Use when user confirms or explicitly requests task generation from a plan/spec/PRD.

52 9
Explore
julianromli/droid-factory-template

rsc-data-optimizer

Optimize Next.js App Router data fetching by converting slow client-side fetching to fast server-side fetching using React Server Components (RSC). Use when: - User reports slow initial page load with loading spinners - Page uses useEffect + useState for data fetching - StoreContext/useStore pattern causes waterfall fetching - Need to improve SEO (content not in initial HTML) - Converting "use client" pages to Server Components Triggers: "slow loading", "optimize fetching", "SSR data", "RSC optimization", "remove loading spinner", "server-side fetch", "convert to server component", "data fetch lambat", "loading lama"

52 9
Explore
julianromli/droid-factory-template

frontend-ui-animator

Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".

52 9
Explore
julianromli/droid-factory-template

agents-md-generator

Generate hierarchical AGENTS.md structures for codebases. Use when user asks to create AGENTS.md files, analyze codebase for AI agent documentation, set up AI-friendly project documentation, or generate context files for AI coding assistants. Triggers on "create AGENTS.md", "generate agents", "analyze codebase for AI", "AI documentation setup", "hierarchical agents".

52 9
Explore
julianromli/droid-factory-template

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.

52 9
Explore
julianromli/droid-factory-template

template-skill

Replace with description of the skill and when Claude should use it.

52 9
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results