ui-visual-regression

name	ui-visual-regression
description	Capture and compare Playwright screenshots against baseline images for key UI screens. Use after adversarial review or as part of CI.

Visual Regression

Purpose

Detect unintended visual changes by comparing current screenshots of key screens against approved baselines.

Convention

wireframes/<feature>/
  screenshots/
    baseline/
      <screen>-desktop.png
      <screen>-mobile.png   # optional
    current/                # generated during review

How to Use

1. Ensure the app is running (dev server or Tauri).
2. Use Playwright (or the project's existing e2e suite) to navigate to the screens listed in the wireframe.
3. Capture full-page or key-region screenshots into screenshots/current/.
4. Diff against screenshots/baseline/.
5. Report:
   • No meaningful differences → visual regression PASS
   • Intentional differences → update baselines after human confirmation
   • Unintentional differences → FAIL and attach the diff images

Integration with Adversarial Reviewer

The adversarial reviewer should call this skill (or perform equivalent steps) when visual fidelity matters.

Notes for Tauri + React Apps

• Prefer testing the web view via Playwright against the Vite dev server when possible.
• For desktop-only behaviors (native dialogs, filesystem), document them in the wireframe and verify manually or via Tauri-specific test helpers.