visual-setup

Scaffold deterministic Playwright screenshot baselines with human-only approval.

Updated Mar 2, 2026
One-click install
npx skills add https://github.com/supermalang/ai-augmented-coding --skill visual-setup
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-setup
Source: https://github.com/supermalang/ai-augmented-coding/tree/main/.claude/skills/visual-setup
Command: npx skills add https://github.com/supermalang/ai-augmented-coding --skill visual-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual setup removes the friction of adding deterministic screenshot testing to a project. It gives teams a repeatable way to capture, compare, and approve visual changes without manually wiring up baselines, reports, or review workflows.

Core Features & Use Cases

  • Tiered visual testing: Enables Playwright route screenshots first, with optional Storybook component isolation and a local approve or reject review app for later expansion.
  • Safe, in-project scaffolding: Detects prerequisites, records the visual-testing flag in project context, and scaffolds all files under a single visual-review folder without installing dependencies.
  • Deterministic review workflow: Uses OS-matched baselines, controlled serve commands, and human-only snapshot approval so visual diffs stay reproducible across CI and local runs.

Quick Start

Ask the assistant to run visual-setup in your repository and scaffold Tier 1 visual regression testing with the correct base URL, serve command, and CI operating system.

Frequently Asked Questions about visual-setup

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

FAQPage Schema
How do I set up visual regression testing with Playwright without manually wiring baselines?

Setting up visual regression testing involves scaffolding in-project config files for Playwright route screenshots, detecting prerequisites, and capturing OS-matched baselines. This enables a deterministic review workflow without installing dependencies or manually wiring baselines.

Can I add Storybook component isolation to an existing Playwright visual testing workflow?

Yes, Storybook component isolation is supported as an optional Tier 2 expansion. You can add Storybook component captures alongside Playwright route screenshots and manage visual diffs using the local approve-or-reject review app.

What is deterministic visual baseline review and when do I need it for web projects?

Deterministic visual baseline review uses OS-matched baselines, controlled serve commands, and human-only snapshot approval to keep visual diffs reproducible across CI and local runs. You need it to prevent flaky screenshot tests caused by environment inconsistencies.

Does scaffolding visual testing config require installing new dependencies in my project?

No, scaffolding visual testing config does not require installing new dependencies. The setup detects prerequisites, records the visual-testing flag in project context, and places all files under a single visual-review folder without modifying your dependency tree.

How do I handle visual diffs across different operating systems in CI?

Handling visual diffs across different operating systems requires OS-matched baseline capture and controlled serve commands. This ensures snapshot comparisons remain reproducible and accurate whether running locally or in CI pipelines.

What is the best way to approve or reject visual changes in a local review workflow?

The best way to approve or reject visual changes is using a local review app that enforces human-only snapshot approval. This safeguard ensures visual diffs are evaluated manually before updating deterministic baselines.