Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    UI Screenshot Drift Gate

    1

    Stop silent UI drift. Compare two local PNG screenshots, highlight changed regions, and get a reproducible PASS/FAIL gate with evidence.

    $5

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    UI Screenshot Drift Gate

    UI Screenshot Drift Gate

    Example session with this skill installed

    Run UI Screenshot Drift Gate on the bundled synthetic examples/baseline.png and examples/candidate.png. Apply examples/masks.json with tolerance 8 and a 0.5% maximum changed proportion. Return the measured verdict, report locations and diff PNG; do not capture screenshots or change source files.

    • Read your context and instructions
    • Compiled the ui screenshot drift
    • Generated the UI component

    UI Screenshot Drift Gate — Synthetic Demo

    Verdict: FAIL — the candidate exceeds the configured visual-change budget. This is a measured result from the synthetic PNG examples bundled with the skill, not a customer deployment.

    MeasurementValue
    Image size800 × 480
    Evaluated pixels380,100
    Explicitly masked pixels (fictional timestamp)3,900
    Changed pixels2,998
    Changed proportion0.7887%
    Maximum accepted proportion0.5%
    Per-channel tolerance8 / 255
    Changed bounding boxx=531, y=352, width=202, height=49

    Largest changed tiles

    Tile originChanged pixels
    (512, 320)793
    (704, 320)703
    (576, 320)424
    (512, 384)374
    (704, 384)373
    (640, 320)330
    (640, 384)1

    The synthetic fixture contains a blue action button shifted by 22 pixels; that fact comes from the fixture generator, not image classification. The gate creates report.md, report.json, and a red-highlighted diff.png under the chosen output directory.

    Review before release

    1. Inspect the diff PNG and high-change tiles to decide whether the shift was intentional.
    2. Confirm stable browser, viewport, device pixel ratio, fonts and scroll state.
    3. Check that every exclusion mask is authorized and narrowly scoped.
    4. Run separate functional, accessibility and responsive tests.

    Interpretation: FAIL means this pair exceeds the pixel drift threshold. PASS would not prove the UI works, looks good or satisfies accessibility requirements.

    diff.png

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Your coding agent says the UI is finished. Did the layout actually stay intact?

    UI Screenshot Drift Gate compares two user-supplied, identically sized 8-bit PNG screenshots locally. A dependency-free Python script measures visual changes, highlights drift in red, and writes review-ready report.md, report.json, and diff.png files.

    Included

    • Deterministic per-pixel changed-rate gate with configurable tolerance and an explicit acceptance threshold.
    • Highlighted diff image, changed bounding box, and top hotspot tiles for fast review.
    • Optional user-approved rectangle masks for truly dynamic regions; fully masked images are blocked.
    • Strict input checks for PNG CRC, size limits, matching dimensions, malformed masks, and no silent overwrites.
    • Full synthetic before/after UI example, masks, measured report, references and self-tests.
    • No API key, network, Node, Playwright, subscription, external dependency, or creator access to your files needed for the Python gate.

    Best for

    Verifying before/after snapshots of AI-edited web and app UI, triaging unintended layout shifts, and preparing evidence for release review.

    Important limitations

    The skill does not capture screenshots, browse pages, judge aesthetics or functionality, scan accessibility, or auto-fix code. Supply stable local PNG pairs captured at matching viewport, DPR, browser and fonts. PASS means only that this pair meets the chosen visual drift threshold. Other formats must be exported to supported 8-bit non-interlaced PNG.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 2 days ago

    • Passed all security checks, Safe to install

    Requires

    Python 3.9+ (standard library only)
    Python

    Listed2 days ago

    What's inside

    Frequently Asked Questions