Skills
.Work. You
Rest

visual-validate

Official

Automate visual QA for frontend PRs.

Software Engineering#screenshots#frontend#qa#playwright#pull-request#visual-testing#claude-vision
Authorzorgentech
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: visual-validate
Download link: https://github.com/zorgentech/archon/archive/main.zip#visual-validate

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.