본문으로 건너뛰기
cccskills
무료GitHub에 공개

image-compare

Compare two images pixel-by-pixel and get a visual diff. Use when the user wants to compare their implementation against a design, spot differences between two screenshots, or verify visual regression.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

pascalorg/skills
설치 방법 보기

포함된 파일(5)

  • SKILL.md3.2 KB
  • scripts/image-compare.js1.8 KB
  • scripts/image-compare.sh521 B
  • scripts/package-lock.json17.7 KB
  • scripts/package.json178 B

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Image Compare

Compare two images pixel-by-pixel. Returns a diff count, mismatch percentage, and generates a diff image highlighting the differences in red.

When to Use

  • Comparing an implementation screenshot against the original design
  • Spotting visual regressions between two versions of a page
  • Verifying that a UI matches a Figma export

How It Works

  1. Both images are loaded and resized to match dimensions (uses the smaller of the two)
  2. pixelmatch compares every pixel and flags differences above a configurable threshold
  3. Returns mismatch stats and writes a diff image showing changes in red

Usage

bash <skill-path>/scripts/image-compare.sh <image1> <image2> [diff-output.png] [threshold]

Arguments:

  • image1 — First image path (required)
  • image2 — Second image path (required)
  • diff-output.png — Path to write the diff image (optional, defaults to ./diff.png)
  • threshold — Pixel matching threshold 0-1, lower is stricter (optional, defaults to 0.1)

Examples:

# Compare a design against implementation
bash <skill-path>/scripts/image-compare.sh design.png screenshot.png

# Compare with custom threshold and output path
bash <skill-path>/scripts/image-compare.sh before.png after.png ./changes.png 0.05

Output

{
  "totalPixels": 921600,
  "differentPixels": 4523,
  "mismatchPercentage": 0.49,
  "dimensions": { "width": 1280, "height": 720 },
  "diffImage": "./diff.png",
  "threshold": 0.1
}
FieldTypeDescription
totalPixelsNumberTotal pixels compared
differentPixelsNumberNumber of pixels that differ
mismatchPercentageNumberPercentage of pixels that differ
dimensionsObjectWidth and height used for comparison
diffImageStringPath to the generated diff image
thresholdNumberSensitivity threshold used

Present Results to User

After comparing, present a summary:

Comparison: design.png vs screenshot.png

Mismatch: 0.49% (4,523 pixels out of 921,600)
Diff image saved to: ./diff.png

The images are nearly identical. Differences are highlighted in red in the diff image.

Interpret the percentage:

  • < 0.1% — Essentially identical
  • 0.1% - 1% — Minor differences, likely anti-aliasing or sub-pixel rendering
  • 1% - 5% — Noticeable differences, worth reviewing
  • > 5% — Significant visual changes

Troubleshooting

Different sized images — The script automatically resizes both images to the smaller dimensions. For best results, use images of the same size.

Too many false positives — Increase the threshold (e.g., 0.2). Anti-aliasing differences are common between browsers.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

agent-collaboration

무료

Multi-model agent orchestration using specialized agents for planning, coding, research, math/science, visual analysis, and adversarial review. Use when tasks are complex enough to benefit from different models' strengths, when you want adversarial review to catch blind spots, or when coordinating multi-step workflows across agent roles. Triggers on complex projects, multi-step tasks, architecture decisions, or when explicitly requested.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

pascalorg/skills982026년 9월 11일 업데이트

contrast-check

무료

Check color contrast ratios against WCAG AA and AAA accessibility standards. Use when the user wants to verify if their color combinations are accessible, check contrast between text and background colors, or audit a palette for accessibility.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

pascalorg/skills982026년 9월 11일 업데이트

glb-web-export

무료

Audit a .glb or .gltf and make it small, correct, and fast to load in a browser, with a measured before/after report. Use when a model is "too big" or "slow to load", when the user asks to "optimize this GLB", "compress this glTF", or "export for web", or when they mention Draco, meshopt, gltfpack, KTX2, Basis, texture VRAM, draw calls, or a Blender / CAD / photogrammetry / Pascal export headed for Three.js, React Three Fiber (drei useGLTF), Babylon.js, or model-viewer. Covers inspection, spec validation, geometry and texture compression, scene-graph cleanup, and the correctness checks (metres, Y-up, node names, animations, PBR fidelity, alpha modes, vertex colors) that must not regress. Not for editing or modelling geometry, authoring or laying out a scene, generating 3D from text or images, converting from FBX/OBJ/CAD, or debugging a runtime frame rate that has nothing to do with asset size.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

pascalorg/skills982026년 9월 11일 업데이트

image-analysis

무료

Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors", "extract colors from this image", "implement this design", or "get the color palette".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

pascalorg/skills982026년 9월 11일 업데이트

image-to-text

무료

Extract text from images using OCR. Use when the user shares a screenshot and you need to read the text content, copy UI labels, or extract copy from a design mockup.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

pascalorg/skills982026년 9월 11일 업데이트

web-design

무료

Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI, reviewing design quality, choosing design tokens, or making any visual design decision.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

pascalorg/skills982026년 9월 11일 업데이트

pascalorg의 스킬 모두 보기

이 스킬의 문제 신고