loops!Visual Regression Until Match
Run Playwright or Percy visual snapshots on UI changes; fix unintended diffs until baselines match intentionally.
2 copies · 10 views
by loops!
Use loop copies the kickoff. Share copies the loop link. Open in Cursor / Claude Code only pre-fill that prompt — they do not install hook files. Download loop saves a README and kickoff into .cursor/loops/visual-regression-until-match/ — no hooks required. Full install guide
- Do not modify the check command or exit criteria to force success
- Do not skip, disable, or bypass checks to pass the exit condition
- If stuck after several iterations, stop and report blockers instead of gaming metrics
- Do not weaken, delete, or skip tests to make the suite pass
- Do not replace real assertions with trivial always-pass tests
- Prefer fixing production code over patching tests to go green
Two separate pieces
- Kickoff prompt — tells the agent the goal, check command, exit condition, and how to self-pace between passes.
- 1
Copy or open the kickoff prompt
Click Use loop to copy the kickoff into your clipboard. Open in Cursor and Open in Claude Code only open the agent with that prompt — they do not configure automation for you.
- 2
Paste into your coding agent
Start a chat in Cursor, Claude Code, Codex, or any agent. Paste the kickoff. The prompt includes the goal, iteration limit, shell check, and first step.
- 3
Agent self-paces until done
The agent runs the loop: act → run check command → read output → repeat until the exit condition is met or max iterations is reached. No install step is required for prompt-only loops.
Full guide with Cursor /loop notes: How to install loops
1. Run visual tests
Run visual regression tests. List screenshots that differ from baseline with component names.
npx playwright test --grep @visual
2. Fix or approve
If diffs are bugs, fix CSS/markup. If intentional, update snapshots only after verifying in report.
Start the "Visual Regression Until Match" loop. Goal: visual regression suite passes with intentional UI only Max iterations: 6 Between iterations run: npx playwright test --grep @visual Exit when: visual tests exit 0 Step 1: Run visual tests. Fix unintended UI diffs; update baselines only for deliberate design changes. 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.
Related loops
Start the "Build Until Green" loop. Goal: production build succeeds Max iterations: 10 Between iterations run: npm run build Exit when: npm run build exits 0 Step 1: Run the build. If it fails, fix the first error, then repeat until green. 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.
Start the "Coverage Until Threshold" loop. Goal: coverage meets the target threshold (default 80%) with all tests passing Max iterations: 12 Between iterations run: npm test -- --coverage Exit when: coverage threshold is met and tests exit 0 Step 1: Run coverage. Add focused tests for the biggest uncovered gaps, then repeat. 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.
Start the "E2E Until Green" loop. Goal: E2E suite passes Max iterations: 10 Between iterations run: npm run test:e2e Exit when: E2E command exits 0 Step 1: Run E2E tests. Fix the first failing spec, then repeat. 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.