What problem does it solve? AI-generated interfaces often look generic, ignore accessibility standards, and lack proper loading, error, and empty states. This Skill enforces production-quality UI engineering practices so components are accessible, responsive, and consistent with the project's design system. ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structure, and separation of data fetching from presentation in React/TypeScript components. - Accessibility Compliance: Applies WCAG 2.1 AA requirements including keyboard navigation, ARIA labels, focus management, and meaningful empty/error states. - Design System Adherence: Avoids the generic "AI aesthetic" (purple gradients, excessive rounding, stock layouts) by enforcing spacing scales, semantic color tokens, and type hierarchy. - Use Case: When asked to build a task list page, the Skill produces a container/presentational component split with skeleton loading, optimistic updates via React Query, keyboard-accessible controls, and responsive grid layouts tested at 320px to 1440px breakpoints. ## Quick Start Ask the AI to build a responsive, accessible task list component with loading, error, and empty states following the project's design system.
