How do I install the Chrome Diff Screenshot skill?

Run npx skillmds@latest add catesandrew/chrome-diff-screenshot in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Chrome Diff Screenshot safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Chrome Diff Screenshot?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Chrome Diff Screenshot free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Chrome Diff Screenshot?

catesandrew (@catesandrew) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chrome Diff Screenshot by catesandrew

Name: Chrome Diff Screenshot
Author: catesandrew

File contents

chrome-diff-screenshot

Capture a targeted screenshot (element or full page) and persist it alongside a baseline for visual diffing. Use after UI changes to verify no unintended visual regressions.

Requires: Chrome DevTools MCP server running and connected.

Inputs

Variable	Description	Example
`${input:selector}`	CSS selector to screenshot (optional, omit for full page)	`#main-content`, `.dashboard-widget`
`${input:baseline}`	Path to baseline image for comparison	`./baselines/main-content.png`
`${input:filePath}`	Output screenshot path (optional)	`/tmp/vr-main-content-current.png`

If filePath is omitted, auto-name: ./tmp/vr-<sanitized-selector-or-page>.png

sanitize(x): lowercase; keep a–z 0–9 - _; replace other chars with -.

Procedure

1. Resolve target

If ${input:selector} is provided:

Snapshot the DOM to find the element uid.
Scroll into view: element.scrollIntoView({ block: 'center', inline: 'center' }).
Get bounding rect to verify element is visible.

If no selector: capture full page.

2. Screenshot

Resolve filePath to absolute path, create parent dirs:

const path = require('path'), fs = require('fs');
const absPath = path.resolve(process.cwd(), filePath);
fs.mkdirSync(path.dirname(absPath), { recursive: true });

Call mcp__chrome__take_screenshot with { "filePath": absPath }.

3. Compare with baseline

If this environment supports image diffing:

Compute pixel mismatch percentage between ${input:baseline} and saved screenshot.
Flag if mismatch exceeds threshold (recommended: 0.1% for pixel-perfect, 1% for layout changes).

If diff tooling is not available, provide instructions (see below).

Output Format

🎯 Target

${input:selector} or page

🖼 New screenshot

Saved: <absolute path>

📏 Baseline

${input:baseline}

✅ Diff result

Mismatch: <percentage>% or not computed — use external tool
Status: PASS / FAIL / UNKNOWN

🔧 Run a local diff

If not auto-computed, run one of these:

pixelmatch (Node.js):

npx pixelmatch <baseline> <current> diff.png 1920 1080 --threshold 0.1

Resemble.js (CLI):

npx resemblejs compare <baseline> <current> --output diff.png

ImageMagick:

magick compare -metric AE -fuzz 5% <baseline> <current> diff.png
echo "exit code $? means: 0=identical, 1=different, 2=error"

Threshold Guide

Use case	Recommended threshold
Pixel-perfect UI (icons, exact positioning)	0% – 0.05%
Component-level (fonts, spacing)	0.1% – 0.5%
Page-level layout (acceptable anti-aliasing)	0.5% – 2%
Smoke test only	2% – 5%

Common Mistakes

Different viewport sizes — ensure browser window size matches when baseline was captured. Use mcp__chrome__resize_page to set a consistent size before capturing.
Dynamic content — timestamps, avatars, animations will always differ. Mask or exclude dynamic regions.
Retina/HiDPI — screenshots may be 2× the CSS dimensions. Baseline and current must use the same device pixel ratio.
Baseline not yet created — first run creates the baseline; only flag on subsequent runs.

---name: chrome-diff-screenshotdescription: Use when you need to capture a screenshot for visual regression comparison via Chrome DevTools MCP — saves current state alongside a baseline for diffing with pixelmatch or similar tools.---# chrome-diff-screenshotCapture a targeted screenshot (element or full page) and persist it alongside a baseline for visual diffing. Use after UI changes to verify no unintended visual regressions.**Requires:** Chrome DevTools MCP server running and connected.## Inputs| Variable | Description | Example ||----------|-------------|---------|| `${input:selector}` | CSS selector to screenshot (optional, omit for full page) | `#main-content`, `.dashboard-widget` || `${input:baseline}` | Path to baseline image for comparison | `./baselines/main-content.png` || `${input:filePath}` | Output screenshot path (optional) | `/tmp/vr-main-content-current.png` |If `filePath` is omitted, auto-name: `./tmp/vr-<sanitized-selector-or-page>.png`**sanitize(x):** lowercase; keep `a–z 0–9 - _`; replace other chars with `-`.## Procedure### 1. Resolve targetIf `${input:selector}` is provided:- Snapshot the DOM to find the element uid.- Scroll into view: `element.scrollIntoView({ block: 'center', inline: 'center' })`.- Get bounding rect to verify element is visible.If no selector: capture full page.### 2. ScreenshotResolve `filePath` to absolute path, create parent dirs:```jsconst path = require('path'), fs = require('fs');const absPath = path.resolve(process.cwd(), filePath);fs.mkdirSync(path.dirname(absPath), { recursive: true });```Call `mcp__chrome__take_screenshot` with `{ "filePath": absPath }`.### 3. Compare with baselineIf this environment supports image diffing:- Compute pixel mismatch percentage between `${input:baseline}` and saved screenshot.- Flag if mismatch exceeds threshold (recommended: 0.1% for pixel-perfect, 1% for layout changes).If diff tooling is not available, provide instructions (see below).## Output Format### 🎯 Target`${input:selector}` or `page`### 🖼 New screenshotSaved: `<absolute path>`### 📏 Baseline`${input:baseline}`### ✅ Diff result- Mismatch: `<percentage>%` or `not computed — use external tool`- Status: PASS / FAIL / UNKNOWN### 🔧 Run a local diffIf not auto-computed, run one of these:**pixelmatch (Node.js):**```bashnpx pixelmatch <baseline> <current> diff.png 1920 1080 --threshold 0.1```**Resemble.js (CLI):**```bashnpx resemblejs compare <baseline> <current> --output diff.png```**ImageMagick:**```bashmagick compare -metric AE -fuzz 5% <baseline> <current> diff.pngecho "exit code $? means: 0=identical, 1=different, 2=error"```## Threshold Guide| Use case | Recommended threshold ||----------|-----------------------|| Pixel-perfect UI (icons, exact positioning) | 0% – 0.05% || Component-level (fonts, spacing) | 0.1% – 0.5% || Page-level layout (acceptable anti-aliasing) | 0.5% – 2% || Smoke test only | 2% – 5% |## Common Mistakes- **Different viewport sizes** — ensure browser window size matches when baseline was captured. Use `mcp__chrome__resize_page` to set a consistent size before capturing.- **Dynamic content** — timestamps, avatars, animations will always differ. Mask or exclude dynamic regions.- **Retina/HiDPI** — screenshots may be 2× the CSS dimensions. Baseline and current must use the same device pixel ratio.- **Baseline not yet created** — first run creates the baseline; only flag on subsequent runs.

Frequently asked questions

Chrome Diff Screenshot