What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and break on different screen sizes. This Skill guides the construction of production-quality user interfaces that follow a project's actual design system, meet WCAG 2.1 AA accessibility standards, and handle real-world states like loading, errors, and empty content. ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structures, and separation of data fetching from presentation in React components. - Accessibility Compliance: Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states that meet WCAG 2.1 AA. - Design System Adherence: Helps avoid the generic "AI aesthetic" (purple gradients, excessive rounding, stock card grids) by enforcing consistent spacing scales, typography hierarchy, and semantic color tokens. - Use Case: When asked to build a task management page, the Skill produces a responsive layout with skeleton loading states, optimistic updates via React Query, keyboard-accessible controls, and proper empty states instead of a bare list. ## Quick Start Ask the AI to build a responsive, accessible task list component with loading, error, and empty states using this Skill.
