Individual skill

visual-review

Prove an Astro rebuild looks like the live site it replaces — full-page screenshots of both sides with motion frozen, a pixel diff with a 0.5 % pass line, a computed-style comparison of typography, colour and spacing, and one contact sheet to look at every pair. Use after a template is built, before calling a conversion page done, when someone asks whether the new site matches the old one, or when a diff or style row fails and needs fixing.

skills/visual-review/SKILL.md

Read pinned source

Source commit 8beb1de5099a2be1ddb1d98ffc7b3682343bc420

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 124
Repository last updated: Oct 31, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

agent-skills Repository topic
ai-agents Repository topic
astro Repository topic
claude-code Repository topic
cloudflare-pages Repository topic
codex Repository topic
jamstack Repository topic
playwright Repository topic
seo Repository topic
site-migration Repository topic
design Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 10,837 bytes
references/review-procedure.mddoc · 18,141 bytes
scripts/check.mjsruns · 5,315 bytes
scripts/diff.mjsruns · 10,830 bytes
scripts/lib/blocked-hosts.mjsruns · 2,825 bytes
scripts/lib/browser.mjsruns · 8,665 bytes
scripts/lib/freeze.cssasset · 239 bytes
scripts/lib/node-version.mjsruns · 1,083 bytes
scripts/lib/routes.mjsruns · 2,484 bytes
scripts/lib/selectors.mjsruns · 1,116 bytes
scripts/sheet.mjsruns · 12,652 bytes
scripts/shoot.mjsruns · 9,872 bytes
scripts/styles.mjsruns · 10,358 bytes

Read excerpt


# visual-review

Screenshot the live site and the new build at the same widths, measure every difference, look at
every pair yourself, fix, and repeat until every template passes. Then do it again for every page.

## The golden rule

**The diff decides, your eyes explain.** A pair passes only when `review:diff` says it passes and
`review:styles` has no failing row for it. Looking at a screenshot and finding it "close enough" is
never a pass. Four more that follow from it:

1. **Write down every visible difference before you change code.** Per pair, in words, from the
   contact sheet. Fixing what you noticed first and skipping the rest is how a page ships wrong.
2. **Parity, not better.** A deliberate improvement (a fixed typo, a tidier spacing, a sharper