What problem does it solve?
This Skill solves the pervasive issue of AI-generated user interfaces that feature generic, unpolished "AI aesthetics", lack proper accessibility, fail to adhere to project design systems, and require extensive rework to meet production quality standards.
Core Features & Use Cases
- Design System Compliance: Enforces consistent use of project-specific color palettes, spacing scales, typography, and component patterns to eliminate common AI-generated UI defaults like overused purple gradients, excessive border rounding, and generic hero sections.
- Accessible & Responsive Implementation: Provides guidance for building keyboard-navigable, screen-reader-friendly components with proper ARIA labels, focus management, and mobile-first responsive layouts that function across all standard breakpoints.
- Production-Grade Engineering Patterns: Covers best practices for component composition, state management, loading/error/empty states, and performance optimization to ensure UIs are fast, reliable, and user-friendly.
- Real-World Use Case: For example, use this Skill to build a task management dashboard that matches your company's existing design system, works seamlessly on mobile devices, and passes accessibility audits without additional rework.
Quick Start
Use the frontend-ui-engineering skill to build a responsive, accessible task list component that adheres to your project's design system and includes proper loading, error, and empty states.
