Screenshot Visual Check skill for Claude and Codex

Screenshot Visual Check as an AI skill. It asks for Before screenshot, After screenshot, Page or screen and 3 more, then does the rest. Free to install in…

Install it once and Claude or Codex runs it for you. When your request matches, your AI loads the skill, asks for anything it is missing, and works through the template itself. Prefer to fill it in by hand? See the full prompt template.

Download the skill (.zip) · View SKILL.md

When it is used

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.

What it will ask you for

• 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)

How it works

1. Confirm both images show the same page and viewport; if not, say so and stop before comparing.
2. Split the screen into regions and compare each in a fixed order, so no area is skipped.
3. Record each difference as region, before, after, and mark it Intended, Unintended or Uncertain against the stated change.
4. Apply the chosen strictness to decide which small drifts to report and which to ignore.
5. State a verdict of Ship, Fix first or Needs a closer look, naming the most important finding.

What you get

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

What it watches out for

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

How to install

Claude.ai and the Claude desktop app

1. Download the skill .zip.
2. Open Settings, then Capabilities, and find Skills.
3. Choose Upload skill and select the .zip.
4. Ask Claude for help with the task. It loads the skill when your request matches.

Claude Code

1. Download the skill .zip.
2. Unzip it into ~/.claude/skills/ (or .claude/skills/ inside a project).
3. Start a new session. Claude Code loads the skill when your request matches.

Codex

1. Download the skill .zip.
2. Unzip it into ~/.agents/skills/ (or .agents/skills/ inside a project).
3. Codex picks it up on its own. Type $ and the skill name to use it, or just ask for the task.

Cursor

1. Download the Cursor rule (.mdc).
2. Save it in .cursor/rules/ inside your project.
3. Cursor's agent applies the rule when your request matches its description.

AGENTS.md (Codex, Cursor, and other coding agents)

1. Copy the AGENTS.md section.
2. Paste it into AGENTS.md at the root of your repository, creating the file if needed.
3. Coding agents that read AGENTS.md follow it when your request fits.