This skill should be used when setting up, configuring, or initializing Tailwind CSS (v3 or v4) and shadcn/ui for Next.js 16 App Router projects. Configure dark mode, design tokens, base layout with header/sidebar, accessibility defaults, and generate example components. Includes comprehensive setup automation, theme customization, and production-ready patterns. Use when the user requests "setup Tailwind", "configure shadcn/ui", "add dark mode", "initialize design system", or "setup UI framework" for Next.js projects.
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/app/examples/dialogs/page.tsxassets/app/examples/forms/page.tsxassets/app/examples/layout.tsxassets/app/examples/theme/page.tsxassets/app/layout.tsx.templateassets/app/page.tsx.templateassets/components/app-shell.tsxassets/components/mode-toggle.tsxassets/components/theme-provider.tsxassets/globals.css.templateassets/postcss.config.js.templateassets/tailwind.config.ts.templatereferences/accessibility-checklist.mdreferences/shadcn-component-list.mdreferences/tailwind-v4-migration.mdreferences/theme-tokens.mdscripts/setup_tailwind_shadcn.py