skills.rest
JDerekLomas
JDerekLomasCOMMUNITY
Explore all skills by this author →
GitHub

visual-compare

Compares reference and replica UI screenshots to generate gap reports and prioritized remediation steps.

1|Updated Jan 14, 2026
Search Tags:#ui-audit#screenshot-analysis#visual-comparison#gap-report#cloud-vision#ui-diff
One-click install
npx skills add https://github.com/JDerekLomas/claude-code-skills --skill visual-compare
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-compare
Source: https://github.com/JDerekLomas/claude-code-skills/tree/main/skills/visual-compare
Command: npx skills add https://github.com/JDerekLomas/claude-code-skills --skill visual-compare

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual comparison of a reference app against a replica build. Screenshots both via Chrome DevTools, uses Claude vision to identify differences, generates gap reports. Use when asked to compare, audit visuals, check replication fidelity, or run a visual diff.

Core Features & Use Cases

  • Full visual diff between reference and replica across routes
  • Generate structured gap reports with actionable items
  • File issues linked to ground-truth reference images and replica captures

Quick Start

Run a full visual comparison between a reference app and its replica, generate a gap report, and file issues for any visual discrepancies.

Frequently Asked Questions about visual-compare

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

FAQPage Schema
How do I automate visual comparison between a reference UI and a replica build?▼

Automating visual comparison involves capturing screenshots of both reference and replica interfaces, then using Claude Vision to identify visual discrepancies and generate structured gap reports with prioritized remediation steps.

Do I need Chrome DevTools to run a UI audit on deployed web apps?▼

Yes, running a UI audit requires Chrome DevTools MCP connectivity to capture screenshots of deployed URLs for both the reference application and the replica build across multiple states and viewport sizes.

What is a visual gap report and how does it help fix UI differences?▼

A visual gap report is a structured document detailing UI differences found via screenshot analysis, providing actionable items and prioritized remediation steps to fix visual fidelity issues between a reference and replica.

Can I check replication fidelity across multiple routes and viewport sizes?▼

Yes, you can check replication fidelity across multiple routes, states, and viewport sizes by capturing ground-truth reference screenshots and replica captures, then applying visual diff analysis to produce gap reports.

What directory structure is required for screenshot analysis during a visual diff?▼

Screenshot analysis requires a ground-truth screenshots directory located at docs/screenshots, alongside deployed URLs for both the reference and replica applications to facilitate accurate visual comparison.

Related Skills

Explore More Design & Creative Skills→
jeninhjeninh

ui-preview

Navigate to local dev servers and storybooks, capture screenshots, and analyze rendered UI components.

Community
Intermediate
zeveckzeveck

verify-changes

Automate end-to-end verification of code changes with diff review, test execution, and UI checks.

Community
Advanced
baasith6baasith6

responsive-testing

Capture screenshots of web applications at multiple viewport sizes to identify layout breakages.

Community
Intermediate
imehrimehr

visual-diff

Compare replica screenshots against references to compute pixel diffs and fidelity scores.

Community
Advanced