Visual Diff Skill

Compare a standard page (reference/target) and a dev page (implementation under review) through screenshots and a Visual Element Tree overlay, then surface spacing/sizing discrepancies as structured prompts for a downstream investigation agent.

Prerequisites

• ws and sharp npm packages installed: cd .comate/skills/visual-diff && npm install
• Skill scripts are in <workspace>/.comate/skills/visual-diff/scripts/

Chrome CDP is handled automatically in Step 1. No manual browser setup required.

This skill orchestrates three supporting skills: chrome-cdp for browser control, element-screenshot for element-level screenshots, and vet-generator for VET overlay production. No local scripts are invoked directly — all browser and screenshot operations are delegated to those skills.