Eva Feature Screenshot

Workflow

1. Pin down what shipped. If the user hasn't said which feature, ask — one question, not a survey. git log --oneline -15, git diff --stat, or internal/changelog/ (newest month file) usually name it. You need the feature and the URL that shows it.

2. Start the app. Just the dev server — the HD scripts launch their own Chrome and sign in as the agent user (/?agent=true) themselves, in a fresh context at deviceScaleFactor 2. You do not drive agent-browser to shoot.

   pnpm dev   # from repo root → localhost:5173

3. Shoot it. For a plain URL shot, shot.sh navigates, collapses the sidebar, hides overlays, and captures at 2560×1440:

   bash .claude/skills/eva-feature-screenshot/scripts/shot.sh /vvedantb/eva/web/sessions sessions

   Takes a URL path + slug (+ optional settle ms, + optional --no-collapse).

   For a staged shot (open a menu, type a prompt, then capture), write a recipe — a .mjs exporting export async function stage(page, ctx) — and pass it to hd-shot.mjs. The recipe owns navigation, sidebar collapse, and staging; ctx gives you { BASE, hideOverlays, collapseSidebar, settle }. Use page.getByRole(...) (Playwright) locators. To find the exact accessible names, drive agent-browser interactively first and snapshot -i / read_page.

   // recipe.mjs — stage the mode picker open with a prompt typed in
   export async function stage(page, ctx) {
     await page.goto(`${ctx.BASE}/vvedantb/eva/web/sessions`, {
       waitUntil: "networkidle",
     });
     await ctx.settle(3000);
     await ctx.collapseSidebar(page);
     await page.getByRole("textbox", { name: /Ask Eva/ }).click();
     await page.keyboard.type("Redesign the sessions sidebar…");
     await page.getByRole("button", { name: "Edit", exact: true }).click();
     await ctx.settle(600);
   }

   node .claude/skills/eva-feature-screenshot/scripts/hd-shot.mjs --slug session-modes --recipe /abs/path/recipe.mjs

   Stage clean, readable inputs — a tidy demo title beats a real messy one. Never submit (default 7).

4. Read the PNG back and judge it. This is where bad shots get caught:

   • Is the feature the obvious subject, or lost in chrome?
   • Any overlay/toolbar survived? Any skeleton, spinner, or — placeholder still on screen? (Bump the settle ms and reshoot.)
   • All four edges: clipped labels, half-rendered buttons, a cut-off column?
   • Anything confidential per default 9?
   • Empty states: an empty board proving "kanban tasks" is a bad shot. Populate or pick another view.

   When the frame fails because of the data — error walls, Untitled session, one row where the feature needs three — stage the dev data (default 8) rather than hunting for a luckier screen.

5. Frame it.

   bash .claude/skills/eva-feature-screenshot/scripts/frame.sh <slug> "Eva"

   Writes screenshots/<today>-<slug>-framed.png (3200×1800). It renders templates/frame.html through its own Chrome at deviceScaleFactor 2 — a separate browser from the shot, so nothing to restore afterwards. Read the framed PNG back too — check the gradient hasn't washed out the UI at the corners and the wordmark isn't clipped. A third argument frames a raw PNG from another path. templates/frame.html is the only place this skill's brand colours live.

6. Write the tweet. Invoke the eva-tweet skill — hook, optional positioning fragment, → capability list, optional close. The screenshot carries the proof, so the tweet states what now exists rather than describing the picture. Never reference the image at all.

7. Hand over. The framed file path as a markdown link, the tweet in a fenced block, and anything in frame the user should check before posting.

Quick reference

Gotchas

• HD lives in Playwright, not agent-browser. agent-browser's screenshot captures at CSS pixels and discards devicePixelRatio, so it caps at 1280×720. hd-shot.mjs / hd-frame.mjs use the playwright-core bundled inside the global agent-browser install; set PW_CORE if it lives elsewhere. Both launch channel:"chrome", so system Chrome must be installed.
• The scripts sign themselves in at /?agent=true (a boolean; /?agent throws a zod SearchParamError) in a fresh browser context. No agent-browser session needed to shoot.
• The dev overlays are three nodes, all hanging off <html>, not <body>. Hiding #react-scan-root alone is not enough: react-scan draws its component outlines and labels on a bare html > canvas with no id or class, and that is the one that ruins the shot. hd-shot.mjs kills all three (#react-scan-root, html > canvas, [data-agentation-root]) with inline display:none !important, because a stylesheet loses to their inline styles.
• A staged shot is a fresh browser, not the one you explored in. Use agent-browser to find selectors, but the recipe re-navigates and re-stages from scratch in Playwright's own context — put every step in the recipe. Prefer page.getByRole(...) over CSS; refs like @e1 don't exist here.
• Two or more images dilute the point. X renders one image full width; a second halves both. Only shoot more than one for a genuine before/after.
• Don't reuse video/public/captures/ — those are Remotion assets framed for a different job.