Browser Screenshot Diff
Takes two recorded browser sessions and runs them side by side, matching steps by ID to spot visual and DOM differences. You'd use this after a UI refactor to catch regressions, or to verify that a replayed session still matches the original recording within tolerance. The pixel diff can be noisy (font rendering, scrollbars), so the DOM comparison against Playwright's accessibility tree is often more reliable. Reports the first divergence, an aggregate similarity score weighted by step duration, and writes findings into a new RVF container. It's local file work, not a live browser tool, which keeps things simple but means you need both session artifacts on disk first.
- skills.sh installs
- 697
- GitHub stars
- 81.4K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add ruvnet/ruflo --skill browser-screenshot-diff --agent claude-codeInstalls into .claude/skills of the current project.
Files
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-replayrun matches the parent session within tolerance. - Comparing two A/B variants of the same form flow.
Steps
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/ruvnet/ruflo
- Categories
- Frontend Development, Git & Pull Requests, Automation & Workflows, Design & UI/UX
- First seen
- Jun 3, 2026
More from ruvnet/ruflo
All 236- Cost Budget Check693
- Browser Auth Flow690
- Adr Verify688
- Cost Track685
- Cost Booster Route684
- Cost Federation684
- Cost Summary684
- Intelligence Transfer684
- Vector Setup684
- Cost Trend683
- Cost Conversation682
- Cost Export681
- Cost Benchmark679
- Cost Booster Edit679
- Browser674
- Witness656
- AgentDB Advanced Features
- AgentDB Learning Plugins
- AgentDB Memory Patterns
- AgentDB Performance Optimization
- AgentDB Vector Search
- Hooks Automation
- Pair Programming
- ReasoningBank Intelligence
Recommended
More Frontend Development
markdown-to-pdfduc01226/easyplatform[Document Processing] Use when you need to convert markdown files to PDF with syntax highlighting and custom CSS support.693skills.sh installs
rspack-best-practicesrstackjs/agent-skillsRspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Use when writing, reviewing, or troubleshooting R689skills.sh installs
ux-extractjezweb/claude-skillsExhaustively extract UX patterns from a reference web app. Walks every screen, captures screenshots of every state, records interaction patterns, copy verbatim,687skills.sh installs
cost-booster-routeruvnet/rufloRoute tasks through hooks_route, partition by Agent Booster availability, and report Tier 1 bypass utilization with $0 cost684skills.sh installsintelligence-transferruvnet/rufloPublish or fetch learned patterns across projects via IPFS (Pinata) -- the cross-project pattern transfer that hooks_transfer enables684skills.sh installs
ebpfmohitmishra786/low-level-dev-skillseBPF skill for Linux observability and networking. Use when writing eBPF programs with libbpf or bpftrace, attaching kprobes/tracepoints/XDP hooks, debugging ve672skills.sh installs