Web Visual Verification

Schema authority: when verifying that data renders correctly, the source-of-truth field names come from _shared/domain-primitives.md. E.g. asserting unit.illustrations.length >= 1 matches §11's Coverage Floor.

Reference implementation: d:/GitHub/ai-workshop/scripts/verify-*.mjs for production verify-script patterns (multi-viewport, console-error capture, screenshot-on-fail).

This skill produces Playwright-based runtime verification scripts that drive the actual rendered site and answer "does it behave correctly?". The skill emerged from a teaching-website project but applies to any static or dynamic web UI.

When to Invoke

• After any interaction-layer change (Stage 4 interactions, sidebar logic, theme, zoom).
• After any visual asset change (Stage 5 — illustrations, screenshots).
• After any layout / CSS change ("the sidebar collapsed weirdly", "the modal lost its backdrop").
• Before tagging a release or handing off a corporate edition.
• When the user asks "did that change break anything else?".

Do NOT invoke for file/data consistency checks (use web-content-audit).

The Four Script Roles — Use the Right One