Skill

browser-verification

Automatically verify UI changes in a real browser after implementation. Integrated into the /work workflow — checks visual elements, interactions, and console errors using Playwright. Not a standalone skill.

Install

npx claudepluginhub srstomp/pokayokay --plugin pokayokay

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Automatically verify UI changes in a real browser after implementation.

Supporting Assets

references/configuration.mdreferences/testability-detection.mdreferences/verification-flow.md

SKILL.md

Similar Skills

kotlin-ktor-patterns

Provides Ktor server patterns for routing DSL, plugins (auth, CORS, serialization), Koin DI, WebSockets, services, and testApplication testing.

everything-claude-code

163.2k

deep-research

Conducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.

everything-claude-code

163.2k

inventory-demand-planning

Provides demand forecasting, safety stock optimization, replenishment planning, and promotional lift estimation for multi-location retailers managing 300-800 SKUs.

everything-claude-code

163.2k

Stats

Parent Repo Stars4

Parent Repo Forks0

Last CommitFeb 8, 2026

Actions

View Source View Plugin View on GitHub View README

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.