Claude Code capture skill: visual checks without writing Playwright scripts

Capture before editing, compare afterward

The skill below tells Claude Code which component to capture, when to save the baseline and how to read the comparison. It uses SnapEye for local app capture, SnapDIFF for visual review and SnapSurf for browser interaction.

You can run these capture checks without writing a Playwright test script. SnapSurf uses Playwright internally to control its browser. SnapEye captures through the running app; SnapDIFF can compare captures inside the page.

SnapEye, SnapDIFF and SnapSurf have different roles

SnapEye: capture your app and compare before and after

Claude runs a command to capture a component in your local app. After a code change, another command compares it with the saved image and reports whether the pixels changed.

Use it to check a CSS refactor or find a visual regression. SnapEye can capture and record the app, but it does not click through the interface.

SnapDIFF: review visual differences inside the browser

SnapDIFF captures components, compares them with saved images and displays the differences in the page. You can inspect and approve changes through its reporter.

Use it for an interactive review. Its basic browser workflow saves references in that browser’s storage; blocking a CI build requires the separate test setup.

SnapSurf: let the agent operate the browser

SnapSurf lets Claude open a page, find a control, click or type, and check what changed afterward. For example, it can open a settings form and verify that a dialog appeared.

Use it when the task requires interaction. It starts its own browser session, so it does not automatically have the logins from your open Chrome tabs.

Semantic verification answers whether the interface changed state; visual comparison answers whether captured pixels changed. A “saved” message can be correct while a button overlaps it, so check pixels when the task concerns appearance.

Set up local capture in a Vite app

npm install --save-dev @zumer/snapeye @zumer/snapdom@3

import { defineConfig } from 'vite';
import { snapeye } from '@zumer/snapeye/vite';
export default defineConfig({ plugins: [snapeye()] });

Start the dev server, then capture the component before editing it. Use a stable viewport, fixed fixture data and a specific target rather than the entire application.

npx snapeye capture billing-card-desktop --target '#billing-card'
# Close the capture-trigger tab before editing, then:
npx snapeye diff billing-card-desktop --target '#billing-card' --fail-on-change

Read status first. A successful operation with diff.changed: false passes an appearance-preserving refactor. If it changed, inspect the reported regions and artifacts. An environment failure is not a passing comparison.

Download a Claude Code capture skill

Save this complete SKILL.md as .claude/skills/visual-capture/SKILL.md in the project. It routes capture and verification; install the tools separately. The skill supplies instructions; the installed tools perform the capture. The official skill guide documents the directory and frontmatter.

---
name: visual-capture
description: Capture and verify local UI changes with SnapEye; use SnapSurf for browser interactions and SnapDIFF for in-page review.
---
Capture the baseline before editing. Keep the viewport and fixture data fixed.
Use SnapEye for a selector-level capture and read status before diff.changed.
Never replace a baseline simply to hide a regression.
Use SnapSurf for navigation and verify after every action.
Report the target, artifacts, tool versions and what was actually verified.

The downloadable version also covers errors, intentional visual changes and signed-in sessions. It keeps publication and baseline approval subject to the user’s instructions.

A reproducible billing-card exercise

Open the fixture or download its HTML. It is a static card with a button that deliberately changes its border, so the baseline and the regression are easy to identify. The card uses synthetic data.

npm install --save-dev vite @zumer/snapeye @zumer/snapdom@3
npx snapeye serve billing-card.html
# In another terminal, using the URL printed by serve:
npx snapeye capture billing-card --url <printed-url> --target '#billing-card'
# Close the capture-trigger tab, edit the CSS, then compare:
npx snapeye diff billing-card --url <printed-url> --target '#billing-card' --fail-on-change

For an interaction-only state, opening a fresh trigger URL reloads the page. Reach the state with a browser tool and use SnapEye's documented in-page API instead of assuming the CLI captured an already-open modal. Try the SnapDIFF live demos for an in-page review workflow with deliberate visual drift.

Add browser interaction through MCP

SnapSurf is published in the official MCP Registry as io.github.zumerlab/snapsurf, and is listed in Glama. The registry entry checked on October 5, 2026 is version 0.1.2, with the npm package @zumer/snapsurf as its distribution.

claude mcp add --scope user snapsurf -- npx -y -p @zumer/snapsurf@latest snapsurf-mcp

Then ask Claude to open the app, find a named control, act, verify and assert the intended transition. Read structuredContent, obtain fresh target ids after new observations, and escalate to pixels when the semantic report cannot answer the question. A semantic diff does not prove a SnapDOM image has the right pixels.

SnapSurf starts its own browser context. For a workflow requiring the user's existing signed-in tab, use an authorized integration for that tab.

A useful task to give Claude

“Refactor the billing card CSS without changing its appearance. Capture #billing-card before editing, keep the fixture and viewport fixed, compare afterward, and report the JSON verdict and artifact paths. If verification fails, explain the failure; do not overwrite the reference.”

For an intentional redesign, specify which region may change and inspect that change before approving a new reference. Keep the original reference until that review is complete.

Continue with element capture, recapture and invalidation, or React lifecycle timing.

Sources checked October 5, 2026: SnapEye setup and CLI, SnapDIFF workflows, SnapSurf MCP integration, and the Claude Code skill guide above.

What about Playwright MCP?

Microsoft’s Playwright MCP also lets an agent operate a browser without writing a standalone test script. Its documented approach uses structured accessibility snapshots. SnapSurf adds a digest-and-diff workflow with assertions over retained transitions. Both tools control a browser. Compare their observation and verification APIs against the task you need to run.

Keep Playwright tests when you need an established end-to-end suite, multi-browser automation or a CI workflow your team already maintains. Add selector-level DOM capture when the immediate question is what changed in a running component.

Protect the baseline during hot reload

After a CLI capture finishes, close its trigger tab or navigate to the ordinary app URL before editing. In our local SnapEye 0.4.0 fixture, leaving the capture query open during Vite hot reload triggered another capture and replaced the baseline. A resulting no-change verdict would be misleading. With the capture URL removed before editing, the deliberate border change produced changed: true and exit code 3.

The fixture was checked in Chromium at 320 × 240 captured CSS pixels. An unchanged run reported zero changed pixels; the border regression reported a change. The check covered this fixture in Chromium.