m-frontend-ui-engineering

What problem does it solve?

This Skill addresses the challenge of creating high-quality, production-ready user interfaces (UIs) that are accessible, performant, and visually polished, adhering to design systems and best practices.

Core Features & Use Cases

• Component Architecture: Provides guidelines for structuring UI components, favoring composition over configuration and keeping components focused.
• State Management: Offers guidance on choosing the right state management approach for different scenarios, from local state to global stores.
• Design System Adherence: Encourages the use of a consistent design system to avoid the "AI aesthetic" and ensure a professional appearance.
• Accessibility: Ensures that every component meets WCAG 2.1 AA standards, providing keyboard navigation, ARIA labels, and focus management.
• Responsive Design: Recommends mobile-first design and testing at various breakpoints for a consistent user experience across devices.
• Loading and Transitions: Suggests using skeleton loading for content and optimistic updates for perceived speed.

Quick Start

Run the m-frontend-ui-engineering skill to generate a new UI component structure following best practices.