What problem does it solve? Building consistent, accessible, and responsive user interfaces from scratch is time-consuming and error-prone. This Skill provides a complete workflow for creating production-quality UIs using shadcn/ui components (built on Radix UI primitives), Tailwind CSS utility-first styling, and canvas-based visual design, eliminating the need to hand-write accessibility logic, responsive breakpoints, and theme systems. ## Core Features & Use Cases - Accessible Component Library: Install and compose pre-built shadcn/ui components (dialogs, forms, tables, dropdowns, navigation) with built-in ARIA patterns, keyboard navigation, and focus management via Radix UI primitives. - Utility-First Styling & Theming: Apply Tailwind CSS for mobile-first responsive layouts, dark mode with CSS variables, custom design tokens, and automatic dead code elimination. - Visual Design Generation: Create canvas-based visual compositions, posters, and brand materials using a philosophy-driven design system with bundled open-license fonts. - Use Case: A developer building a fitness dashboard can scaffold a responsive grid of metric cards with dark mode support, add a validated login form with react-hook-form and zod, and generate a promotional poster—all following consistent design tokens. ## Quick Start Ask the AI to build a responsive dashboard page with shadcn/ui cards, a dark mode toggle, and a validated contact form using Tailwind CSS styling.
