PR Screenshot Comparison

Create a single, reviewer-friendly image that makes a visual UI change easy to evaluate.

Workflow

Define the proof before capturing: route, viewport, theme, interaction state, and the exact UI area that changed. Use the same data and controls on both sides. Prefer the smallest set of states that proves the change; do not screenshot unrelated chrome.
Capture the before state from the base branch and the after state from the PR branch. Use separate worktrees or an equivalent reversible setup so the two captures are genuinely comparable. If real auth or data blocks the route, build a temporary, uncommitted harness from the real shared primitives; remove it before committing.
Crop both captures tightly to the affected controls. Preserve enough nearby context to explain the state. Keep crop dimensions and scale identical unless the layout itself changed.
Stitch the images side by side in this order: Before, then After. Add a restrained caption above or below each panel. Use a neutral divider/background and ensure labels remain readable in the captured theme. Produce one PNG, not a set of loose images.
Inspect the final image at normal review size. Confirm it shows the actual change, labels are accurate, the crops align, and no sensitive data or unrelated UI is visible.
Add the image to the GitHub PR description as a native GitHub attachment. Drag it into the description editor or use GitHub's upload flow, then save and verify it renders for the repository.