| name | verify-frontend |
| description | Verify UI changes by capturing Playwright screenshots and attaching them to the PR (GitHub-native, no third-party hosts). Use when a change touches the frontend. |
Verifiable frontend layer: when a change touches the UI, prove it renders with Playwright screenshots and attach them to the PR. This is the visual half of the Test phase — "tests pass" is not enough for frontend work.
When this runs
During Phase 5 (Test) of /run, inside the goal-loop's verify step, or standalone. Trigger it when the diff touches frontend: files matching *.tsx, *.jsx, *.vue, *.svelte, *.html, *.css, *.scss, or component/route directories. If the diff is backend-only, skip (note "no frontend changes").
Steps
- Find the affected views. From the changed files, infer the routes/pages to capture (e.g. an edited
app/dashboard/page.tsx → /dashboard). Default to / if routes can't be inferred. Keep the list small and relevant (token-discipline).
- Run the app. Start the dev server (use the project's
run/dev command, or a project skill if one exists). Wait until it serves.
- Capture. Run the bundled Playwright script against the affected routes at desktop + mobile viewports:
node bin/screenshot.mjs --base http://localhost:3000 --paths / /dashboard /login
It writes PNGs to .loobster/screens/ and exits non-zero if a page 4xx/5xx's or logs console/page errors — so a broken frontend BLOCKS the verify step (a real gate, not just pretty pictures). Requires npm i -D playwright && npx playwright install chromium in the target repo.
- Attach to the PR — GitHub-native, no other accounts. Two ways:
- CI artifacts (default, zero repo clutter): copy
templates/playwright-verify.yml into your repo's .github/workflows/; it runs this on the PR and upload-artifacts .loobster/screens/ — downloadable from the PR's Checks tab. It also posts a sticky PR comment with the result table + artifact link.
- Inline images: commit
.loobster/screens/*.png to the PR branch and embed them in a PR comment via https://raw.githubusercontent.com/<owner>/<repo>/<branch>/.loobster/screens/<file>.png. Same repo, no external host. (Clean the dir on merge, or keep it on the branch only.)
- Report. Summarize: which views were captured, any failures (HTTP/console errors), and the attachment location. A failure is a FAIL for the Test/Secure gate.
Independent verification
Per the "Never self-verify" rule in run.md, the agent that wrote the frontend does not judge its own screenshots. Either (a) the CI workflow runs this — CI is inherently independent — or (b) spawn a separate verifier subagent, hand it the captured PNGs + what the change was supposed to do, and let it report whether the UI is correct. The implementer captures; an independent judge assesses.
Notes
.loobster/screens/ should be gitignored unless you intentionally commit images for the inline-attach path.- This is a verification layer — it does not modify the app. It renders the real UI and proves the change works.
- For the goal-loop, a frontend signal/finding can be backed by a screenshot the whole team sees on the PR.
