visual-regression-setup

SkillDev tools

Configure visual regression testing with Percy, Chromatic, or custom screenshot comparison

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the visual-regression-setup skill

What this skill tells your AI

The instructions your AI receives, as published by a5c-ai/babysitter in library/specializations/desktop-development/skills/visual-regression-setup/SKILL.md and read by ahel’s review.

Configure visual regression testing for desktop applications to catch unintended UI changes.

Capabilities

Configure Percy integration
Set up Chromatic for Storybook
Custom screenshot comparison
Configure threshold settings
Handle dynamic content masking
Set up CI/CD integration

Input Schema

{
  "type": "object",
  "properties": {
    "projectPath": { "type": "string" },
    "provider": { "enum": ["percy", "chromatic", "reg-suit", "custom"] },
    "framework": { "enum": ["playwright", "cypress", "puppeteer"] }
  },
  "required": ["projectPath"]
}

Percy Integration

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    screenshot: 'only-on-failure'
  }
});

// test.spec.js
import { test } from '@playwright/test';
import percySnapshot from '@percy/playwright';

test('visual test', async ({ page }) => {
  await page.goto('/');
  await percySnapshot(page, 'Home page');
});

Custom Comparison

const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });

test('matches screenshot', async () => {
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchImageSnapshot({
    failureThreshold: 0.01,
    failureThresholdType: 'percent'
  });
});

Related Skills

playwright-electron-config
desktop-ui-testing process

Signals

GitHub stars: 2k
Forks: 112
Last commit: Sep 2026

Advanced

Item type: skill
Key: visual-regression-setup
Source: github.com/a5c-ai/babysitter

github.com/a5c-ai/babysitter