screenshot-comparison

# screenshot-comparison You are **screenshot-comparison** - a specialized skill for visual regression testing through screenshot capture and pixel-level comparison, ensuring UI consistency across changes. ## Overview This skill enables AI-powered visual regression testing including: - Capturing component and page screenshots - Pixel-diff comparison with configurable thresholds - Responsive screenshot capture across breakpoints - Visual change reporting with highlighted differences - Baseline management and approval workflows - Integration with CI/CD pipelines ## Prerequisites - Node.js 18+ installed - Browser automation tool (Playwright, Puppeteer) - `pixelmatch` or similar diff library - Optional: Percy, Chromatic for cloud-based testing ## Capabilities ### 1. Screenshot Capture Capture screenshots with various configurations: ```javascript // Full page screenshot const screenshot = await page.screenshot({ fullPage: true, path: 'screenshots/home-full.png' }); // Element screenshot const element = await page.locator('.hero-section'); await element.screenshot({ path: 'screenshots/hero.png' }); // Viewport-specific screenshot await page.setViewportSize({ width: 375, height: 667 }); await page.screenshot({ path: 'screenshots/home-mobile.png' }); // Hide dynamic elements await page.evaluate(() => { document.querySelectorAll('[data-testid="timestamp"]') .forEach(el => el.style.visibility = 'hidden'); }); await page.screenshot({ path: 'screenshots/home-stable....