visual-reviewer

Name: visual-reviewer
Availability: InStock
Author: random6913

Compare before/after screenshots against design tokens and output a 0-100 score.

1|Updated Mar 23, 2026

Search Tags:#ui #qa #design-system #visual-review #regression-testing #screenshot-diff

Ready to run

npx skills add https://github.com/RaNDoM6913/claude-code-superkit --skill visual-reviewer-random6913

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-reviewer
Source: https://github.com/RaNDoM6913/claude-code-superkit/tree/main/packages/codex/skills/visual-reviewer
Command: npx skills add https://github.com/RaNDoM6913/claude-code-superkit --skill visual-reviewer-random6913

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA ensures UI consistency and design-system compliance by detecting visual regressions before PR merges and scoring against design tokens.

Core Features & Use Cases

Visual regression detection by comparing before/after screenshots.
Design-system conformance scoring and policy checks.
Use Case: QA for UI-heavy components across builds to catch unintended style drift.

Quick Start

Run a visual review against the latest commit to generate a score and diff report.

Frequently Asked Questions about visual-reviewer

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

FAQPage Schema

How do I detect visual regressions in UI changes before merging?▼

Visual regression detection compares before and after screenshots of UI changes to identify unintended style drift. This process outputs a 0-100 score with before/after diffs and a pass/fail signal to verify visual integrity.

What is design-system drift and how do I score UI compliance?▼

Design-system drift occurs when UI components deviate from established design tokens. Conformance scoring compares your screenshots against these tokens to output a quantitative 0-100 score and verify visual compliance.

How do I run a visual review for frontend component changes?▼

To run a visual review, you apply the skill to your frontend component changes across web apps or mobile responsive UIs. It requires access to project screenshots or diff data to generate a score and diff report.

Can I use screenshot diff testing for design-system migrations?▼

Yes, screenshot diff testing is specifically applied to design-system migrations and web app builds to verify visual integrity. It compares images to tokens to ensure UI consistency throughout the migration process.

What do I need to generate a visual QA pass/fail signal for a PR?▼

To generate a visual QA pass/fail signal, you need to provide project assets such as screenshots or diff data. The system compares these images to design tokens to output a 0-100 score and before/after diffs.