What problem does it solve? Building consistent, accessible user interfaces from scratch requires deep knowledge of ARIA patterns, responsive design, and design tokens. This Skill provides structured guidance and automation for creating UIs with shadcn/ui components and Tailwind CSS, eliminating guesswork around component composition, theming, and dark mode. ## Core Features & Use Cases - Component Installation Automation: The shadcn_add.py script wraps the shadcn CLI to add components with dependency handling, overwrite protection, and dry-run support. - Tailwind Config Generation: The tailwind_config_gen.py script generates tailwind.config.js/ts with custom colors, fonts, spacing, breakpoints, and plugin recommendations for React, Vue, Svelte, and Next.js. - Reference Documentation: Covers the shadcn/ui component catalog, theming with CSS variables, accessibility patterns, Tailwind utilities, responsive design, and canvas-based visual design. - Use Case: When scaffolding a Next.js dashboard, use this Skill to initialize shadcn/ui, add form and table components, generate a Tailwind config with brand colors, and implement dark mode with consistent design tokens. ## Quick Start Ask the assistant to set up shadcn/ui with Tailwind CSS in your project and add button, card, and dialog components with a dark mode theme.
