Browser Verify

Browser Verification Skill

Purpose

Autonomously verify that a feature, page, or fix is working correctly in a real browser session — without requiring Phill to manually open a browser.

This skill produces a structured PASS/FAIL report that satisfies the verification-gate.md requirement.

Tool Selection

Primary tool: Chrome DevTools MCP for most verifications. Fallback: Claude in Chrome if DevTools tab is not open.

Verification Protocol

Execute all 5 steps. Do not skip steps. Report each result immediately.

Step 1 — Navigate

mcp__chrome-devtools__navigate_page(url)
  OR
mcp__Claude_in_Chrome__navigate(url)

• Target: the feature URL (production: https://synthex.social/... or dev: http://localhost:3000/...)
• Wait for page to fully load before proceeding

Step 2 — Screenshot

mcp__chrome-devtools__take_screenshot()
  OR
mcp__Claude_in_Chrome__upload_image (use read_page for content)

• Capture full-page screenshot
• Visually confirm: expected UI elements are present and laid out correctly
• Flag: blank areas, 404 content, loading spinners that haven't resolved, overlapping elements

Step 3 — Console Check

mcp__chrome-devtools__list_console_messages()
  OR
mcp__Claude_in_Chrome__read_console_messages()

FAIL conditions (any of these = verification FAIL):

• [Error] messages (unless pre-existing, documented in .claude/memory/compass.md)
• Unhandled promise rejections
• React hydration errors (Hydration failed, Text content does not match)
• Auth errors that shouldn't appear (401, 403, Unauthorised)
• Network failures to required API endpoints

PASS conditions:

• Zero error-level messages
• Warnings only (acceptable — do not fail on warnings)

Step 4 — Network Check

mcp__chrome-devtools__list_network_requests()
  OR
mcp__Claude_in_Chrome__read_network_requests()

Check for:

• Any API calls returning 5xx (server errors) → FAIL
• Any API calls returning 401/403 unexpectedly → FAIL
• Key data endpoints loaded successfully (200/304) → PASS
• No CORS errors → PASS

Step 5 — Element Verification

For the specific feature being verified, confirm expected elements are present:

mcp__chrome-devtools__take_snapshot()
  OR
mcp__Claude_in_Chrome__find(selector)

Check the specific observable outcomes from the verification checklist:

• Required text, headings, or labels visible
• Interactive elements (buttons, links) present and not disabled unexpectedly
• Data sections populated (not empty/loading)
• No error state banners when data should be present

Authenticated Route Protocol

If the target URL requires authentication (/dashboard/...):

1. First use browser-auth skill to establish a session
2. Confirm auth cookie is present
3. Then proceed with Steps 2–5 above

If auth is not available in the current browser session:

• Report: "Authentication required — run browser-auth skill first, then retry"

Output Format

Always produce this report:

## Browser Verification Report — [Feature Name]

**URL:** [verified URL]
**Timestamp:** [HH:MM DD/MM/YYYY]
**Environment:** production (synthex.social) | development (localhost:3000)

### Screenshot
[Description of what was visible — or attach screenshot]

### Console
- Errors: [count] — [list errors, or "None"]
- Warnings: [count] (not blocking)

### Network
- Failed requests: [count] — [list, or "None"]
- Key API responses: [list with status codes]

### Element Check
- [Expected element 1]: ✅ Present | ❌ Missing
- [Expected element 2]: ✅ Present | ❌ Missing

---
### Result: ✅ PASS | ❌ FAIL

**PASS criteria met:** [list which criteria passed]
**Blockers (if FAIL):** [exact error messages or missing elements]
**Next action:** [only if FAIL — specific remediation step]

Pass / Fail Rules

Replacing the Human Verification Gate

After producing a PASS report, replace the standard verification checklist with:

✅ Browser verification PASSED — autonomous check via browser-verify skill.
[Paste the Browser Verification Report above]

A PASS report from this skill satisfies verification-gate.md requirements for UI/feature changes. The human review gate (PR merge) still applies.