skills.rest
zorgentech
zorgentechOFFICIAL
Explore all skills by this author →
GitHub

visual-validate

Capture and analyze frontend screenshots to detect visual regressions in pull requests.

Updated Aug 27, 2026
Search Tags:#screenshots#frontend#qa#playwright#pull-request#visual-testing#claude-vision
One-click install
npx skills add https://github.com/zorgentech/archon --skill visual-validate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-validate
Source: https://github.com/zorgentech/archon/tree/main/.claude/skills/visual-validate
Command: npx skills add https://github.com/zorgentech/archon --skill visual-validate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual-validate detects visual regressions introduced by frontend pull requests by capturing route screenshots and performing automated visual analysis so teams can catch layout, text, and responsiveness issues before merging.

Core Features & Use Cases

  • Captures screenshots for all routes affected by a PR across mobile, tablet, and desktop breakpoints.
  • Maps changed frontend files to routes using the project's visual-helpers and creates a dynamic Playwright spec to exercise those routes.
  • Analyzes screenshots with Claude Vision against a checklist (layout, text legibility, spacing, responsiveness, elements visibility, accentuation, states, colors) and categorizes issues by severity.
  • Generates a REPORT.md summarizing routes tested, screenshots, and detailed actionable findings for QA and reviewers.
  • Use case: Run as a pre-merge visual QA step when a PR modifies pages or components (.tsx, .css) to require visual approval.

Quick Start

Run the visual-validate workflow specifying the PR number to capture screenshots, analyze them with Claude Vision, and generate a REPORT.md.

Frequently Asked Questions about visual-validate

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

FAQPage Schema
How do I automate visual regression testing for frontend pull requests?▼

Automate visual regression testing for frontend pull requests by capturing route screenshots with Playwright and analyzing them with Claude Vision to detect layout, text, and responsiveness issues before merging.

Does visual QA for PRs require a running local dev server and Playwright?▼

Visual QA for PRs requires a running frontend at http://localhost:3000 and Playwright test execution to capture screenshots across mobile, tablet, and desktop breakpoints for affected routes.

How are modified .tsx and .css files mapped to routes for screenshot capture?▼

Modified .tsx and .css files are mapped to routes using the repository's visual-helpers, which creates a dynamic Playwright spec to exercise only the affected routes for screenshot capture.

What does Claude Vision analyze when checking frontend screenshots for visual regressions?▼

Claude Vision analyzes frontend screenshots against a checklist covering layout, text legibility, spacing, responsiveness, element visibility, accentuation, states, and colors, categorizing issues by severity.

What is the best way to generate a visual QA report for modified frontend components?▼

Generate a visual QA report by running the visual-validate workflow on a PR, which outputs a REPORT.md summarizing tested routes, captured screenshots, and detailed actionable findings for reviewers.

Can I use visual-validate without a visual-helpers mapping in my repository?▼

Without the repository's visual-helpers mapping, visual-validate cannot map changed .tsx or .css files to their corresponding routes, preventing the creation of a dynamic Playwright spec for screenshot capture.

Related Skills

Explore More Software Engineering Skills→
initialyzeinitialyze

preview-import

Preview imported HTML on the local AEM dev server and compare rendering.

Official
Basic
adolfoaranaes12adolfoaranaes12
2

execute-task

Execute approved task specifications sequentially with TDD and validation gates.

Community
Advanced
xotongxotong

webapp-testing

Automate local web app UI testing with Playwright and with_server.py.

Community
Intermediate
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced