What problem does it solve? AI-generated UI often looks generic, ignores accessibility requirements, and skips responsive design, resulting in interfaces that fail WCAG standards and feel unpolished. This Skill enforces production-grade frontend 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 structures, and separation of data fetching from presentation. - Accessibility Compliance: Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and WCAG 2.1 AA contrast requirements. - Design System Adherence: Eliminates the generic "AI aesthetic" (purple gradients, excessive rounding, stock layouts) in favor of project-specific spacing scales, semantic color tokens, and type hierarchies. - Use Case: When building a new task management page, use this Skill to generate a TaskList component with skeleton loading states, empty states, optimistic updates via React Query, keyboard-accessible controls, and responsive grid layouts tested at 320px through 1440px. ## Quick Start Build a responsive, accessible task list component with loading, error, and empty states that follows our design system.
