← ClaudeAtlas

visual-verificationlisted

Automated visual regression check via Playwright — 5 DOM checks × 3 viewports (375/768/1280). Produces pass/fail grid + screenshot paths under .arbiter/evidence/visual/.
LucaDominici/arbiter · ★ 0 · AI & Automation · score 72
Install: claude install-skill LucaDominici/arbiter
# Visual Verification Skill Invoke when a UI change needs visual validation before marking a task complete. ## Usage ```bash node scripts/visual-verify.mjs --url http://localhost:3000 --task-id 700 # Graceful skip when Playwright not installed: node scripts/visual-verify.mjs --skip-if-missing --url http://localhost:3000 --task-id 700 ``` ## What it checks (5 checks × 3 viewports = 15 datapoints) | # | Check | Description | | --- | --------------------- | ------------------------------------------------ | | 1 | `page-title` | `<title>` element present and non-empty | | 2 | `no-layout-overflow` | body scroll width ≤ viewport width | | 3 | `primary-cta-visible` | At least one `<button>` or `<a>` element visible | | 4 | `no-console-error` | No console errors on page load | | 5 | `screenshot` | Full-page screenshot captured for review | Viewports: **375px** (mobile), **768px** (tablet), **1280px** (desktop). ## Output schema Results written to `.arbiter/evidence/visual/<task-id>/<page>.json`: ```json { "url": "http://localhost:3000", "task_id": "700", "timestamp": "2026-05-17T11:00:00Z", "viewports": [ { "width": 375, "checks": { "page-title": { "pass": true }, "no-layout-overflow": { "pass": true }, "primary-cta-visible": { "pass": false, "detail": "no visible CTA found" }, "no-con