Agent skill · design visual · aiskillstore
styling-with-shadcn
Build beautiful, accessible UIs with shadcn/ui components in Next.js. Use when creating forms, dialogs, tables, sidebars, or any UI components. Covers installation, component patterns, react-hook-form + Zod validation, and dark mode setup. NOT when building non-React applications or using different component libraries.
Why this skill is useful
Provides specific component patterns and installation commands for shadcn/ui in Next.js that the AI wouldn't reliably generate on its own.
What it needs
Requires shadcn installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
shadcn/ui Build beautiful, accessible UIs with copy-paste components built on Radix UI and Tailwind CSS. Quick Start Common Component Install --- Core Patterns 1. Button Variants 2. Forms with react-hook-form + Zod See references/component-examples.md for complete form with Select, Textarea. 3. Dialog / Modal 4. Alert Dialog (Confirmation) 5. Data Table (TanStack) See references/component-examples.md for full DataTable with sorting/pagination. 6. Card Component 7. Toast Notifications (Sonner) 8. Sidebar Navigation See references/component-examples.md for full sidebar with persistent state. 9. Dark Mode --- Dependencies --- Verification Run: python3 scripts/verify.py Expected: ✓ styling-with-shadcn skill ready If Verification Fails 1. Check: references/ folder exists with component-examples.md 2. Stop and report if still failing Related Skills fetching-library-docs - Latest shadcn/ui docs: --library-id /shadcn-ui/ui --topic components building-nextjs-apps - Next.js 16 patterns for app structure References references/component-examples.md - Full code examples references/taskflow-theme.md - Custom theme configuration
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/styling-with-shadcn