Source on GitHub

“SideShot this PR”

Openvictorsaly wants to merge sideshot into your-agent

Before-and-after screenshots for every pull request that changes what people see. Say it to your coding agent: it pictures the part that changed on a desk and a phone, shows you first, then puts the table in the PR.

npx skills add victorsaly/sideshot -g

For any agent that reads Agent Skills: Claude Code, Codex, Cursor, OpenCode. Read the source

SideShot wrote this table into agentic-blog #151 Merged

Before and after

The merge gate while other steps still work

Desk1280×900
Before, desk: the merge gate says “Needs you”, but its Approve button is greyed out while Citations and Drilldown still work.After, desk: the gate says “Waiting on 2 steps, opens when Citations and Drilldown finish”, and the button reads “Opens when they finish”.
Phone390×844
Before, phone: the merge gate says “Needs you”, but its Approve button is greyed out while Citations and Drilldown still work.After, phone: the gate says “Waiting on 2 steps, opens when Citations and Drilldown finish”, and the button reads “Opens when they finish”.
Dark1280×900
Before, dark: the merge gate says “Needs you”, but its Approve button is greyed out while Citations and Drilldown still work.After, dark: the gate says “Waiting on 2 steps, opens when Citations and Drilldown finish”, and the button reads “Opens when they finish”.

Before: main · After: this branch · made with SideShot. On a wide screen the phone pair is cropped to the change; open any picture for the whole screen.

A real table from a real pull request. Before, the gate said Needs you for a merge you could not make yet; after, it says what it waits for. A reviewer sees that in one look instead of imagining it from the diff.

Files changed 4

What changed, said on the picture

@@ --note "selector=what changed" --mark-changes @@
  • A numbered ring around what the change is about; its words go under the table.
  • A box around everything else that differs, and a dashed rule where something was taken out.
  • Rows are lined up like a text diff, so content that only moved is left alone.
  • Marks are marigold, unless your page is marigold too; then SideShot picks the colour your pictures use least.
Before, on a phone: the merge gate with a paragraph saying Citations and Drilldown are still working, and a greyed-out Approve button.After, on a phone: a marigold ring numbered 1 around the Approve and merge button, a box around the changed buttons, and a dashed rule where the paragraph was removed.
The same gate, with --note and --mark-changes.

Your screens, not ours

@@ --devices desk,phone @@
  • Desk and phone by default: a web browser at 1280×900 and a mobile one at 390×844, both at 2x.
  • Or name them: tablet, laptop, wide, any size like 1440x900, or your own, like pixel=412x915:mobile.
  • Light and dark with --schemes light,dark, when the change touches colour.

One skill, any agent

@@ SKILL.md @@
  • Written in the open Agent Skills format: Claude Code, Codex, Cursor, OpenCode and others read it.
  • Your agent works out the page and the parts from your diff, so the ask is one sentence.
  • Playwright comes from your project; if it is missing, your agent asks before adding it.

Stays out of your code

@@ --update-pr @@
  • You see the pictures first. Nothing is pushed until you have.
  • They live on a sideshot branch that never merges, so the code stays light.
  • The table goes between markers in the PR description; running again replaces it instead of adding another.

Merge SideShot into your agent

No conflicts. MIT licence. Needs Node; uses your project's Playwright.

npx skills add victorsaly/sideshot -g

Then, on a branch with a pull request, ask: SideShot this PR.

Claude Code plugin, or by hand

As a Claude Code plugin, so updates come through /plugin:

/plugin marketplace add victorsaly/sideshot
/plugin install sideshot@sideshot

By hand, with no agent: copy skills/sideshot/ from the repo and run its script; the README lists every option.