/frontend-layout-implementer

name: frontend-layout-implementer
description: 'Implement approved React/Next.js design specs using existing CSS Modules, Redux, TanStack, and Axios conventions. Route uninspected designs to intake and resolve product decisions before coding. Excludes unrelated stacks and styling systems.'
id: 'agents.skills.frontend-layout-implementer.skill'
title: 'Frontend Layout Implementer'
doc_type: 'skill'
layer: 'skill'
status: 'active'
publishable: true
local_only: false
skill: 'frontend-layout-implementer'
tags:
    - 'agents/skill-package'
    - 'frontend/implementation'
    - 'frontend/layout'
parent: []
related:
    - '[[common/react-performance-rules]]'
    - '[[skills/design-screenshot-spec/references/product-behavior-review|Product Behavior Review]]'
    - '[[common/frontend-design-system-rules|Frontend Design System Rules]]'
    - '[[common/component-substitution-rules|Component Substitution Rules]]'
    - '[[skills/frontend-layout-implementer/references/implementation-rules|Implementation Rules]]'
    - '[[common/target-stack-policy|Target Stack Policy]]'
    - '[[common/approved-patterns|Approved Patterns]]'
    - '[[common/anti-patterns|Common Anti-Patterns]]'
    - '[[common/css-modules-specificity-rules|CSS Modules Specificity Rules]]'
    - '[[common/form-feedback-rules|Form Feedback Rules]]'
    - '[[common/navigation-ux-rules|Navigation UX Rules]]'
    - '[[common/data-visualization-rules|Data Visualization Rules]]'
    - '[[common/icon-quality-rules|Icon Quality Rules]]'
    - '[[common/mobile-responsive-rules|Mobile Responsive Rules]]'
    - '[[common/agent-loop-policy|Agent Loop Policy]]'
    - '[[common/verification-loop-rules|Verification Loop Rules]]'
    - '[[skills/loop-workflow-planner/SKILL|Loop Workflow Planner]]'
    - '[[skills/design-screenshot-spec/SKILL|Design Screenshot Spec]]'
    - '[[skills/frontend-design-director/SKILL|Frontend Design Director]]'
    - '[[skills/frontend-architecture-planner/SKILL|Frontend Architecture Planner]]'
    - '[[skills/frontend-linter-manager/SKILL|Frontend Linter Manager]]'
    - '[[skills/frontend-quality-reviewer/SKILL|Frontend Quality Reviewer]]'
    - '[[skills/frontend-visual-qa/SKILL|Frontend Visual QA]]'
    - '[[skills/project-context-adapter/SKILL|Project Context Adapter]]'
depends_on:
    - '[[AGENTS|Canonical Agent Policy]]'

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 from supplied links or

screenshots. Use `design-screenshot-spec` first, then resume requested code work.

• The user asks only for live design inspection, canvas edits, or whiteboard work.
• 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/approved-patterns.md` and relevant anti-pattern rules. 5. Read `common/css-modules-specificity-rules.md` for CSS Modules changes. 6. Read conditional UX rules only when the touched surface needs them: forms, navigation, data visualization, icons, or mobile responsive behavior. 7. Read `common/agent-loop-policy.md` and `common/verification-loop-rules.md` when measurable iteration or bounded retry is required. 8. Read relevant project overlays when present: stack, architecture, styling, verification, state, data-fetching, build, and workspace profiles. 9. Read the `Design Implementation Spec`, `Design Direction Contract`, and supplied visual references. 10. Read affected source files, styles, components, routes, and configs. 11. Read `references/implementation-rules.md` when present.

Do not read generated `dist/**` during normal runtime.

When shared UI or compatible component wrappers are in scope, read `common/frontend-design-system-rules.md` and `common/component-substitution-rules.md`. Apply purpose-specific naming from `common/frontend-implementation-boundaries.md` to changed project-owned code.

When React/Next work changes loading, imports, subscriptions or expensive rendering, read the relevant section of `common/react-performance-rules.md`.

Tool Contract

• Use Project Context MCP when available; otherwise read `project/**` and source files directly.
• Use Design Spec MCP when available; otherwise use the supplied spec text or user-approved local artifact.
• Use Visual Reference MCP when available; otherwise use attached or local image files supplied by the user.
• Use `context7` for React, Next.js, Redux, TanStack, Axios, TypeScript, or build-tool docs when implementation depends on current behavior.
• Activate `openai_platform_docs` only when current OpenAI API or ChatGPT Apps SDK behavior affects the implementation.
• Use `mdn` for current HTML, CSS, Web API, accessibility, and compatibility facts.
• Use rendered visual QA only when screenshot comparison, viewport evidence, overflow checks, or visible state verification are in scope.
• Use Visual Diff MCP when available during final visu