Skills
.Work. You
Rest

uiux-pixelmatch

Community

Visual regression testing for UIs.

Design & Creative#screenshots#regression testing#visual testing#uiux#penpot#pixelmatch
Authorkobogithub
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the detection of visual regressions in web interfaces by comparing screenshots against design exports, ensuring pixel-perfect fidelity.

Core Features & Use Cases

  • Pixel-Level Comparison: Utilizes pixelmatch for precise image difference detection.
  • Design Export Integration: Compares live website screenshots against reference images exported from design tools like Penpot.
  • Automated Reporting: Generates diff images and provides pass/fail status for batch comparisons.
  • Use Case: After a UI update, automatically run this Skill to catch any unintended visual changes in layout, colors, or element positioning before they reach users.

Quick Start

Run the batch comparison script to compare all reference images in tests/references against their corresponding screenshots in tests/screenshots.

Dependency Matrix

Required Modules

pixelmatchpngjssharpjimp

Components

scriptsreferences

💻 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: uiux-pixelmatch
Download link: https://github.com/kobogithub/knowledge/archive/main.zip#uiux-pixelmatch

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.