skills.rest
SeoJaeWan
SeoJaeWanCOMMUNITY
Explore all skills by this author →
GitHub

visual-compare

Compare reference and current UI renderings with pixel-level diff reports.

1|Updated Mar 6, 2026
Search Tags:#ui-testing#agent-browser#visual-diff#image-comparison#visual-audit#ui-qa#pixelmatch
One-click install
npx skills add https://github.com/SeoJaeWan/try-claude-code --skill visual-compare-seojaewan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-compare
Source: https://github.com/SeoJaeWan/try-claude-code/tree/main/plugin/develop/skills/visual-compare
Command: npx skills add https://github.com/SeoJaeWan/try-claude-code --skill visual-compare-seojaewan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pixel-level visual comparisons between a reference image or URL and the live UI to detect subtle rendering differences, enabling precise UI QA and design validation.

Core Features & Use Cases

  • Element-level captures that focus on the target UI component to reduce noise.
  • Pixel-diff analysis with pixelmatch to produce a diff image and a precise mismatch report.
  • Flexible sources including image files, external URLs, or two URLs, with routing for Figma references to figma-parity.
  • Structured artifact output (reference, current, diff) and a JSON report for traceability.

Quick Start

Provide a reference source and a live UI URL to run the visual-compare workflow and generate a pixel-diff report.

Frequently Asked Questions about visual-compare

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

FAQPage Schema
How do I compare a live UI rendering against a reference image for pixel-level differences?▼

Yes, visual comparison supports external image files, two live URLs, or image URLs as sources. Figma references are automatically routed to the dedicated figma-parity workflow for design validation.

How does pixelmatch visual diff analysis work for UI QA testing?▼

To run a visual diff report, provide a reference source and a live UI URL. The automated workflow outputs a triplet of reference, current, and diff artifacts alongside a JSON report for traceability.

Does visual comparison work with Figma references for design validation?▼

Yes, the visual comparison workflow specifically handles Figma references by routing them to a dedicated figma-parity workflow. This ensures accurate design validation between Figma designs and live UI renderings.

What artifacts do I get from a pixel-diff analysis of a web page?▼

A pixel-diff analysis outputs a structured triplet of artifacts: the reference image, the current UI capture, and the diff image. It also generates a JSON report containing precise mismatch data for traceability.

Related Skills

Explore More Design & Creative Skills→
kensleDevkensleDev

ui-cloner

Replicate live website UI into the current project stack with implementation plans.

Community
Advanced
mejangomejango

sarif-parsing

Parse SARIF 2.1.0 files to extract and deduplicate findings.

Community
Intermediate
RamonsDkaRamonsDka
1

figma

Fetch Figma design context, assets, and tokens via MCP to generate React+Tailwind UI code.

Community
Advanced
jmaglyjmagly
175

regression-visual

Detect visual and UI regressions via automated screenshot comparison and pixel-diff analysis.

Community
Advanced