Frontend UI Engineering

Problem

Many front-end screens work, but visual hierarchy, interaction states, and accessibility are improvised: indigo gradients, oversized radii, generic card grids, placeholder copy, missing loading, error, and empty states, and weak keyboard or screen-reader support. These are not just component bugs; they come from missing engineering constraints.

How the skill works

The Frontend UI Engineering skill turns production-quality UI into repeatable checks:
- Component architecture: colocate component files, prefer composition over prop configuration, keep components short, and avoid prop drilling beyond three levels.
- Design system: use the project's existing spacing scale, type hierarchy, and semantic tokens such as text-primary and bg-surface; do not invent arbitrary hex values or padding.
- Accessibility: verify WCAG 2.1 AA behaviors for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states; never use color as the only state signal.
- Responsive and state coverage: design mobile first, test at 320px, 768px, 1024px, and 1440px, and handle loading, error, empty, and transition states.

Boundaries

It fits new components, UI changes, and visual or UX fixes, but it does not replace real design decisions. If the project lacks design tokens, define or adopt defaults instead of adding generic “AI-style” styling.