What problem does it solve?
AI-generated user interfaces often appear generic, lack accessibility, ignore project-specific design systems, and have poor user experience, making them unsuitable for production deployment. This Skill provides comprehensive, battle-tested guidelines to build user-facing interfaces that are visually polished, fully accessible, performant, and indistinguishable from work created by senior frontend engineers at leading technology companies.
Core Features & Use Cases
- Design System Adherence: Enforces strict compliance with project design systems and eliminates common low-quality "AI aesthetic" patterns such as generic purple/blue gradients, excessive rounded corners, uniform padding, and template-style hero sections.
- Accessibility & Responsiveness: Includes full WCAG 2.1 AA compliance rules, mobile-first responsive design guidance, and requirements for proper loading, error, and empty states.
- Component Architecture Best Practices: Covers component composition over over-configuration, state management selection, file structure colocation, and separation of data fetching from presentation logic.
- Use Case: Use this Skill to build a customer-facing task management dashboard that works seamlessly across mobile, tablet, and desktop viewports, is fully accessible to screen reader and keyboard-only users, and matches your company's existing design system instead of looking like a generic AI-generated template.
Quick Start
Use the frontend-ui-engineering skill to build a responsive, accessible task list component that follows your project's design system and includes proper loading, error, and empty states.
