What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and lack proper loading, error, and empty states. This Skill provides concrete patterns for building production-quality user interfaces that follow a project's design system, meet WCAG 2.1 AA accessibility standards, and work across screen sizes. ## Core Features & Use Cases - Component Architecture Patterns: Enforces composition over configuration, colocated file structure, and separation of data fetching from presentation in React components. - Accessibility Compliance: Provides keyboard navigation, ARIA labeling, focus management, and contrast requirements with a detailed WCAG 2.1 AA checklist reference. - Design System Adherence: Identifies and eliminates common AI-generated UI anti-patterns such as purple gradients, excessive rounding, and stock card grids in favor of project-specific tokens and spacing scales. - Use Case: When asked to build a task management page, the Skill guides creation of a responsive grid layout with skeleton loading states, optimistic updates via React Query, keyboard-accessible controls, and meaningful empty states. ## Quick Start Ask the AI to build a responsive, accessible task list component with loading, error, and empty states using this Skill.
