Skip to content
cccskills
FreePublished on GitHub

browser-screenshot-diff

Compare two recorded browser sessions at matching step IDs using screenshots and accessibility snapshots, which describe page elements. Report the first difference and overall similarity to check interface changes or verify replayed sessions.

OriginalShow the original description

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

See how to install

Good for

  • Checking visual regressions after interface changes
  • Verifying a replay against its original session
  • Comparing A/B variants of a form workflow
  • Locating the first difference between recorded sessions

Files included (1)

  • SKILL.md2.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.27 rvf status <session-id-a>.rvf
    npx -y ruvector@0.2.27 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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Compare models available through the HuggingFace router with chat-ui configuration, research missing models, and write short English descriptions of their architecture and capabilities. Add entries to both production and development configuration files and commit the changes.

  • Adding newly available router models to chat-ui
  • Writing concise descriptions of model capabilities
  • Updating production and development model entries together
ruvnet/ruflo76.9KUpdated Oct 19, 2026

adr-create

FreeSummary

Create an Architecture Decision Record, a document for recording important design choices, with the next sequential number. It generates a Markdown template, registers the record in AgentDB, and links related decisions found through search.

  • Record the reasoning behind adopting a technology
  • Start an ADR for an API or data model change
  • Document an infrastructure decision
ruvnet/ruflo76.9KUpdated Oct 19, 2026

adr-index

FreeSummary

Build a searchable index and relationship graph from ADRs, records of architectural decisions. Import two supported document formats, refresh existing metadata without duplicate relationships, and review summaries of statuses, missing references, and inconsistencies.

  • Index ADRs imported from another project
  • Refresh a graph that differs from files on disk
  • Set up ADR tracking in an existing codebase
ruvnet/ruflo76.9KUpdated Oct 19, 2026

adr-reindex

FreeSummary

Rebuild the index of ADRs, records of architectural decisions, after files or relationship lines are deleted. It clears stored records and relationships, indexes the files still present, and checks that the final record count matches.

  • Rebuild the index after deleting an ADR file
  • Remove stale relationships after editing an ADR
  • Reconcile the ADR index on a schedule
ruvnet/ruflo76.9KUpdated Oct 19, 2026

adr-review

FreeSummary

Review code changes against accepted Architecture Decision Records, documents that capture agreed design choices. Report violations, outdated references, compliant changes, and areas without ADR coverage, then suggest code fixes or a new decision record where appropriate.

  • Check a pull request before merging
  • Review major code changes against agreed design decisions
  • Find references to superseded ADRs
ruvnet/ruflo76.9KUpdated Oct 19, 2026

adr-verify

FreeSummary

Check saved architecture decision records (ADRs) for broken references, circular replacement relationships, and inconsistent statuses. Use the results to verify imported records or stop a CI check when selected integrity rules fail.

  • Checking ADR integrity after import
  • Blocking CI when ADR issues are found
  • Reviewing ADR data before a release
ruvnet/ruflo76.9KUpdated Oct 19, 2026

See all skills by ruvnet

Report a problem with this skill