Web validation

Skill krzemienski/deepest-plan-plugin/skills/web-validation

Web platform validation patterns. Uses Playwright MCP, agent-browser CLI, or Chrome DevTools to exercise real dev servers. Captures screenshots, console logs, network responses, DOM snapshots. Cited as platform_skill on web-platform validation gates in deepest-plan output.From its SKILL.md

Install

npx -y skills add krzemienski/deepest-plan-plugin --skill web-validation

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

4.4 KB, as published. Nobody here has run it

Web Validation

Scope

Browser-based validation of web apps (React, Vue, Svelte, Next.js, Astro, Remix, SvelteKit, etc.). Does NOT handle API-only validation (use api-validation), fullstack orchestration (use fullstack-validation), or accessibility deep-dive (use accessibility-audit).

Preflight

Dev server responding at expected port (curl -sf http://localhost:PORT/)
.env.local loaded with required keys
Browser automation available (Playwright MCP, agent-browser CLI, or Chrome DevTools)

Execution Patterns

Via Playwright MCP (preferred if MCP available)

playwright.navigate(url)
playwright.click(selector)
playwright.fill(selector, value)
playwright.screenshot(path=e2e-evidence/vgN-*.png)
playwright.get_console_logs() → capture to file

Via agent-browser CLI

agent-browser open http://localhost:3000/signup
agent-browser snapshot -i -c           # interactive elements only
agent-browser fill @email "[email protected]"
agent-browser click @submit
agent-browser screenshot e2e-evidence/vgN-after-submit.png
agent-browser get text @heading > e2e-evidence/vgN-heading.txt

Via Chrome DevTools MCP

Use for performance traces, network waterfalls, heap snapshots, DOM inspection.

Evidence Capture

What	Command	File
Screenshot	`page.screenshot()` / `agent-browser screenshot`	`e2e-evidence/vgN-*.png`
Console logs	`page.on('console')` → jsonlines	`e2e-evidence/vgN-console.jsonl`
Network response	`page.on('response')` → dump	`e2e-evidence/vgN-network.jsonl`
DOM snapshot	`page.content()` or snapshot tool	`e2e-evidence/vgN-dom.html`
Responsive	Resize viewport then screenshot	`e2e-evidence/vgN-w320.png`, `-w768`, `-w1280`

PASS Criteria Patterns

Good:

"Screenshot shows dashboard with 3 metric cards and heading text Welcome, {email}"
"Zero console errors (console.jsonl count where level='error' == 0)"
"POST /api/items response JSON has items.length >= 1 and every item has id + title"
"axe-core report: 0 violations with impact=serious OR impact=critical"

Bad (reject):

"Page loads" → what do you see?
"Looks good" → what specifically?
"No crashes" → absence of crash ≠ correctness

Gate Template

<validation_gate id="VG-N" blocking="true" platform="web"
                 protocol="functional-validation"
                 platform_skill="web-validation"
                 verdict_by="gate-validation-discipline">
  <preflight skill="preflight">[dev server up + env loaded]</preflight>
  <execute>[agent-browser or Playwright sequence]</execute>
  <capture>[screenshots + console + network to e2e-evidence/vgN-*]</capture>
  <pass_criteria>[specific, observable, measurable]</pass_criteria>
  <review>[Read tool on .png files; jq on .jsonl]</review>
  <verdict>PASS → next | FAIL → error-recovery → re-run</verdict>
  <mock_guard skill="no-mocking-validation-gates">
    No jest.mock, no MSW, no Testing Library isolation. Real dev server only.
  </mock_guard>
</validation_gate>

Common Failure Patterns

Symptom	Likely cause	Fix
Screenshot blank / white	Hydration error or route 404	Check console + network before UI test
Selector not found	React still loading	Use `waitFor` with text condition, not sleep
Network response empty	CORS block	Check preflight OPTIONS; API on correct port
Console has "Hydration mismatch"	SSR + client drift	Fix SSR output before visual test
Responsive breaks	CSS assuming viewport	Test at 320/768/1280 in every visual gate

Rules

Always real dev server — never mock fetch, never MSW
Always capture screenshot + console + network for each gate
Always read the screenshot (describe UI state) — don't just assert it exists
Always cite specific network responses or text content in verdicts

Security Policy

Browser automation uses authenticated sessions via real cookies / tokens. Never commit screenshots of authenticated screens to public repos. e2e-evidence/ must be gitignored.