Skip to content
Hidden Logic Lab

Require green Playwright before an agent UI rewrite

A checked-in SKILL.md tells Cursor or Claude Code to run and extend Playwright coverage before it rewrites screens, with a stop rule if e2e fails mid-diff.

Cursor, Claude Code, Playwright
·Coding·35 min·Working

A skill with your real Playwright commands, a baseline green run recorded in the PR, and no merge until e2e passes on the rewritten routes.

  1. 1

    Record the baseline run

    Save the passing e2e output or CI link on the PR before the first visual commit. Without a baseline, failures look like progress.

  2. 2

    Commit the skill where UI agents load it

    Place SKILL.md under your team skills folder and reference it in AGENTS.md for any task tagged UI or design-system.

  3. 3

    Reject wide diffs without spec updates

    If a rewrite touches navigation or forms, the PR should include Playwright changes. Style-only tweaks still need a smoke spec on the route.

The prompt to paste

Write SKILL.md that gates UI rewrites on Playwright end-to-end tests. The agent must not large-scale restyle or reroute pages until e2e is green and extended for touched flows.

Repository context:
[framework, app URL for local e2e, Playwright config path, npm/pnpm test script]

Rewrite target:
[routes or components, what visual or structural change is planned]

SKILL.md must include:
1. Purpose — protect user flows during UI rewrites.
2. When to use / when not to use (include: stop if Playwright cannot start against local or staging URL).
3. Required inputs: list of routes, reference screenshot or page to match, and max files to touch per commit.
4. Commands — exact lines to run:
   - Install browsers if needed: [confirm command]
   - Run full e2e: [paste script]
   - Run one spec: [paste pattern]
5. Steps in order:
   - Run e2e on current main (or branch base) and paste pass/fail summary in the session or PR.
   - Add or update specs for flows the rewrite touches; prefer stable selectors (role, test id) over CSS classes agents invent.
   - Make UI changes in small commits; re-run affected specs after each commit.
   - If a test fails, fix the UI or the test with a comment — do not delete specs to green.
6. Two example prompts invoking this skill for a dashboard or settings page rewrite.
7. Pitfalls: testing implementation classes, skipping mobile projects, running headed tests in CI incorrectly, rewriting before baseline is recorded.
8. Done means: checklist with "baseline e2e green", "new specs for changed flows", "final e2e green on branch."

Rules:
- Use real script names from the repo paste; write [confirm command] if unknown.
- Do not disable retries or timeouts globally in the skill to fake green.
- Output only SKILL.md markdown.

Flaky e2e will train everyone to skip the skill. Stabilize selectors and timing before you mandate Playwright as a gate.

Sample case written by Hidden Logic Lab. Not affiliated with Cursor or Claude Code or Playwright.

More in Coding

Get new cases in your inbox

Weekly notes on new use cases and agent workflows. No product pitches.

Occasional notes on new cases. No product pitches in the first note.