What problem does it solve? AI-generated interfaces often look generic, ignore accessibility requirements, and lack proper loading, error, and empty states. This Skill enforces production-quality UI 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 (WCAG 2.1 AA): Provides concrete patterns for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states. - Design System Adherence: Helps avoid the generic "AI aesthetic" (purple gradients, excessive rounding, stock card grids) by enforcing spacing scales, typography hierarchy, and semantic color tokens. - Use Case: When building a new task list page, use this Skill to generate a responsive component with skeleton loading states, optimistic updates, keyboard-accessible controls, and proper empty states instead of a bare list. ## Quick Start Use the frontend-ui-engineering skill to build a responsive, accessible task list component with loading and empty states.
