Playbooks / Fix a live page without breaking it (diagnose, scope, edit, verify at real viewports, deploy through the gate)

Fix a live page without breaking it (diagnose, scope, edit, verify at real viewports, deploy through the gate)

Fix a live page without breaking it (diagnose, scope, edit, verify at real viewports, deploy through the gate)

Ready now

How to repair a live page: reproduce at real viewports, numeric overflow checks in Playwright at 390 px, scoped edits, red-highlight budget, screenshot QA read by the AI, Safari verification, then deploy through the gate.

Kit

No separate kit. The playbook is self-contained.

You need

AccountWhyFree or paidPlan
Claude Code (Anthropic Claude Pro or Max)The AI operator every system runs through. Skills, hooks, memory, MCP servers and the Brain plugin all load inside Claude Code.PaidClaude Pro (20 USD/mo) works for light use; Max (100 USD or 200 USD/mo) for daily multi-hour sessions. Anthropic terms require each user to hold their own subscription; never share a login.
Playwright + headless Chrome (and Safari for the final check)Renders pages to PNG for visual QA, drives the dashboard verification protocol, captures library stills, renders HTML titles and animations offline.FreeFree. Google Chrome installed for headless screenshots; Playwright installs its own Chromium and WebKit.
VercelHosts every site, funnel, dashboard and serverless API (subscribe, book, attribution, AC proxy). Runs the cron jobs declared in vercel.json.Free tier availablePro (20 USD/mo per seat). The Hobby plan forbids commercial use, so any client site or paid product must be on Pro. Hobby is fine for a personal portfolio.

What you bring

  • Your page link and a phone screenshot of what is wrong, when a page breaks

The steps

  1. Establish which deploy is live before touching code
  2. Diagnose with the four-cause check, at a real viewport
  3. Scope it: page element or site element?
  4. Edit with targeted changes, never regex on HTML blocks
  5. Verify with numbers, then eyes, at both widths
  6. Deploy through the gate, then verify LIVE again

Goes further if you have already built Install hooks and gates so your rules enforce themselves. You can build this without it.

Get the full playbook

Plug in your AI Read it in the Library

Part of: Build your website