shadcn-dev

Get shadcn/ui development overview, project status, and guidance on available skills

Analyze project for shadcn/ui and Tailwind CSS setup, recommend components

Full-capability shadcn/ui development agent for autonomous, multi-step work. Use when the user needs background shadcn/ui tasks like "set up shadcn components", "build a form with validation", "create a data table", "configure dark mode", "scaffold a dashboard with sidebar", "add and wire up these components", "create a settings page", or any multi-file shadcn/ui development task. Do NOT use for simple single-component additions (use shadcn-components skill instead) or for debugging (use shadcn-troubleshoot agent instead). <example> Context: User wants a complete feature with multiple components user: "build me a login page with email/password form, validation, and dark mode toggle" assistant: "I'll use the shadcn-agent to build the login page with all those pieces." <commentary> Multi-component feature requiring forms, theming, and layout. Agent can work autonomously across multiple files. </commentary> </example> <example> Context: User wants a data-heavy page set up user: "create a users data table with sorting, filtering, pagination, and row actions" assistant: "I'll use the shadcn-agent to scaffold the full data table." <commentary> Complex feature requiring column definitions, table component, filter UI, and pagination. Benefits from autonomous background execution. </commentary> </example> <example> Context: User wants multiple components installed and configured user: "add dialog, sheet, dropdown-menu, and command palette, then create a settings layout using them" assistant: "I'll use the shadcn-agent to install those components and build the settings layout." <commentary> Multi-step: install components via CLI, then compose them into a feature. Agent handles the full workflow. </commentary> </example>

This agent provides autonomous debugging for shadcn/ui and Tailwind CSS issues. Use when the user says "shadcn not working", "fix shadcn", "debug shadcn", "component not rendering", "styling not applied", "tailwind not working", "hydration error", "shadcn error", "cn function error", or asks troubleshooting questions about shadcn/ui or Tailwind CSS behavior. <example> Context: User experiencing shadcn/ui issues user: "shadcn not working" assistant: "I'll use the shadcn-troubleshoot agent to diagnose this." <commentary> Troubleshooting request detected. Delegate to debugging agent. </commentary> </example> <example> Context: User has styling problems user: "my shadcn button styles aren't being applied" assistant: "I'll use the shadcn-troubleshoot agent to investigate the styling issue." <commentary> Styling issue reported. Delegate to troubleshoot agent for systematic diagnosis. </commentary> </example>

This skill should be used when the user asks to "add a button", "create a dialog", "use card component", "shadcn accordion", "dropdown menu", "add alert", "tooltip component", or mentions specific shadcn/ui component usage, customization, or implementation patterns.

This skill should be used when the user asks about "data table", "tanstack table", "sortable table", "filterable table", "table pagination", "column sorting", "row selection", or mentions building data tables, grids, or TanStack Table integration with shadcn.

This skill should be used when the user asks to "set up shadcn", "configure shadcn", "shadcn project setup", "install shadcn", "shadcn init", "ui components for react", or mentions general shadcn/ui configuration questions. For specific topics like theming, forms, or data tables, focused skills may be more appropriate.

This skill should be used when the user asks about "form validation", "react-hook-form", "zod schema", "form submission", "input validation", "form errors", "useForm hook", "form field", or mentions form handling, validation, or react-hook-form integration with shadcn.

This skill should be used when the user asks about "dark mode", "light mode", "theme colors", "css variables", "color scheme", "customize theme", "shadcn colors", "theme provider", or mentions theming, color customization, or dark/light mode implementation.

This skill should be used when the user asks about "tailwind v4", "tailwindcss 4", "tailwind css v4", "@theme", "css-first config", "tailwind css variables", "oklch colors", "tailwind upgrade", "migrate to tailwind 4", or mentions Tailwind CSS v4 configuration, new syntax, or migration from v3.

3 hooks across 3 events