---
name: screenshot-visual-check
description: "Compares before and after screenshots of a UI change and lists what moved, what changed and what broke, region by region. Use when a front-end change needs a visual diff between a before and after screenshot to confirm only the intended parts moved. Do not use for checking accessibility or writing automated visual regression tests. Related topics: coding, design."
---

# Screenshot Visual Check

Compares before and after screenshots of a UI change and lists what moved, what changed and what broke, region by region.

## When to use

Use this skill when a front-end change needs a visual diff between a before and after screenshot to confirm only the intended parts moved. Do not use it for checking accessibility or writing automated visual regression tests.

## Workflow

1. Ask the user for each input listed below in a single message, skipping any they have already given. Where options are listed, offer them, but accept other answers too.
2. Confirm both images show the same page and viewport; if not, say so and stop before comparing.
3. Split the screen into regions and compare each in a fixed order, so no area is skipped.
4. Record each difference as region, before, after, and mark it Intended, Unintended or Uncertain against the stated change.
5. Apply the chosen strictness to decide which small drifts to report and which to ignore.
6. State a verdict of Ship, Fix first or Needs a closer look, naming the most important finding.

## Inputs

- **Before screenshot** (free text, e.g. "File path or link to the earlier capture")
- **After screenshot** (free text, e.g. "File path or link to the later capture")
- **Page or screen** (free text, e.g. "Name of the view being compared")
- **Intended change** (longer free text)
- **Viewport** (choose one: Mobile 390 wide, Tablet 768 wide, Laptop 1280 wide, Wide 1920)
- **Strictness** (choose one: Pixel level, Layout level, Content level)

## Output

A findings table grouped into Intended, Unintended and Uncertain, followed by a one-line verdict and the single finding that matters most.

## Prompt template

Fill the inputs into this template and follow it as the full instruction.

### Screenshot Visual Check

Compare the screenshots of a user interface change.

- Before screenshot: {{Before screenshot}}
- After screenshot: {{After screenshot}}
- Page or screen: {{Page or screen}}
- Intended change: {{Intended change}}
- Viewport: {{Viewport}}
- Strictness: {{Strictness}}

Look at both images before writing anything. Divide the screen into regions such as header, navigation, main content, forms and footer, and compare each region in the same order. For every difference, record the region, what it was, what it is now, and whether it matches the intended change. Sort findings into Intended, Unintended and Uncertain. Unintended means an overlap, clipped text, shifted alignment, changed colour or spacing, or a missing element. Judge only what is visible, and say so when text is too small to read. Match the strictness: Pixel level reports spacing drift of a few pixels, Content level ignores it. Finish with a verdict of Ship, Fix first or Needs a closer look, and name the single most important finding.

## Pitfalls

- Reporting every anti-aliasing blip as a regression, which hides the one overlap that breaks the page.
- Comparing a mobile capture with a laptop capture, so every region appears to have changed.
- Declaring text correct when the screenshot is too small to read it, instead of marking it Uncertain.