What problem does it solve? Building consistent, accessible, and responsive user interfaces from scratch is time-consuming and error-prone. This Skill provides structured guidance for combining shadcn/ui components (built on Radix UI primitives) with Tailwind CSS utility styling, so you can implement production-quality interfaces, themes, and layouts without reinventing design patterns. ## Core Features & Use Cases - Accessible Component Implementation: Install and compose shadcn/ui components such as dialogs, forms, tables, dropdowns, and navigation with built-in Radix UI accessibility, keyboard navigation, and focus management. - Utility-First Styling & Theming: Apply Tailwind CSS for responsive mobile-first layouts, dark mode via CSS variables, custom design tokens, and theme customization. - Automation Scripts: Use bundled Python scripts to add shadcn/ui components with dependency handling and generate tailwind.config.js files with custom colors and fonts. - Use Case: You are building a Next.js dashboard and need a validated login form, a responsive card grid with dark mode, and a data table. This Skill walks you through shadcn/ui setup, form validation with react-hook-form and zod, and responsive Tailwind grid patterns. ## Quick Start Ask the assistant to set up shadcn/ui with Tailwind CSS in your React project and build a responsive dashboard page with a validated form and dark mode support.
