before-and-afterlisted
Install: claude install-skill ruverd/skills
# Before and after
Stills on the **PR body**. Video is QA's job (`gh pr comment --attach`).
Browser work is `agent-browser`. This skill owns session, capture
inventory, height alignment, and the marked block.
Run it headless. `agent-browser` launches its bundled Chrome for Testing
process as the rendering engine; that process is expected. It must include
`--headless=new` and must not open a visible window or the user's
`/Applications/Google Chrome.app`. Never use `--headed`, `--auto-connect`,
`--cdp`, `--profile`, the OS `open` command, or a host browser MCP.
Load `agent-browser skills get core` before clicking. Do not copy
vercel-labs/before-and-after (`format.mjs` is PolyForm Shield). Use
the scripts here (MIT).
## When
- Shipper, `forge=github`, the diff has UI (routes, screens, widgets,
layout/CSS). After `gh pr create` / update.
- `/qa` on a GitHub UI PR whose body lacks the marked block
(PR opened elsewhere, or capture failed at ship).
Skip: API-only, `--no-pr`, `forge=git` / `gitlab`, docs/chore with
no screen. Missing `agent-browser` on a UI PR is **BLOCKED**, not a
Playwright fallback.
## Session
Not per-worktree. Base and HEAD share cookies:
```bash
eval "$(../before-and-after/scripts/ensure-session.sh)"
agent-browser --session "$SESSION" --session-name "$SESSION" \
--headed false open "$URL"
```
State: `$RUVER_HOME/agent-browser/ruver-<owner>-<repo>/`. Never git.
Never Chrome `--profile Default`.
After session restore, open a gated route. Login for