Shadcn Ui
This gives Claude the full shadcn/ui component patterns with installation commands, usage examples, and integration with React Hook Form and Zod validation. You get working code for buttons, forms, dialogs, sheets, toasts, tables, and Recharts visualizations. The skill includes a complete component reference table and real examples like login forms with validation and data tables. Use it when you're building React UIs and want Claude to scaffold shadcn components correctly instead of guessing at imports or patterns. It knows the CLI commands, the Radix UI primitives underneath, and how to wire up the theme system with Tailwind CSS variables.
- skills.sh installs
- 22.7K
- GitHub stars
- 369
- last updated
- Aug 21, 2026
Install
$ npx -y skills add giuseppe-trisciuoglio/developer-kit --skill shadcn-ui --agent claude-codeInstalls into .claude/skills of the current project.
Files
shadcn/ui Component Patterns
Build accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS.
Overview
- Components are copied into your project — you own and customize the code
- Built on Radix UI primitives for full accessibility
- Styled with Tailwind CSS and CSS variables for theming
- CLI-based installation:
npx shadcn@latest add <component>
When to Use
Activate when user requests involve:
- "Set up shadcn/ui", "initialize shadcn", "add shadcn components"
- "Install button/input/form/dialog/card/select/toast/table/chart"
- "React Hook Form", "Zod validation", "form with validation"
- "accessible components", "Radix UI", "Tailwind theme"
- "shadcn button", "shadcn dialog", "shadcn sheet", "shadcn table"
- "dark mode", "CSS variables", "custom theme"
- "charts with Recharts", "bar chart", "line chart", "pie chart"
Quick Reference
Available Components
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/giuseppe-trisciuoglio/developer-kit
- Category
- Frontend Development
- First seen
- May 16, 2026
More from giuseppe-trisciuoglio/developer-kit
All 102- Tailwind Css Patterns18K
- Drizzle Orm Patterns5.7K
- Nextjs Performance5K
- Unit Test Bean Validation5K
- React Patterns4.9K
- Tailwind Design System4.7K
- React Code Review4.5K
- Spring Boot Test Patterns4.4K
- Nestjs4.4K
- Typescript Docs4.4K
- Spring Boot Rest Api Standards4.3K
- Spring Boot Security Jwt4.3K
- Spring Data Jpa4.2K
- Turborepo Monorepo4.2K
- Unit Test Boundary Conditions4.2K
- Spring Boot Openapi Documentation4.2K
- Drawio Logical Diagrams4.1K
- Clean Architecture4.1K
- Prompt Engineering4.1K
- Typescript Security Review4.1K
- Nextjs App Router4K
- Spring Boot Crud Patterns4K
- Chunking Strategy4K
- Spring Boot Event Driven Patterns4K
Recommended
More Frontend Development1
responsive-designwshobson/agentsImplement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive inte22Kskills.sh installs
responsive-designwshobson/agentsImplement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive inte22Kskills.sh installs2
nuxt-uinuxt/uiBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, buildi20.3Kskills.sh installs
nuxt-uinuxt/uiBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, buildi20.3Kskills.sh installs3react-state-managementwshobson/agentsMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing b15.9Kskills.sh installs
react-state-managementwshobson/agentsMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing b15.9Kskills.sh installs4
clerk-astro-patternsclerk/skillsAstro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, ast14.8Kskills.sh installs
clerk-astro-patternsclerk/skillsAstro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, ast14.8Kskills.sh installs5web-component-designwshobson/agentsMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI componen13.6Kskills.sh installs
web-component-designwshobson/agentsMaster React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI componen13.6Kskills.sh installs6
react-emailresend/resend-skillsUse when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emai13.3Kskills.sh installs
react-emailresend/resend-skillsUse when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emai13.3Kskills.sh installs