Wideshot

wideshot

Screenshot the scene, not the subject.

The rule (why this skill exists)

The natural move after changing a button is to screenshot the button. That tight crop is exactly the frame in which nothing can be verified: alignment, spacing, and layout shift are all relations to siblings, and the crop deleted the siblings. Even Chromatic, the component-snapshot vendor, abandons tight cropping the moment components sit on a real page - because alignment is relative.

So: changed a control button -> shoot the whole control pane. Changed a table cell -> the table. Changed a nav link -> the nav bar. Changed a modal field -> the modal.

How to frame

Compute the frame with scripts/pick-container.js - a pure browser-JS function, verified against shadow DOM, inner scroll containers, display:contents, and position:fixed. Inject it via any JS-eval and call pickShotContainer('<target-selector>'). It walks ancestors to the nearest landmark/container (nav, fieldset, [role=toolbar], [class*=pane], ...) under these guardrails, then returns {containerSelector, rect, reason} with a 20px-padded CSS-px page rect:

• container area >= 3x the target's, else keep ascending (a bare wrapper adds no context)
• container fits the viewport, else stop at the previous best
• container includes at least one visible sibling of the target
• rect clamped to enclosing scrollports (clipped content never paints)

Read the reason field; fixed-position, rect is VIEWPORT coords changes how you crop.

Capture tool

In order:

1. Whatever browser tooling the session already has - browser-harness, Playwright MCP, a puppeteer/playwright dependency in the repo. Run the heuristic through its JS-eval, then screenshot using the returned rect (Playwright: page.screenshot({clip: rect})) or containerSelector with padding.
2. No tooling? Use the bundled fallback (puppeteer-core + already-installed Chrome, no browser download, ~28MB dep, verified <2s):

cd "$(mktemp -d)" && PUPPETEER_SKIP_DOWNLOAD=1 npm i --silent puppeteer-core
node <plugin-dir>/skills/wideshot/scripts/wideshot.mjs "http://localhost:3000" ".submit-btn" shot.png

It finds Chrome via CHROME_PATH, standard install paths, then Playwright's browser cache, freezes animations for determinism, and prints {out, containerSelector, rect, reason}. 3. User preference wins - if the user names a tool (shot-scraper, capture-website-cli, ...), use it; compute the frame with the same heuristic first, e.g. capture-website-cli <url> --element '<containerSelector>' --inset=-20.

Discipline

• Before/after pairs, numbered: 010_before_control-pane.png, 011_after_control-pane.png - same URL, same viewport, same frame. The frame is comparable only if both shots use the container rect computed BEFORE the change.
• States, not just the happy one: re-shoot the same frame for the states that move layout - empty vs full, 0% vs 100%, loading, error. One frame per state beats one state per frame.
• Look at the picture: confirm the changed element AND at least one alignment peer are visible. If the container filled the viewport, the heuristic hit its ceiling - fall back to a viewport shot and say so.
• Terminal UIs: this skill's framing rule still applies but the tool ladder does not - dump the char frame around the changed region (the ocd skill's verification section covers it).

Report format

End with one line per shot:

shot.png - .control-pane (landmark/container match: <section> 1 up, 28.5x target area) - verified: button row aligned