visual-diff

# /visual-diff Run an odiff-powered visual comparison of two sites (a **local** base vs a **live** base) and report results **without burning tokens on full-page screenshots**. The batch runner writes a compact `report.md`; you read that, and open a diff image *only* for pages that fail. This is a portable build - nothing is hard-coded to one project. Bases and the page list come from config (see **Setup** below). ## Why this exists Manually comparing two renderings by reading two full-page PNGs per page is slow and token-expensive. `scripts/visual-diff.mjs` captures both sides, diffs them with odiff (native, fast), and emits a machine-readable report. The diff numbers do the matching; you only look at images when something is actually off. ## Setup (once per project) 1. Install the runtime deps in the host project (or globally): ```bash npm install --save-dev odiff-bin playwright pngjs npx playwright install chromium ``` 2. Create a `visual-diff.config.json` in the project root. Copy `config.example.json` from this skill and edit the two bases + page list: ```json { "localBase": "http://127.0.0.1:8765", "liveBase": "https://staging.example.com", "thresholdPct": 0.1, "pages": [ { "slug": "homepage", "path": "/" }, { "slug": "pricing", "path": "/pricing/" } ] } ``` Alternatively keep pages in a separate `visual-diff.pages.json` (`{ "pages": [...] }`) - the runner auto-discovers it. ## Steps 1. **...