Browser Verification

Browser Verification Skill

Automatically verify UI changes in a real browser after implementation.

When This Skill Is Used

This skill is triggered during the /work workflow after the implementer completes a task that modifies UI-related files. It is NOT a standalone skill - it's integrated into the work loop.

Purpose

Catch visual and functional issues before code review by testing in a real browser. This prevents:

• CSS issues that look fine in code but break in browser
• JavaScript errors that only appear at runtime
• Responsive/layout issues
• Missing visual elements

Testability Checks

Browser verification only runs when ALL three conditions are met:

1. Browser Tools Available

Must have either:

• Playwright MCP tools (mcp__plugin_playwright_*)
• Chrome Extension tools (mcp__claude-in-chrome__*)

2. Server Running

Must have an HTTP server on a dev port (3000-9999) or ability to start one via package.json scripts.

3. Renderable Files Changed

Task must have modified files that affect browser output:

• .html, .css, .scss, .less
• .tsx, .jsx, .vue, .svelte
• Template files (.hbs, .ejs, .pug)
• Files in components/, views/, ui/, pages/

If any condition fails, verification is silently skipped.

Verification Process

1. Navigate to the development server
2. Screenshot the initial state
3. Analyze the page snapshot for expected elements
4. Test interactions if the task involves interactive behavior
5. Check console for JavaScript errors
6. Report pass/fail with evidence

Advisory Behavior

This is NOT a hard gate. If verification suggests issues but the user believes the implementation is correct:

• User can provide a reason for skipping
• Skip reason is logged in task notes
• Work continues to spec review with warning flag

Configuration

Projects can customize in .pokayokay.json:

{
  "browserVerification": {
    "enabled": true,
    "portRange": [3000, 9999],
    "additionalPaths": ["src/templates/"],
    "excludePaths": ["src/email-templates/"]
  }
}

When NOT to Use

• Unit/integration testing — Use testing-strategy for test architecture; this skill verifies visual output in a browser
• API-only changes — Browser verification is for UI changes; backend-only tasks skip this automatically

Reference Documents

• references/testability-detection.md - How to determine if verification should run
• references/verification-flow.md - Step-by-step verification process
• references/configuration.md - Project-level configuration options

Integration Point

yokay-implementer → browser-verify → yokay-spec-reviewer → yokay-quality-reviewer → complete

Browser verification runs AFTER implementation and BEFORE spec review.

Runtime Notes

• Claude Code: dispatch yokay-browser-verifier via the Task tool with subagent_type: "pokayokay:yokay-browser-verifier".
• Codex: there is no subagent dispatch. Execute the agent's role inline — read the corresponding agents/yokay-<name>.md and follow its Behavioral Defaults, Critical Rules, and Output Contract directly in the current session.