Wideshot

Skill undeemed/ocd/skills/wideshot

Claude Code plugin: zero-tolerance audit-and-fix pass for visual polish and code quality. Measures rendered output, fixes every violation, reports tersely.

Install

npx -y skills add undeemed/ocd --skill wideshot

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Context-framed screenshots for visual verification. After changing a UI element, screenshot its containing pane/section/toolbar - never the element alone - so alignment against siblings is visible in one picture. Use whenever the user invokes /wideshot, asks to "screenshot the change", "show me how it looks", "verify visually", "check it rendered right", or whenever you are about to screenshot a single element to prove a UI change worked.

SKILL.md

4.0 KB, as published. Nobody here has run it

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:

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.
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