← ClaudeAtlas

before-and-afterlisted

Use when a GitHub PR needs before/after UI stills on the body, or when ruver-qa / the shipper captures those stills with agent-browser.
ruverd/skills · ★ 1 · Web & Frontend · score 77
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