What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and break on different screen sizes. This Skill provides a rigorous engineering protocol for building user-facing UI that meets WCAG 2.1 AA standards, respects the project's design system, and avoids the recognizable "AI aesthetic" of purple gradients and stock card grids. ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structures, and separation of data fetching from presentation in React/TSX components. - Accessibility Compliance: Covers keyboard navigation, ARIA labels, focus management, and meaningful empty/error states to meet WCAG 2.1 AA requirements. - Responsive & State Patterns: Provides mobile-first responsive layout patterns and a decision framework for choosing between local state, context, URL state, and server state. - Use Case: When asked to build a task management dashboard, the Skill guides the agent to produce a component with skeleton loading states, optimistic updates, keyboard-accessible controls, semantic color tokens, and layouts tested at 320px through 1440px breakpoints. ## Quick Start Build a responsive, accessible task list component with loading, error, and empty states that follows our design system.
