PluginBench
Skill
Pass
Audit score 90

argent-screenshot-diff

software-mansion/argent

Compare app screenshots to detect visual regressions and UI changes pixel-by-pixel.

What is argent-screenshot-diff?

The argent screenshot-diff tool compares saved or live app screenshots to identify visual changes in layout, spacing, color, typography, and rendering. Use it for visual regression testing and before/after UI comparisons when pixel-level differences can verify the expected result.

  • Compare baseline and current screenshots to highlight pixel-visible changes
  • Support both saved PNG files and live device captures for flexible testing workflows
  • Work with physical iPhones at full resolution for accurate visual regression detection
  • Suppress image context to keep full-resolution PNGs out of token budget
  • Generate diff artifacts showing layout, spacing, color, typography, clipping, and overflow changes

How to install argent-screenshot-diff

npx skills add https://github.com/software-mansion/argent --skill argent-screenshot-diff
Prerequisites
  • Physical iPhone or simulator with the app installed and accessible
  • Baseline PNG screenshot saved at a known file path or ability to capture one
  • Stable app state before and after the change being tested
Claude Code
Cursor
Windsurf
Cline

How to use argent-screenshot-diff

  1. 1.Navigate the app to a known-good state and capture a baseline screenshot using `screenshot` with `scale: 1.0` and `includeImageInContext: false`
  2. 2.Save the returned baseline image path for later reference
  3. 3.Perform the interaction or code change and navigate to the state under test
  4. 4.Call `screenshot-diff` with `baselinePath`, `captureCurrent: true`, `udid`, and `outputDir` to compare baseline against a live capture
  5. 5.Review the diff summary and artifact paths, then combine visual inspection with structural or runtime evidence for your assertion

Use cases

Good for
  • Verify UI layout and spacing remain unchanged after code refactoring
  • Compare before/after screenshots when updating component styling or colors
  • Detect unintended visual regressions in typography or text rendering across app updates
  • Validate image and icon rendering consistency across device models and resolutions
  • Check for clipping or overflow issues after responsive design changes
Who it's for
  • QA engineers performing visual regression testing
  • Mobile app developers validating UI changes before merging
  • Design-focused teams comparing design-to-implementation fidelity
  • Teams maintaining screenshot baselines across device models

argent-screenshot-diff FAQ

Should I use screenshot-diff to find tap coordinates or element locations?

No. Use `describe`, `debugger-component-tree`, or `native-describe-screen` to locate targets first. Screenshot-diff is for pixel comparison, not coordinate discovery.

Can I compare two already-saved PNG files without a live capture?

Yes. Provide `baselinePath` and `currentPath` (both file paths) along with `udid` and `outputDir` to compare saved screenshots directly.

How do I handle dynamic content like timestamps or ads in screenshots?

Screenshot-diff is a poor fit for dynamic or unpausable content. Use structural verification (state checks, accessibility tree, logs) instead, or crop/mask dynamic regions if possible.

Does the rotation parameter work on physical iPhones?

No. On hardware devices, the capture follows the device's real physical orientation; the `rotation` parameter is ignored.

Should I use downscaled or full-resolution screenshots?

Use normal downscaled `screenshot` calls for context and state checks. Use full-resolution (`scale: 1.0`) only when saving baseline/current PNG files for visual regression comparison.

Full instructions (SKILL.md)

Source of truth, from software-mansion/argent.


name: argent-screenshot-diff description: Compare saved or live app screenshots with the argent screenshot-diff tool. Use when testing visual regressions, before/after UI comparisons, screenshot diff checks, visible layout, spacing, color, typography, clipping, overflow, text rendering, or image/icon rendering changes.

1. Role

Use screenshot-diff as supporting visual evidence for UI QA and visual regression checks. It highlights pixel-visible change or stability; it does not replace visual inspection, accessibility/component-tree state, frame/attribute checks, logs, network evidence, or app behavior.

Do not use screenshot diffing for tap-coordinate discovery. Use describe, debugger-component-tree, or native-describe-screen to find targets first.

screenshot-diff supports physical iPhones (kind "device") for both saved-file diffs and live captures. A live capture on hardware goes through the on-device runner at full resolution, is device-wide, and needs no registered app. Keep baselines per device model and resolution, and note that the rotation parameter is ignored on hardware: the capture follows the device's real orientation.

2. When To Use

Use screenshot-diff when pixel comparison can answer the verification question:

  • Required for explicit "UI regression test", "visual regression test", "screenshot diff", "compare screenshots", or "before/after visual comparison" requests, unless stable comparable screenshots cannot be produced.
  • Good fit when the affected screen has stable before/after states and the expected result is pixel-visible: layout, position, size, spacing, color, typography, image/icon rendering, clipping, overflow, or text rendering.
  • Good fit when the risk is unintended visual regression outside the exact element changed.
  • Poor fit when the result is better verified structurally: state changes, navigation existence, accessibility tree contents, console/network behavior, or unit tests.
  • Poor fit when dynamic content, unpausable animation, timestamps, ads, random data, or missing baseline/current screenshots would make the comparison noisy or meaningless.

3. Capture Rules

Use normal downscaled screenshot calls for UI context and state checks. Use full-resolution screenshots only when saving baseline/current PNG files for visual regression comparison. Suppress the image block so the full-size PNG is not loaded into context:

{ "udid": "<UDID>", "scale": 1.0, "includeImageInContext": false }

Capture the stable baseline before the relevant interaction or before editing whenever feasible. Compare it to the post-change or post-interaction screen after the app reloads, rebuilds, or reaches the state under test.

4. Parameters

Provide udid and exactly one input for the baseline side and exactly one input for the current side:

  • Common UI regression flow: saved baseline plus live current -> baselinePath, captureCurrent: true, udid, outputDir.
  • Both screenshots already saved -> baselinePath, currentPath, udid, outputDir.
  • Rare fixture flow: live baseline plus saved current -> captureBaseline: true, currentPath, udid, outputDir.
  • Do not combine captureBaseline: true with captureCurrent: true, or provide both a path and live capture flag for the same side.

5. Deterministic Flow

  1. Navigate to the known-good state.
  2. Capture a baseline PNG with screenshot using scale: 1.0 and includeImageInContext: false; keep the returned path.
  3. Perform the interaction, apply the code change and navigate to the state under test.
  4. Call screenshot-diff with the saved baselinePath, captureCurrent: true, udid, and outputDir.
  5. Inspect the summary and artifact paths, then combine the diff with normal visual inspection and any structural/runtime evidence needed for the assertion.
{
  "baselinePath": "/tmp/baseline.png",
  "captureCurrent": true,
  "udid": "<UDID>",
  "outputDir": "/tmp/argent-diff"
}

If both images are already saved, use file paths for both sides:

{
  "baselinePath": "/tmp/baseline.png",
  "currentPath": "/tmp/current.png",
  "udid": "<UDID>",
  "outputDir": "/tmp/argent-diff"
}