← ClaudeAtlas

frontend-layout-implementerlisted

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.
ytvee-dev/webdev-agent-kit · ★ 5 · Web & Frontend · score 78
Install: claude install-skill ytvee-dev/webdev-agent-kit
# 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