frontend-ui-engineering

What problem does it solve?

This Skill addresses the challenge of creating user interfaces that are not only functional but also meet high standards of production quality, accessibility, and design consistency, moving beyond generic AI-generated aesthetics.

Core Features & Use Cases

• Component Architecture: Enforces best practices for component structure, co-location, and composition.
• State Management Guidance: Recommends appropriate state management solutions based on complexity.
• Design System Adherence: Guides users to avoid common AI aesthetic pitfalls and adhere to project-specific spacing, typography, and color guidelines.
• Accessibility (WCAG 2.1 AA): Ensures keyboard navigation, proper ARIA usage, focus management, and meaningful states.
• Responsive Design: Promotes a mobile-first approach and testing across key breakpoints.
• Loading & Transitions: Implements skeleton loading and optimistic updates for better perceived performance.
• Use Case: When building a new dashboard component, use this skill to ensure it's accessible, responsive, follows the established design system, and has proper loading and error states.

Quick Start

Use the frontend-ui-engineering skill to build a new accessible and responsive card component for the user profile section.