What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and lack proper loading, error, and empty states. 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 content and interaction patterns. ## Core Features & Use Cases - Component Architecture Guidance: Enforces composition over configuration, colocated file structures, and separation of data fetching from presentation. - Accessibility Enforcement: Covers keyboard navigation, ARIA labels, focus management, and meaningful empty/error states to meet WCAG 2.1 AA. - Design System Adherence: Avoids the generic "AI aesthetic" (purple gradients, excessive rounding, stock layouts) by applying consistent spacing scales, typography hierarchy, and semantic color tokens. - Use Case: When asked to build a task list page, the Skill produces a responsive component with skeleton loading states, optimistic updates, keyboard-accessible controls, and proper empty/error handling instead of a bare list. ## Quick Start Ask the agent to build a responsive, accessible settings page component that follows the project's design system and includes loading, error, and empty states.
