visual-comparison

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.