tailwind-shadcn-ui-setup

Description

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.

Tool Access

Full access

Inherits all available tools

Supporting Files

17 files

Additional assets for this skill

Tool Access

This skill inherits all available tools. When active, it can use any tool Claude has access to.

Supporting Assets

assets/app/examples/dialogs/page.tsx

assets/app/examples/forms/page.tsx

assets/app/examples/layout.tsx

assets/app/examples/theme/page.tsx

assets/app/layout.tsx.template

assets/app/page.tsx.template

assets/components/app-shell.tsx

assets/components/mode-toggle.tsx

assets/components/theme-provider.tsx

assets/globals.css.template

assets/postcss.config.js.template

assets/tailwind.config.ts.template

references/accessibility-checklist.md

references/shadcn-component-list.md

references/tailwind-v4-migration.md

references/theme-tokens.md

scripts/setup_tailwind_shadcn.py

Links

GitHub Stats

0 forks

Updated 1 month ago

Related Skills

api-design-principles

22.8K

Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.

From backend-development

architecture-patterns

22.8K

Implement proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design. Use when architecting complex backend systems or refactoring existing applications for better maintainability.

From backend-development

microservices-patterns

22.8K

Design microservices architectures with service boundaries, event-driven communication, and resilience patterns. Use when building distributed systems, decomposing monoliths, or implementing microservices.

From backend-development