What problem does it solve? After editing CSS, HTML, or a component, it is hard to know exactly what visibly changed, where it changed, and which CSS properties caused it. This Skill compares two rendered pages (URL pairs or local HTML files) and produces a single Markdown report that a coding agent can read in one context window. ## Core Features & Use Cases - Pixel and computed-style diffing: Runs vlmkit diff html for Playwright-driven capture, pixel diff per viewport, and computed-style comparison split into universal vs. breakpoint-gated property changes. - Agent-readable Markdown report: Runs vlmkit diff agent to format the JSON report with per-viewport diffRatio, per-section component heatmaps, heuristic fix candidates, and worst-viewport screenshot paths. - Regression detection: Surfaces a warning banner when a majority of viewports got worse compared to a prior run's persisted summary. - Use Case: After refactoring a stylesheet, run the diff on the before and after HTML files to confirm whether the change is a visual no-op or to get a selector-level list of property: a → b fixes. ## Quick Start Ask the agent to run vlmkit diff html on before.html and after.html with an output directory, then run vlmkit diff agent on the resulting diff-report.json to get the Markdown summary.
