Rule

For ANY change to the PWA (preview.html, index.html, preview-.html, sr-.css, preview-system.css, sr-*.js), the workflow is:

1. Pre-render — screenshot current desktop + mobile state BEFORE editing (baseline)
2. Edit + deploy
3. Render — screenshot deployed result at desktop (≥1024w) + mobile (414w iPhone widths)
4. Verify every claim of "fixed / shipped / works": click flow makes sense, no overlap with status bar / Dynamic Island, scroll behavior stable, theme + density toggles produce visible delta, no horizontal overflow, all interactive targets ≥44×44pt for touch
5. Only then declare done

Why (Joseph 2026-05-09 PM, verbatim):
> "You really need to be more locked in. ... You better not be building the mobile version of this flying completely blind. You put eyes on everything you do for both versions and verify every click delivers a top of class experience and delivers actual value to the end user. Where everything sits and delivering an experience that delivers the most amazingly smooth and logical and beautiful flow that exists in the market today."

Caught me twice in the same session: theme toggle clarification + density toggle build that looked-right-on-source but had real iOS rendering bugs (header drifting on scroll, content hidden behind iPhone 15 Pro Max Dynamic Island).

How to apply (workflow constraints)

Render path — Anthropic policy blocks Chrome MCP from navigating to claude.ai, console.anthropic.com, brief.josephbowens.com, *.pages.dev, file://, localhost, and 127.0.0.1. Confirmed 2026-05-09. The ONLY way to render the PWA for verification is:

• Joseph keeps brief.josephbowens.com/preview open in a tab in his Mac Chrome (one tab, persistent across sessions).
• Agent uses mcp__Claude_in_Chrome__resize_window (not blocked) to flip the Chrome window between 1280×800 desktop and 414×896 mobile widths.
• Agent uses mcp__computer-use__screenshot (Chrome is "read" tier — visible, no clicks) to capture rendered state.
• After every edit + deploy, repeat resize → screenshot at both widths.

If Joseph closes the tab the agent must say so explicitly and ask him to reopen — never silently skip verification.

For actual phone testing (final-mile verification):

• iPhone Mirroring is installed on Joseph's Mac. He can mirror his phone and the agent screenshots it.
• Or Joseph drops a phone screenshot in chat. Agent reads images natively.

Behavioral test (if about to violate, abort)

• About to write "shipped / fixed / live" without having rendered the deployed output? ABORT. Render first.
• About to claim "the layout works at both widths" without screenshotting both? ABORT. Screenshot both.
• About to ship a UI change without baseline screenshot first? Acceptable IF Joseph said go fast — but record that no baseline was taken so before/after can't be compared.
• About to declare a click flow "smooth" without having clicked through it? ABORT. If clicks aren't reachable via my tools (browsers are read-tier), explicitly say so and ask Joseph to verify the flow himself.

Anti-patterns this kills

• "Source looks correct, deploying" — source can lie about rendered state
• Reading CSS and asserting "math works" without rendering
• Citing grep -c "feature" count as verification
• Claiming "should work after hard refresh" instead of confirming
• Skipping mobile width because "responsive CSS handles it"

Companion to existing rules

• R-22 absolute truth + anti-shortcut → no source-only verification
• R-25 no unnecessary blockers → request access (computer-use) instead of asking Joseph to retype/screenshot
• This rule is R-26 in the master registry