ui-engineering

What problem does it solve?

This Skill addresses the challenge of constructing frontend components with disciplined architecture, ensuring structural integrity, accessibility, and maintainability, rather than relying on improvised markup.

Core Features & Use Cases

• Component Architecture: Guides the composition of components from smaller, reusable units.
• Layout Strategy: Provides decision trees for selecting between CSS Grid and Flexbox based on arrangement needs.
• State Management: Offers a strategy for determining the appropriate ownership of component state.
• Responsive Design: Outlines a mobile-first progression for adapting UIs across different screen sizes.
• Accessibility Standards: Enforces adherence to WCAG guidelines for interactive elements, forms, images, and color contrast.
• Animation & Motion: Defines best practices for using animation to enhance user experience without causing distraction.
• Form Architecture: Details best practices for form validation, field layout, and submission states.
• Rendering Performance: Focuses on critical path optimization and lazy loading strategies.
• Use Case: When building a new dashboard widget, this skill will guide you through choosing the right layout (Grid vs. Flexbox), deciding where to manage its state, ensuring it's responsive, and making it accessible to all users.

Quick Start

Use the ui-engineering skill to construct a responsive card component with accessibility features.