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-8999) 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

• Navigate to the development server

• Screenshot the initial state

• Analyze the page snapshot for expected elements

• Test interactions if the task involves interactive behavior

• Check console for JavaScript errors

• 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/"] } }

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.