browser-screenshot-diff
Visual + DOM diff between two recorded sessions at matching trajectory step ids; used for visual regression and replay verification
Profile →npx skills add ruvnet/ruflo --skill browser-screenshot-diff --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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**: ```bash 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 / ch
- When to use
- Steps
- Caveats
npx -y ruvector@0.2.25 rvf status <session-id-a>.rvf npx -y ruvector@0.2.25 rvf status <session-id-b>.rvf
What does the browser-screenshot-diff skill do?
Visual + DOM diff between two recorded sessions at matching trajectory step ids; used for visual regression and replay verification
How do I install it?
Run `npx skills add ruvnet/ruflo --skill browser-screenshot-diff --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ruvnet/ruflo, a repository with 67,015 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.