agentleFS
Sign inStart free
mmurakarummurakaru/skills/no-visual-diff/SKILL.md

no-visual-diff

Skill0 starsChanged 6 days agoMITView on GitHub

Prove a code change renders identically before and after, so any real visual difference is caught and routed to a designer. Use when verifying a change is visually no-op, checking before/after parity on a component or page, or gating a refactor, dependency bump, or styling migration PR.

The file

We split this skill into the rules it gives an agent

1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈0

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Use an exact selector (section[aria-label="…"], unique class) — generic tags also match app chrome.

    line 28

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

no-visual-diff

Prove a component renders identically before and after your change.

Prereq: browser-harness on PATH; the component reachable at a running dev server. Capture before and after on the same machine (pixel pass is noisy across machines).

Snapshot before you start, do the work, snapshot after — one dev server, same URL, no worktrees needed.

Run

  1. browser-harness — capture the untouched component (before), then re-run after the change (after): URL=<url> SEL='<exact-selector>' OUT=/tmp/nvd/before browser-harness < scripts/capture.py
  2. style-diff (primary gate, deterministic computed styles) — node scripts/style-diff.mjs /tmp/nvd/before.styles.json /tmp/nvd/after.styles.json
  3. odiff (backup gate, pixels) — npx --yes odiff-bin /tmp/nvd/before.png /tmp/nvd/after.png /tmp/nvd/diff.png --aa

Verdict

  • Both exit 0 → no visual diff → mechanical, reviewer-only.
  • style-diff exit 1 → prints the exact element property: before → after → designer decision.
  • odiff exit 22 → pixels moved (paint/stacking/overflow that computed styles can't see) → Read /tmp/nvd/diff.png.

Use an exact selector (section[aria-label="…"], unique class) — generic tags also match app chrome. Pick one that appears with the final content (not a loading skeleton) and that your change won't rename or remove — CSS-module classes vanish in a migration.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free