ui-visual-validator

CI/CD visual regression setup and pre-commit visual verification checklist. Scoped complement to reality-checker agent — adds: visual regression tool ecosystem (Chromatic, Percy, Applitools, BackstopJS, Playwright Visual), 13-item mandatory verification checklist, and GitHub Actions screenshot diff pipelines. Use when setting up automated visual regression tests in CI/CD or running systematic pre-PR visual verification beyond what reality-checker provides.

仓库: kumaran-is/claude-code-onboarding
最近来源活动: 2026年3月28日 21:58
检测到的 SKILL.md 语言: 英语
星标: 34
分支: 21

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

返回搜索返回安装

name	ui-visual-validator
description	CI/CD visual regression setup and pre-commit visual verification checklist. Scoped complement to reality-checker agent — adds: visual regression tool ecosystem (Chromatic, Percy, Applitools, BackstopJS, Playwright Visual), 13-item mandatory verification checklist, and GitHub Actions screenshot diff pipelines. Use when setting up automated visual regression tests in CI/CD or running systematic pre-PR visual verification beyond what reality-checker provides.
risk	low
source	community (adapted for workspace)
date_added	2026-02-27
updated	2026-03-15
allowed-tools	Read, Bash
metadata	{"triggers":"visual regression, screenshot testing, visual diff, Chromatic, Percy, Applitools, BackstopJS, Playwright visual, visual testing CI, pixel diff, visual QA, UI looks wrong, before and after screenshot","related-skills":"browser-testing, accessibility-audit, web-design-guidelines, design-system","domain":"quality","role":"specialist","scope":"review","output-format":"report"}
last-reviewed	2026-03-15

Iron Law

DO NOT REPLACE reality-checker — USE IT FIRST for live browser screenshots and binary APPROVED/NEEDS WORK verdict. This skill adds: (1) visual regression tooling setup for CI/CD pipelines, (2) the 13-item mandatory verification checklist for systematic pre-PR checks, (3) automated screenshot diff configuration. Use both together.

UI Visual Validator

Systematic visual verification methodology + CI/CD visual regression tooling. Skeptic-first: the modification goal has NOT been achieved until proven with visual evidence.

Scope vs `reality-checker`

Capability	`reality-checker` agent	`ui-visual-validator` (this skill)
Live browser screenshot	✅ Chrome DevTools MCP	❌ (use reality-checker for this)
Binary APPROVED/NEEDS WORK verdict	✅	❌ (defer to reality-checker)
Visual regression tool setup (CI/CD)	❌	✅ Chromatic, Percy, Applitools, BackstopJS
GitHub Actions visual diff workflow	❌	✅
13-item mandatory verification checklist	❌	✅
Accessibility visual compliance checklist	❌	✅
Pre-commit systematic analysis protocol	❌	✅

Workflow: Run ui-visual-validator checklist → gather screenshots → pass to reality-checker for final verdict.

When to Use This Skill

Setting up Chromatic, Percy, or Playwright Visual in a CI/CD pipeline
Before a PR that touches Angular components or Flutter screens — run through the 13-item checklist
Investigating "it looks different on CI than locally" — visual regression diagnosis
New Angular component needs visual baseline established for regression testing
Flutter screen needs screenshot test added to CI

When NOT to Use This Skill

For live browser screenshots — use browser-testing skill + Chrome DevTools MCP
For the final APPROVED/NEEDS WORK gate — use agent

reality-checker

# Install
npm install -D @playwright/test

# angular.json — add e2e target

// visual.spec.ts
import { test, expect } from '@playwright/test';

test('dashboard visual regression', async ({ page }) => {
  await page.goto('/dashboard');
  await page.waitForLoadState('networkidle');

  // Full page snapshot
  await expect(page).toHaveScreenshot('dashboard.png', {
    fullPage: true,
    threshold: 0.1, // 10% pixel difference tolerance
  });
});

test('mobile breakpoint', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 812 });
  await page.goto('/dashboard');
  await expect(page).toHaveScreenshot('dashboard-mobile.png');
});

# .github/workflows/visual-regression.yml
name: Visual Regression
on: [pull_request]
jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npx playwright install --with-deps chromium
      - run: npx ng build --configuration=production
      - run: npx playwright test --reporter=html
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-visual-report
          path: playwright-report/

npm install --save-dev chromatic
npx chromatic --project-token=<token> --auto-accept-changes main

# GitHub Actions
- name: Publish to Chromatic
  uses: chromaui/action@latest
  with:
    projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
    onlyChanged: true  # Only test changed components

npm install -g backstopjs
backstop init

// backstop.json
{
  "viewports": [
    { "label": "mobile", "width": 375, "height": 812 },
    { "label": "tablet", "width": 768, "height": 1024 },
    { "label": "desktop", "width": 1440, "height": 900 }
  ],
  "scenarios": [
    {
      "label": "Dashboard",
      "url": "http://localhost:4200/dashboard",
      "selectors": ["#main-content"],
      "delay": 500,
      "misMatchThreshold": 0.1
    }
  ],
  "engine": "playwright"
}

backstop reference  # Create baseline screenshots
backstop test       # Compare against baseline
backstop approve    # Approve changes as new baseline

npm install --save-dev @percy/cli @percy/playwright

// In Playwright test
import percySnapshot from '@percy/playwright';

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

// widget_test.dart — golden file testing
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';

testGoldens('DashboardScreen renders correctly', (tester) async {
  await loadAppFonts();

  final builder = DeviceBuilder()
    ..overrideDevicesForAllScenarios(devices: [
      Device.phone,
      Device.iphone11,
      Device.tabletPortrait,
    ])
    ..addScenario(
      widget: const DashboardScreen(),
      name: 'default state',
    )
    ..addScenario(
      widget: const DashboardScreen(isLoading: true),
      name: 'loading state',
    );

  await tester.pumpDeviceBuilder(builder);
  await screenMatchesGolden(tester, 'dashboard');
});

# Generate golden files (baseline)
flutter test --update-goldens

# Run comparison
flutter test

Layer	Tool	What It Catches
Layer 1 — Design tokens	`/lint-design-system`	Hardcoded colors, raw spacing
Layer 2 — WCAG	`accessibility-auditor` agent	Contrast, ARIA, keyboard nav
Layer 3 — Interaction patterns	`web-design-guidelines`	Loading/empty/error states
Layer 4 — Live screenshot	`reality-checker` agent	Binary pass/fail with visual evidence
Layer 5 — CI regression	`ui-visual-validator` (this skill)	Baseline regression, cross-browser