setup-visual-testing

Set up UI Verify visual regression testing with capture path detection and CI wiring.

21|1|Updated Jul 22, 2026
One-click install
npx skills add https://github.com/uiverify/uiverify --skill setup-visual-testing-uiverify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-visual-testing
Source: https://github.com/uiverify/uiverify/tree/main/packages/skills/skills/setup-visual-testing
Command: npx skills add https://github.com/uiverify/uiverify --skill setup-visual-testing-uiverify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding visual regression testing to a repo from scratch involves choosing a capture strategy, installing the right SDK, authoring deterministic stories, and wiring CI — a multi-step process where wrong choices lead to flaky, expensive test suites. ## Core Features & Use Cases - Automatic capture path detection: Detects whether the repo should use Storybook stories, a Playwright suite, Vitest browser-mode tests, or direct screenshot upload (native/mobile/React Native) based on existing dependencies. - End-to-end CI wiring: Installs the uiverify CLI and SDKs, then generates a GitHub Actions workflow that uploads builds on every PR, with optional path filtering and changed-only rendering to control cost. - Determinism-first authoring: Delegates story authoring to companion skills so the first snapshots avoid clock, live-data, and animation flake. - Use Case: A team with a React component library and no visual tests runs this Skill to scaffold Storybook, install uiverify, author economical deterministic stories, and get a gating UI Verify check on every pull request. ## Quick Start Set up UI Verify visual regression testing in this repository, choosing the right capture path and wiring it into CI.

Frequently Asked Questions about setup-visual-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add visual regression testing to my project?▼

Install the uiverify CLI, pick a capture path based on what your repo already has (Storybook, Playwright, Vitest browser mode, or existing screenshots), then add a CI workflow that runs npx uiverify upload on every pull request with your UIVERIFY_API_KEY secret.

Storybook vs Playwright vs Vitest for visual testing?▼

Use Storybook when components exist in isolation, Playwright when testing assembled real pages, and Vitest browser mode only if a browser-mode suite already exists. Native or mobile apps that produce their own screenshots should upload PNGs directly with --screenshots.

Can I upload existing screenshots instead of using Storybook?▼

Yes. If your harness (Detox, Maestro, native snapshot tests) already produces PNGs, run npx uiverify upload --screenshots ./screenshots. UI Verify diffs and baselines them with no rendering, and no stories or client SDK are needed.

How do I run visual tests only on PRs that change UI?▼

Use dorny/paths-filter in a first job to detect UI file changes, then guard each step of the upload job on that output so backend-only PRs no-op but still report green. A plain paths: trigger skips the whole job and can wedge a required status check.

Why are my visual test diffs noisy or flaky?▼

Flake comes from run-to-run variation the tool cannot neutralize externally: the clock, live data, and infinite animations. Fix it at the source using the determinism guidance for your capture path rather than disabling the check.

Does --only-changed work with Playwright visual tests?▼

No. The --only-changed flag relies on a dependency graph, which exists for Storybook (via --stats-json) and Vitest (via the Vite module graph), but a Playwright archive has no dependency graph so the flag is a no-op there.