cyberneticlibrary
← library

Implement frontend from design specs

franksubagentsetup L2★0
seanng/hq ↗
What it does

Implement Next.js frontend code from design specs and PRDs

Best for

Production Next.js component implementation from PRDs that faithfully follows design specs, validated in real browser across mobile/tablet/desktop viewports with zero console warnings.

Inputs
  • · PRD with acceptance criteria
  • · design specs (reference HTML, design guides)
  • · Tailwind CSS tokens
Outputs
  • · src/app/[feature]/page.tsx
  • · src/components/[Feature].tsx
  • · CSS modules with Tailwind
  • · component tests
Requires
  • · Next.js 15+
  • · React 19
  • · Tailwind CSS
  • · Playwright (via agent-browser)
  • · Chrome DevTools MCP
Preconditions
  • · Design specs from Faye if visual work
  • · PRD acceptance criteria defined
  • · Next.js project initialized
Failure modes
  • · Server/Client component boundary wrong if hydration mismatch
  • · Responsive broken if only desktop tested
  • · Console errors if event handler not bound
Trust signals
  • · Browser validation loop (agent-browser for fast iteration)
  • · Viewport testing (375px/768px/1280px)
  • · accessibility snapshot checks
  • · Chrome DevTools final QA (console clean, Lighthouse audit)
  • · Design spec fidelity verification