frontend-ui-engineeringlisted

# Frontend UI Engineering End-to-end UI implementation: structure, styling, responsive behavior, state, and accessibility. Extends `frontend-ui-accessibility` with architecture and design-system discipline. ## When to use - New page, form, or interactive component - Refactoring UI for consistency or responsiveness - Applying or extending a design system ## When not to use - Backend-only change - Accessibility audit only (use `frontend-ui-accessibility`) - Full visual redesign exploration (consider design consultation workflows) ## Workflow 1. **Inventory** — existing components, tokens, patterns to reuse 2. **Structure** — semantic HTML; split presentational vs container components 3. **Layout** — mobile-first breakpoints; avoid fixed widths that break small screens 4. **State** — local vs shared; minimize prop drilling; document async/loading/error UI 5. **Styling** — tokens (color, spacing, type); no magic numbers scattered 6. **A11y** — keyboard, focus, labels, contrast (see `frontend-ui-accessibility`) 7. **Verify** — key viewports; critical user paths; no console errors ## Checklist | Area | Check | |------|-------| | Components | Single responsibility; reusable primitives | | Responsive | Works at 320px and desktop; touch targets adequate | | Loading/empty/error | All three states designed | | Performance | Avoid unnecessary re-renders; lazy-load heavy assets | | A11y | Focus order, ARIA only when needed, form labels | ## Output - Implemented components with