skillZs
★ LIVE SKILL TAGS ★
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
※ REAL INSTALL DATA ※
← back to all skills
ruvnet/ruflo696 installs

browser-screenshot-diff

Visual + DOM diff between two recorded sessions at matching trajectory step ids; used for visual regression and replay verification

How do I install this agent skill?

npx skills add https://github.com/ruvnet/ruflo --skill browser-screenshot-diff
view source ↗

Is this agent skill safe to install?

  • Gen Agent Trust Hubpass

    The skill is functional and handles local browser session differentiation, but presents a low security risk due to an inherent surface for indirect prompt injection when parsing external webpage DOM content and trajectory files.

  • Socketpass

    No alerts

  • Snykwarn

    Risk: MEDIUM · 1 issue

What does this agent skill do?

Browser Screenshot Diff

Compare two recorded sessions step-by-step. Pairs each step in session A to the same step-id in session B, diffs the captured screenshot and accessibility snapshot, reports the first divergence and an aggregate similarity score.

When to use

  • Visual regression after a UI change (record before, record after, diff).
  • Verifying a browser-replay run matches the parent session within tolerance.
  • Comparing two A/B variants of the same form flow.

Steps

  1. Locate both RVF containers: 
    npx -y ruvector@0.2.25 rvf status <session-id-a>.rvf
npx -y ruvector@0.2.25 rvf status <session-id-b>.rvf
  2. Load both trajectories from trajectory.ndjson. Build a step-id → (screenshot_path, snapshot_path) map for each.
  3. Pair steps by step-id. Steps that exist on only one side are flagged as unmatched and contribute to the divergence score.
  4. Pixel diff (--mode pixel|both): compare the two PNGs at each step. Report mse, psnr, and the bounding box of the largest diff cluster. Threshold default 0.02 (2% of pixels).
  5. DOM diff (--mode dom|both): compare the accessibility snapshots node-by-node. Report added / removed / changed nodes with their accessible names.
  6. Aggregate similarity: weighted average across matched steps, weighted by step duration. Verdict goes into a new findings.md under a fresh RVF container so the diff itself is replayable.
  7. Persist the diff verdict in browser-sessions under both source ids' tags so future searches surface "ran a diff against session X".

Caveats

  • Pixel diff is sensitive to font hinting, antialiasing, and scrollbar position. Keep viewport pinned across both sessions.
  • DOM diff over Playwright's accessibility tree is more stable than HTML diff. Prefer it.
  • This skill does not handle dynamic content (clocks, ads); add ignore regions to the field map or pre-process snapshots before diffing.
  • The browser_screenshot_diff MCP tool is not planned (ADR-0001 §7); the skill operates against locally-saved RVF artifacts and uses browser_eval only for live verification.

How can the creator link this skill?

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/ruvnet/ruflo/browser-screenshot-diff">View browser-screenshot-diff on skillZs</a>