Agent skill · software engineering · aiskillstore
shadcn-ui-patterns
Use when building UI components. Enforces ShadCN UI patterns, accessibility standards (Radix UI), and TailwindCSS best practices for November 2025.
Why this skill is useful
Provides specific usage patterns and component installation commands for ShadCN UI that enhance accessibility and TailwindCSS integration.
What it needs
Requires shadcn installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
ShadCN UI Patterns - November 2025 Standards When to Use Building new UI components Refactoring existing components to use ShadCN Implementing forms with validation Creating modals, dialogs, and overlays Ensuring accessibility compliance Why ShadCN UI? Copy-paste, not npm - Full ownership of component code Radix UI primitives - Accessibility built-in (WCAG 2.1 AA compliant) TailwindCSS-first - Full customization, no CSS-in-JS TypeScript-native - Type-safe props and variants Server Component compatible - Works with Next.js 15 App Router Core Principles 1. Component Installation Pattern Components are copied to src/components/ui/ directory - you own the code. 2. Component Usage Patterns Button Component Dialog/Modal Component Form Component (with React Hook Form + Zod) 3. Server vs Client Components 4. Accessibility Requirements Focus Management Keyboard Navigation Screen Reader Support 5. Common Components to Use Component Use Case Key Props ----------- ---------- ----------- Button All clickable actions variant, size, asChild Dialog Modals, confirmations open, onOpenChange Sheet Side panels, drawers side, open, onOpenChange Popover Tooltips, menus open, onOpenChange Form All forms form (from useForm) Input Text input type, placeholder Select Dropdowns value, onValueChange Checkbox Boolean input checked, onCheckedChange RadioGroup Single choice value, onValueChange Table Data tables table (from TanStack Table) Card Content containers CardHeader, CardContent, CardFooter Toast Notifications title, description, variant Command Command palette onSelect Tabs Tab navigation value, onValueChange 6. TailwindCSS Best Practices 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/shadcn-ui-patterns