# Diff

> Scaffold a playwright visual regression test suite that takes per-route full-page screenshots and compares against committed baselines. Pixel diffing is done by playwright's toHaveScreenshot, not by dragoon. Use when the user wants visual regression coverage. Pass --routes to set the routes to capture. Defaults to dry-run; pass --apply to write. Run as `node ~/.claude/skills/dragoon/skills/diff/scripts/diff.js`.

- Skill: `dragoon0x/diff` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add dragoon0x/diff`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/diff/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/diff

---


# /diff

Scaffolds visual regression with playwright snapshots.

## When to use

- The user wants visual regression coverage
- "Set up screenshot diffing", "snapshot tests", "pixel diff"
- Before any major UI refactor

## What it writes

- `playwright.visual.config.ts` snapshot-tuned config
- `tests/visual/routes.ts` list of routes to capture (default `/`)
- `tests/visual/snapshots.spec.ts` spec that loops routes and runs `toHaveScreenshot`

Pixel diffing is done by playwright's built-in toHaveScreenshot, not by dragoon. We just generate the harness.

## Run it

```
dragoon diff
dragoon diff --apply
dragoon diff --apply --routes "/,/about,/login"
```

## Then

```
npm i -D @playwright/test
npx playwright install --with-deps chromium
npx playwright test tests/visual --update-snapshots   # first time, baselines
npx playwright test tests/visual                      # after that, regression
```