screenshot-comparison
Visual regression testing through screenshot capture and comparison. Pixel-diff analysis, responsive screenshot capture across viewports, and visual change reporting with highlighted differences.
Profile →npx skills add a5c-ai/babysitter --skill screenshot-comparison --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 }); a
- Overview
- Prerequisites
- Capabilities
- 1. Screenshot Capture
- 2. Pixel-Diff Comparison
- 3. Responsive Testing
- 4. Visual Change Report
- 5. Baseline Management
- 6. Component-Level Testing
- MCP Server Integration
- Best Practices
- Process Integration
- Output Format
- Error Handling
Update baseline for specific test Update all failed baselines Review pending approvals
What does the screenshot-comparison skill do?
Visual regression testing through screenshot capture and comparison. Pixel-diff analysis, responsive screenshot capture across viewports, and visual change reporting with highlighted differences.
How do I install it?
Run `npx skills add a5c-ai/babysitter --skill screenshot-comparison --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From a5c-ai/babysitter, a repository with 1,642 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.