---

name: frontend-ui-engineering description: "Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone." allowed-tools: Read, Glob, Grep

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 consistent patterns
• Brief note on new tokens or patterns added to the design system