Screenshot Regression Loop

Start the "Screenshot Regression Loop" loop.

Goal: visual regression diff is within approved tolerance
Max iterations: 8
Between iterations run: npx playwright test --grep @visual || npm run test:visual
Exit when: no unapproved visual diffs remain

Step 1: Capture UI screenshots, diff against baselines, fix drift or get approval to update baselines.

## Before you start

Connect plugins:
- GitHub (required) — Read branches, PRs, reviews, checks, workflow runs, and source diffs.
- Browser / Web access (required) — Open pages, inspect live state, collect evidence, and verify changes.
- Figma (required) — Inspect designs, dimensions, assets, and handoff notes.

Attach skills:
- Loop runner (required) — Self-pace iterations, run the check between passes, and stop only on the exit condition.
- Code change + local verification (optional) — Edit code safely, run commands, and keep changes scoped.
- PR review (optional) — Inspect diffs for correctness, edge cases, tests, naming, and risk.
- Approval workflows (optional) — Keep outbound actions in draft or approval states when risk is non-trivial.
- Test repair (optional) — Run tests, triage failures, and avoid weakening the suite.
- Visual design QA (optional) — Compare implementation against visual expectations and capture regressions.
- Browser QA (optional) — Exercise product flows, capture visual evidence, and verify fixes in-browser.

Self-pace this loop. After each iteration, run the check command, read the output, and only continue if the exit condition is not met. Stop when the exit condition passes or max iterations is reached. Give a short status update each pass.