shadcn-ui-setup_skill

Overview

This skill adds Shadcn UI components and configures app-level theming with dark mode support using next-themes. It wires a ThemeProvider, sets up CSS variables for tokens, and provides a clear integration path for TypeScript Next.js projects. The goal is production-ready UI patterns that work with server and client rendering.

How this skill works

The skill installs and configures Shadcn UI components, then injects a ThemeProvider wrapper to manage theme state via next-themes. It also generates or updates a CSS variables file and applies theme-aware styles so components automatically respond to light and dark modes. Integration points include app layout, global styles, and a simple toggle component for switching themes.

When to use it

• You want consistent light/dark theming across a Next.js app using Shadcn UI components.
• You need a central ThemeProvider and CSS variable strategy for design tokens.
• You are building a TypeScript Next.js app and require server/client friendly theme handling.
• You want production-ready patterns and step-by-step guidance for UI theming.

Best practices

• Wrap your root layout with the ThemeProvider so theme state is available to all components.
• Keep design tokens in CSS variables and reference them in component styles for easy theme swaps.
• Prefer a small client-only theme toggle component that updates next-themes to avoid hydration issues.
• Test both SSR and client navigation flows to ensure theme preference persists and renders correctly.

Example use cases

• Add dark mode support to an existing Shadcn UI-based dashboard with minimal changes.
• Bootstrap a new Next.js TypeScript app with theme-aware components and a theme toggle.
• Standardize theming across multiple pages and shared UI primitives in a monorepo.
• Provide designers and engineers a shared token file (CSS variables) for quick theme iterations.