Review Local UI Screenshots
xiaocang/easydict_win32
Review Easydict UI automation screenshot artifacts already present in local artifacts/ui-screenshots, screenshots, or a user-provided artifact directory.
Compare saved or live app screenshots with the argent screenshot-diff tool.
Install Argent Screenshot Diff
$ npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install bbplayer-app/BBPlayer argent-screenshot-diff --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/bbplayer-app/BBPlayer.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/argent-screenshot-diff .claude/skills/argent-screenshot-diff && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "argent-screenshot-diff" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-screenshot-diff into .claude/skills/argent-screenshot-diff/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-screenshot-diff", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-screenshot-diffType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install bbplayer-app/BBPlayer argent-screenshot-diff --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bbplayer-app/BBPlayer.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/argent-screenshot-diff .agents/skills/argent-screenshot-diff && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "argent-screenshot-diff" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-screenshot-diff into .agents/skills/argent-screenshot-diff/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-screenshot-diff", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install bbplayer-app/BBPlayer argent-screenshot-diff --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bbplayer-app/BBPlayer.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/argent-screenshot-diff .cursor/skills/argent-screenshot-diff && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "argent-screenshot-diff" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-screenshot-diff into .cursor/skills/argent-screenshot-diff/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-screenshot-diff", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/bbplayer-app/BBPlayer.git --path .agents/skills/argent-screenshot-diff--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install bbplayer-app/BBPlayer argent-screenshot-diff --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bbplayer-app/BBPlayer.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/argent-screenshot-diff .gemini/skills/argent-screenshot-diff && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "argent-screenshot-diff" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-screenshot-diff into .gemini/skills/argent-screenshot-diff/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-screenshot-diff", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install bbplayer-app/BBPlayer argent-screenshot-diffInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/bbplayer-app/BBPlayer.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/argent-screenshot-diff .github/skills/argent-screenshot-diff && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "argent-screenshot-diff" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-screenshot-diff into .github/skills/argent-screenshot-diff/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-screenshot-diff", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install bbplayer-app/BBPlayer argent-screenshot-diff --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bbplayer-app/BBPlayer.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/argent-screenshot-diff .opencode/skills/argent-screenshot-diff && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "argent-screenshot-diff" agent skill from https://github.com/bbplayer-app/BBPlayer/tree/dev/.agents/skills/argent-screenshot-diff into .opencode/skills/argent-screenshot-diff/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "argent-screenshot-diff", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
argent-screenshot-diff- GitHub stars
- 1.2k
- Token cost
- ~1.1k tokens
- SKILL.md length
- 472 words
- Files
- 1
- Skills in repo
- 19
- Repo updated
- First seen
- Licence
- MIT
At a glance
Compare saved or live app screenshots with the argent screenshot-diff tool.
- Works in 5 steps: Role → When To Use → Capture Rules → …
- Testing visual regressions
- SKILL.md covers 1. Role, 2. When To Use, 3. Capture Rules and 4. Parameters, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Argent Screenshot Diff is an agent skill from bbplayer-app/BBPlayer. 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.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Testing & QA, covering Visual regression testing and Typography. The repository describes itself as: 一款简约、好用的 BiliBili 音乐播放器。 The licence is MIT.
When your agent uses it
- Testing visual regressions
- Before/after UI comparisons
- Screenshot diff checks
- Image/icon rendering changes
Example prompts
- “/argent-screenshot-diff”
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 7b98d88. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are json).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Argent Screenshot Diff loads about 1.1k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 472 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from bbplayer-app/BBPlayer at commit 7b98d88, republished under its MIT licence (© bbplayer-app). 472 words, ~1,052 tokens.
Download SKILL.mdSave it as
.claude/skills/argent-screenshot-diff/SKILL.md (or your agent's skills folder).- 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.
Show full SKILL.md (164 more words)Show less
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: truewithcaptureCurrent: true, or provide both a path and live capture flag for the same side.
5. Deterministic Flow
- Navigate to the known-good state.
- Capture a baseline PNG with
screenshotusingscale: 1.0andincludeImageInContext: false; keep the returnedpath. - Perform the interaction, apply the code change and navigate to the state under test.
- Call
screenshot-diffwith the savedbaselinePath,captureCurrent: true,udid, andoutputDir. - 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"
}© bbplayer-app, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/argent-screenshot-diff of bbplayer-app/BBPlayer.
Open the folder on GitHubat commit 7b98d88
Compare with similar skills
Argent Screenshot Diff next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Argent Screenshot Diff this skillbbplayer-app/BBPlayer | 1.2k | — | ~1.1k | Automated safety check: Pass | MIT | |
| Review Local UI Screenshotsxiaocang/easydict_win32 | 103 | — | ~1.1k | Automated safety check: Pass | GPL-3.0 | |
| Handsontable Visual Test Demoshandsontable/handsontable | 22k | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Kc Screenshotimran31415/kube-coder | 388 | — | ~870 | Automated safety check: Notes | MIT | |
| Visual QAliangdabiao/Godogen | 126 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Godot Agent Visionthedivergentai/GD-Agentic-Skills | 816 | — | ~3.5k | Automated safety check: Pass | LGPL-3.0 |
Similar skills
Handsontable Visual Test Demos
handsontable/handsontable
Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.
Kc Screenshot
imran31415/kube-coder
Capture desktop + mobile, dark + light screenshots of the kube-coder dashboard SPA for visual QA of a UI change.
Visual QA
liangdabiao/Godogen
Visual quality assurance — analyze game screenshots for defects, compare against reference, check motion in frame sequences.
Godot Agent Vision
thedivergentai/GD-Agentic-Skills
Agentic eyes for Godot work: cross-platform screenshot CLI (asset/region/window/screen) to budgeted WebP, TEMP editor viewport bridge under .gdskills/, and Taste Receptor Atlas v2 (~237…
Meticulous Fix
FlintSH/Flare
Fix the visual diffs that have been reviewed and rejected on a Meticulous test run, following their review comments if given.
More from bbplayer-app/BBPlayer
All 19 skills in this repoExpo Module
bbplayer-app/BBPlayer
Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).
Argent Metro Debugger
bbplayer-app/BBPlayer
Debug a JS runtime via CDP using argent debugger tools. An agent skill from bbplayer-app/BBPlayer.
Argent React Native Optimization
bbplayer-app/BBPlayer
Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues.
Argent Lens
bbplayer-app/BBPlayer
Propose multiple visual design variants for on-screen elements and let the human pick in the Argent Lens window.
Argent QA Flows
bbplayer-app/BBPlayer
Create repeatable QA regression E2E tests as Argent flows from test cases, tickets, or acceptance criteria.
Argent Device Interact
bbplayer-app/BBPlayer
Interact with an iOS simulator, Android emulator, or Chromium (CDP) app using argent MCP tools.
Related
Categories
Questions about Argent Screenshot Diff
What does Argent Screenshot Diff do?
Compare saved or live app screenshots with the argent screenshot-diff tool. Argent Screenshot Diff is an agent skill from bbplayer-app/BBPlayer. Compare saved or live app screenshots with the argent screenshot-diff tool.
When should I use Argent Screenshot Diff?
Argent Screenshot Diff fits situations like: testing visual regressions; before/after UI comparisons; screenshot diff checks; image/icon rendering changes.
How do I install Argent Screenshot Diff in Claude Code?
Run `npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a claude-code`. Or copy the skill folder (.agents/skills/argent-screenshot-diff in bbplayer-app/BBPlayer) into .claude/skills/argent-screenshot-diff in your project. Claude Code loads it when a task matches its description.
How do I install Argent Screenshot Diff in Codex?
Run `npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a codex`. Or copy the skill folder (.agents/skills/argent-screenshot-diff in bbplayer-app/BBPlayer) into .agents/skills/argent-screenshot-diff in your project. Codex loads it when a task matches its description.
Can I use Argent Screenshot Diff in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add bbplayer-app/BBPlayer --skill argent-screenshot-diff -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/argent-screenshot-diff, .gemini/skills/argent-screenshot-diff, .github/skills/argent-screenshot-diff and .opencode/skills/argent-screenshot-diff in your project.
What does Argent Screenshot Diff need to run?
SKILL.md names no scripts, command-line tools or credentials: Argent Screenshot Diff is instructions for the agent only.
Does Argent Screenshot Diff access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Argent Screenshot Diff safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Argent Screenshot Diff use?
Argent Screenshot Diff is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Argent Screenshot Diff use?
About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Argent Screenshot Diff?
Skills that share tags, products or a category with Argent Screenshot Diff: Review Local UI Screenshots (xiaocang/easydict_win32, 103 stars), Handsontable Visual Test Demos (handsontable/handsontable, 22k stars), Kc Screenshot (imran31415/kube-coder, 388 stars) and Visual QA (liangdabiao/Godogen, 126 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Argent Screenshot Diff?
bbplayer-app (a GitHub organization) maintains it in bbplayer-app/BBPlayer, which has 1,161 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 8, 2026.
Source: bbplayer-app/BBPlayer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.