What problem does it solve? AI-generated interfaces often look generic, ignore accessibility standards, and break on different screen sizes. This Skill guides the creation of production-quality user interfaces that follow real design systems, meet WCAG 2.1 AA accessibility requirements, and avoid the recognizable "AI aesthetic" of purple gradients and stock layouts. ## Core Features & Use Cases - Component Architecture Patterns: Enforces composition over configuration, colocated file structures, and separation of data fetching from presentation in React/TypeScript code. - Accessibility Enforcement: Covers keyboard navigation, ARIA labels, focus management, and meaningful empty/error states to meet WCAG 2.1 AA standards. - Design System Adherence: Guides consistent spacing scales, typography hierarchy, semantic color tokens, and responsive mobile-first layouts tested at 320px through 1440px breakpoints. - Use Case: When asked to build a task management dashboard, this Skill ensures the output uses composable Card components, skeleton loading states, keyboard-accessible controls, and the project's actual color palette instead of generic AI defaults. ## Quick Start Ask the AI to build a responsive, accessible task list component with loading, error, and empty states using this Skill.
