← ClaudeAtlas

verify-livelisted

Drive proofcut's web UI in a real headless browser over CDP — clicks with dwell and hit-testing, drags, viewport overflow probes, console capture, canvas readback. Use whenever a UI change has to be verified the way docs/plans/STUDIO.md requires, rather than through DOM stubs or the HTTP tests.
tydude001/proofcut · ★ 4 · Web & Frontend · score 60
Install: claude install-skill tydude001/proofcut
# verify-live `tests/test_webui_http.py` speaks HTTP to a real socket and proves routing. It cannot prove a gesture works. docs/plans/STUDIO.md's bar for every UI item is the real project in a real browser, every click driven at **0ms and ~120ms** dwell — a rule that exists because a fix once read green at 0ms and was dead in the hand (HISTORY.md § The dwell-timing lesson). `cdp.mjs` is that harness, kept here because it has been rebuilt from scratch in more than one session. Node 24's global `WebSocket`, no dependencies. ## Run it ```sh # 1. serve a project (a COPY of anything real — check it first with film-check) uv run proofcut -C /path/to/proj web --port 8793 # 2. a browser to drive, left running between calls ~/.cache/ms-playwright/chromium_headless_shell-*/chrome-headless-shell-linux64/chrome-headless-shell \ --remote-debugging-port=9444 --headless --disable-gpu --no-sandbox \ --window-size=1400,900 about:blank & # 3. drive it — each call attaches to the same page, so state persists node cdp.mjs goto http://127.0.0.1:8793/ node cdp.mjs eval '(() => document.querySelector("#truth-strip").textContent)()' node cdp.mjs click "#finish-render" 120 # dwell in ms; 0 and ~120 both node cdp.mjs dragxy 81 327 145 326 120 # press, move in steps, release node cdp.mjs viewport 700 900 # resize; two sweeps (see below) node cdp.mjs key "?" - 120 # a real key press; `-` = no focus target node cdp.mjs key Escape "#agent-prompt" 0