skills.rest
martinjlowm
martinjlowmCOMMUNITY
Explore all skills by this author →
Website𝕏@martinjlowmGitHub

visual-comparison

Compare web application environments by capturing screenshot diffs for PR review parity.

Updated Jan 7, 2024
Search Tags:#pr review#visual regression#web app testing#screenshot diff#mixpanel tracking#authentication token
One-click install
npx skills add https://github.com/martinjlowm/nixfiles --skill visual-comparison
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-comparison
Source: https://github.com/martinjlowm/nixfiles/tree/main/config/claude/skills/visual-comparison
Command: npx skills add https://github.com/martinjlowm/nixfiles --skill visual-comparison

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you verify functional and visual parity between two web application environments by generating route-by-route screenshot evidence for PR reviews.

Core Features & Use Cases

  • X/Y Environment Parity Checks: Compares a baseline environment (X) against a comparison environment (Y) across navigatable pages to find UI and layout regressions.
  • Mixpanel-Driven Critical Path Coverage: Prioritizes routes and component states tied to Mixpanel tracking so the most user-impacting flows are validated first.
  • Screenshot Diff Documentation: Captures full-page screenshots, produces ImageMagick pixel diffs, and writes organized outputs under a dedicated comparison directory structure for reviewer inspection.
  • Guardrails for Reliability: Handles viewport sizing requirements (asks if not provided), enforces token-based authentication (including first navigation), and provides crash/error handling rules for server-managed vs user-started sessions.

Quick Start

Use the visual-comparison skill to compare two running URLs (X and Y) by providing the baseline and comparison endpoints, the routes to test (or allow prioritization via Mixpanel tracking), and your required API token and viewport size.

Frequently Asked Questions about visual-comparison

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual regression testing between staging and production environments?▼

Automate visual regression testing by navigating corresponding routes across two web app environments, capturing full-page screenshots, and generating pixel-diff evidence using ImageMagick to validate UI parity for PR reviews.

How do I perform screenshot diff comparisons for PR review on authenticated web apps?▼

Screenshot diff comparisons for PR review require token-based authentication during initial navigation, capturing full-page screenshots of specified routes, and generating ImageMagick pixel diffs with masking for dev or server overlays.

Can I prioritize critical route coverage for web app testing using Mixpanel tracking?▼

Yes, web app testing can prioritize routes and component states tied to Mixpanel tracking, ensuring the most user-impacting flows are validated first during visual parity checks between environments.

Do I need to specify viewport dimensions for pixel-accurate screenshot comparisons?▼

Yes, viewport dimensions are required for pixel-accurate screenshot comparisons, and the process will prompt you for sizing requirements if they are not provided before capturing full-page screenshots.

What's the best way to handle route discovery when comparing two web application deployments?▼

Route discovery for comparing web application deployments should prefer in-app navigation rules, systematically crawling corresponding routes across baseline and comparison environments to ensure complete visual parity coverage.

How does crash and error handling work during automated screenshot capture for visual regression?▼

Crash and error handling during automated screenshot capture distinguishes between server-managed and user-started sessions, applying specific recovery rules to ensure visual regression testing completes reliably across environments.

Related Skills

Explore More Software Engineering Skills→
JuanMS20JuanMS20

github-auth

Configure GitHub authentication for Hermes Agent using git, gh CLI, or SSH credentials.

Community
Intermediate
wmasfoewmasfoe

visual-verdict

Compare a generated UI screenshot against reference images and output a structured JSON verdict.

Community
Advanced
ColeMurrayColeMurray
2.6k

visual-verification

Capture and upload full-page or viewport screenshots with metadata for UI verification.

Community
Intermediate
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate