$npx -y skills add software-mansion/argent --skill argent-screenshot-diffargent-screenshot-diff is an agent skill published from software-mansion/argent, installable through the skills CLI.
| 1 | ## 1. Role |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | Do not use screenshot diffing for tap-coordinate discovery. Use `describe`, `debugger-component-tree`, or `native-describe-screen` to find targets first. |
| 6 | |
| 7 | ## 2. When To Use |
| 8 | |
| 9 | Use `screenshot-diff` when pixel comparison can answer the verification question: |
| 10 | |
| 11 | - 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. |
| 12 | - 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. |
| 13 | - Good fit when the risk is unintended visual regression outside the exact element changed. |
| 14 | - Poor fit when the result is better verified structurally: state changes, navigation existence, accessibility tree contents, console/network behavior, or unit tests. |
| 15 | - Poor fit when dynamic content, unpausable animation, timestamps, ads, random data, or missing baseline/current screenshots would make the comparison noisy or meaningless. |
| 16 | |
| 17 | ## 3. Capture Rules |
| 18 | |
| 19 | 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: |
| 20 | |
| 21 | ```json |
| 22 | { "udid": "<UDID>", "scale": 1.0, "includeImageInContext": false } |
| 23 | ``` |
| 24 | |
| 25 | 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. |
| 26 | |
| 27 | ## 4. Parameters |
| 28 | |
| 29 | Provide `udid` and exactly one input for the baseline side and exactly one input for the current side: |
| 30 | |
| 31 | - Common UI regression flow: saved baseline plus live current -> `baselinePath`, `captureCurrent: true`, `udid`, `outputDir`. |
| 32 | - Both screenshots already saved -> `baselinePath`, `currentPath`, `udid`, `outputDir`. |
| 33 | - Rare fixture flow: live baseline plus saved current -> `captureBaseline: true`, `currentPath`, `udid`, `outputDir`. |
| 34 | - Do not combine `captureBaseline: true` with `captureCurrent: true`, or provide both a path and live capture flag for the same side. |
| 35 | |
| 36 | ## 5. Deterministic Flow |
| 37 | |
| 38 | 1. Navigate to the known-good state. |
| 39 | 2. Capture a baseline PNG with `screenshot` using `scale: 1.0` and `includeImageInContext: false`; keep the returned `path`. |
| 40 | 3. Perform the interaction, apply the code change and navigate to the state under test. |
| 41 | 4. Call `screenshot-diff` with the saved `baselinePath`, `captureCurrent: true`, `udid`, and `outputDir`. |
| 42 | 5. Inspect the summary and artifact paths, then combine the diff with normal visual inspection and any structural/runtime evidence needed for the assertion. |
| 43 | |
| 44 | ```json |
| 45 | { |
| 46 | "baselinePath": "/tmp/baseline.png", |
| 47 | "captureCurrent": true, |
| 48 | "udid": "<UDID>", |
| 49 | "outputDir": "/tmp/argent-diff" |
| 50 | } |
| 51 | ``` |
| 52 | |
| 53 | If both images are already saved, use file paths for both sides: |
| 54 | |
| 55 | ```json |
| 56 | { |
| 57 | "baselinePath": "/tmp/baseline.png", |
| 58 | "currentPath": "/tmp/current.png", |
| 59 | "udid": "<UDID>", |
| 60 | "outputDir": "/tmp/argent-diff" |
| 61 | } |
| 62 | ``` |