What problem does it solve? Building consistent, accessible, and responsive user interfaces from scratch is slow and error-prone. This Skill provides structured guidance for composing production UIs with shadcn/ui components (built on Radix UI primitives), styling them with Tailwind CSS utilities, and producing canvas-based visual designs, so you avoid reinventing component patterns and design tokens. ## Core Features & Use Cases - Accessible Component Library: Install and compose shadcn/ui components (dialogs, forms, tables, navigation) with built-in Radix UI accessibility, keyboard navigation, and TypeScript type safety. - Utility-First Styling: Apply Tailwind CSS for responsive mobile-first layouts, dark mode, theme customization via CSS variables, and consistent design tokens. - Visual Design System: Create canvas-based visual compositions and posters using bundled open-license fonts and a philosophy-driven design approach. - Use Case: You need a dashboard with a validated login form, responsive card grid, and dark mode toggle in a Next.js app. The Skill walks you through shadcn/ui setup, form validation with react-hook-form and zod, and Tailwind responsive/dark-mode classes. ## Quick Start Ask the assistant to scaffold a responsive dashboard page with shadcn/ui cards, a validated form, and dark mode support using Tailwind CSS.
