skills.rest
RaNDoM6913
RaNDoM6913COMMUNITY
Explore all skills by this author →
GitHub

visual-reviewer

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
One-click install
npx skills add https://github.com/RaNDoM6913/claude-code-superkit --skill visual-reviewer-random6913
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
majesticlabs-devmajesticlabs-dev
47

pr-screenshot-docs

Capture before/after UI screenshots and document visual changes for pull requests.

Official
Basic
OliverOuyangOliverOuyang
1

visual-verdict

Compare UI screenshots to reference images and output a JSON pass/fail verdict.

Community
Intermediate
Camilo8902Camilo8902

visual-regression-tester

Automate visual regression testing with Playwright and Chromatic screenshot comparisons.

Community
Advanced
colbymchenrycolbymchenry
19

frontend-audit

Compare live website screenshots against design mockups using image differencing and CSS style checks.

Community
Intermediate