frontend-layout-implementer

# Frontend Layout Implementer ## Purpose Implement a `Design Implementation Spec` or `Design Direction Contract` in a React or Next.js project while respecting existing CSS Modules, Redux, TanStack, Axios, architecture, styling, decomposition, UX gates, and verification conventions. When the user asks to keep iterating until measurable visual, lint, build, or route acceptance criteria pass, implementation must follow a Loop Workflow Contract or hand off to `loop-workflow-planner` before editing. ## When To Use - The user asks to build a screen, section, component, or static page from a `Design Implementation Spec`. - The user supplies screenshot-derived design material and asks for code in the current supported frontend project. - The implementation target is within React, Next.js, CSS Modules, Redux, TanStack, or Axios scope. ## When Not To Use - The design intent has not been converted into a spec and the source is only screenshots. Use `design-screenshot-spec` first. - The user asks for live Figma inspection, Figma MCP, canvas edits, or Figma whiteboard workflows. - The project is outside the supported target stack unless the user explicitly changes scope. - The task is unrelated to frontend rendering or layout. ## Required Context 1. Read `AGENTS.md`. 2. Read `common/target-stack-policy.md`. 3. Confirm the classified task is `frontend-layout`, `feature/development`, `bugfix`, `refactor`, or `optimization` for a rendered React or Next.js surface. 4. Read `common/a...