Visual Diff Fix
Jason904/ui-skill-lab
This skill should be used after visual-acceptance-review has generated fix-tasks.json.
Implement a task for which no visual diffs are expected end to end, using Meticulous to drive the implementation to a clean visual diff before opening a PR.
$ npx skills add FlintSH/Flare --skill meticulous-zero-diff-task -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install FlintSH/Flare meticulous-zero-diff-task --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/FlintSH/Flare.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/meticulous-zero-diff-task .claude/skills/meticulous-zero-diff-task && 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 "meticulous-zero-diff-task" agent skill from https://github.com/FlintSH/Flare/tree/main/.agents/skills/meticulous-zero-diff-task into .claude/skills/meticulous-zero-diff-task/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "meticulous-zero-diff-task", 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/FlintSH/Flare/tree/main/.agents/skills/meticulous-zero-diff-taskType 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 FlintSH/Flare --skill meticulous-zero-diff-task -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install FlintSH/Flare meticulous-zero-diff-task --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/FlintSH/Flare.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/meticulous-zero-diff-task .agents/skills/meticulous-zero-diff-task && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "meticulous-zero-diff-task" agent skill from https://github.com/FlintSH/Flare/tree/main/.agents/skills/meticulous-zero-diff-task into .agents/skills/meticulous-zero-diff-task/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "meticulous-zero-diff-task", 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 FlintSH/Flare --skill meticulous-zero-diff-task -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install FlintSH/Flare meticulous-zero-diff-task --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/FlintSH/Flare.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/meticulous-zero-diff-task .cursor/skills/meticulous-zero-diff-task && 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 "meticulous-zero-diff-task" agent skill from https://github.com/FlintSH/Flare/tree/main/.agents/skills/meticulous-zero-diff-task into .cursor/skills/meticulous-zero-diff-task/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "meticulous-zero-diff-task", 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/FlintSH/Flare.git --path .agents/skills/meticulous-zero-diff-task--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 FlintSH/Flare --skill meticulous-zero-diff-task -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install FlintSH/Flare meticulous-zero-diff-task --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/FlintSH/Flare.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/meticulous-zero-diff-task .gemini/skills/meticulous-zero-diff-task && 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 "meticulous-zero-diff-task" agent skill from https://github.com/FlintSH/Flare/tree/main/.agents/skills/meticulous-zero-diff-task into .gemini/skills/meticulous-zero-diff-task/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "meticulous-zero-diff-task", 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 FlintSH/Flare meticulous-zero-diff-taskInstalls 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 FlintSH/Flare --skill meticulous-zero-diff-task -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/FlintSH/Flare.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/meticulous-zero-diff-task .github/skills/meticulous-zero-diff-task && 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 "meticulous-zero-diff-task" agent skill from https://github.com/FlintSH/Flare/tree/main/.agents/skills/meticulous-zero-diff-task into .github/skills/meticulous-zero-diff-task/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "meticulous-zero-diff-task", 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 FlintSH/Flare --skill meticulous-zero-diff-task -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install FlintSH/Flare meticulous-zero-diff-task --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/FlintSH/Flare.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/meticulous-zero-diff-task .opencode/skills/meticulous-zero-diff-task && 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 "meticulous-zero-diff-task" agent skill from https://github.com/FlintSH/Flare/tree/main/.agents/skills/meticulous-zero-diff-task into .opencode/skills/meticulous-zero-diff-task/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "meticulous-zero-diff-task", 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.
meticulous-zero-diff-taskImplement a task for which no visual diffs are expected end to end, using Meticulous to drive the implementation to a clean visual diff before opening a PR.
Meticulous Zero Diff Task is an agent skill from FlintSH/Flare. Implement a task for which no visual diffs are expected end to end, using Meticulous to drive the implementation to a clean visual diff before opening a PR. Use when the task's whole premise is "the UI shouldn't change" — a dependency/version upgrade, a code refactor, a migration, or similar. Meticulous isn't just a final check here, it's the loop you iterate against while implementing.
Its SKILL.md is about 2.5k 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, Code migrations and Refactoring. It works with Docker and GitLab. The repository describes itself as: A modern, lightning-fast file sharing platform built for self-hosting. Created with support for ShareX, KDE Spectacle, Flameshot, and easy to set up. The licence is MIT.
7 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit c910523. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
npxFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Meticulous Zero Diff Task loads about 2.5k tokens when it runs. Until then it costs about 104 tokens; SKILL.md has 1,140 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.
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.
The full file from FlintSH/Flare at commit c910523, republished under its MIT licence (© FlintSH). 1,140 words, ~2,524 tokens.
.claude/skills/meticulous-zero-diff-task/SKILL.md (or your agent's skills folder).To grind out a no-diff (or low-diff) implementation task, follow the workflow below step by step, using the CLI or MCP commands as described.
Before starting, run the
meticulous-cli-updateskill to ensure the Meticulous CLI and skills are up to date — unless it has already run earlier in this conversation, in which case skip it.
This skill is for tasks whose success criterion is visual stability, not visual change: dependency/version upgrades, refactors, migrations (e.g. framework/library swaps, build-tool changes), and similar work where any Meticulous diff is a sign something broke, not a feature to explain away. It also works for low-diff tasks (a handful of expected, well-understood visual changes alongside mostly-unchanged output) — the loop is the same, just with a smaller set of diffs you expect to end up justifying rather than fixing.
Make the code change described by the task (the upgrade, refactor, or migration). Commit as you go if the task naturally breaks into steps — this isn't specific to Meticulous, just do the implementation work.
.github/workflows/*.yml for uses: alwaysmeticulous/report-diffs-action/upload-assets@v1 (build assets) or upload-container@v1 (docker image).gitlab-ci.yml (or an included .gitlab/ci/*.yml) for npx @alwaysmeticulous/cli ci upload-assets (build assets) or ci upload-container (docker image)bitbucket-pipelines.yml for the same npx @alwaysmeticulous/cli ci upload-assets / ci upload-container step# CLI
meticulous agent upload-build --appDirectory <path-to-build> # assets
meticulous agent upload-build --localImageTag <image-tag> # container
meticulous agent trigger-test-run --deploymentId <deploymentId>
# MCP (upload is not 1:1 — request an upload URL, upload the artifact yourself, then register it)
request_asset_upload(size=<zipByteSize>) # or request_container_upload() — no required args
# ... upload the zip/image to the returned URL/registry yourself ...
register_asset_build(uploadId="<id>", commitSha="<sha>") # or register_container_build(uploadId="<id>", commitSha="<sha>")
trigger_test_run(deploymentId="<deploymentId>", baseSha="<sha>")trigger_test_run on MCP never infers baseSha/gitDiffOutput (compute the base locally) and always returns immediately without waiting for the run to finish (unlike the CLI, which blocks by default).
Run trigger-test-run from the repo directory to infer both the base (merge-base with the origin default branch) and the git diff automatically. See the meticulous-cli reference for the full option list — in particular, the working tree can be dirty (captured as an ephemeral commit) so you don't need to commit before each iteration below.
Note the testRunId from the output.
Inspect the diffs using the mechanics from the meticulous-review skill (Steps 1-4 there: agent test-run-diffs, screenshot images, DOM diff, timeline) — but apply this decision rule instead of the meticulous-review skill's expected-vs-regression framework:
For a no-diff task, treat every returned diff as a bug until proven otherwise. The premise of this skill is that the UI shouldn't change, so:
meticulous-review skill's Steps 2-3) to understand exactly what changed and why, using the timeline (Step 4 there) if the cause isn't obvious from the DOM/images alone. Then classify it:For a regression, reject it right away so there's a paper trail as you go — even though you're both reviewer and implementer here:
# CLI
meticulous agent reject-diff --replayDiffId=<id> --screenshotName=<name> --reason="<what broke>" --x=<0..1> --y=<0..1>
# MCP
reject_diff(replayDiffId="<id>", screenshotName="<name>", reason="<what broke>", x=<0..1>, y=<0..1>)Then fix the code so the behavior/output matches the pre-change baseline, and go back to Step 3 to rebuild and re-run (new build, same base). Once a later run confirms that diff no longer reproduces, close the loop by replying "Fixed" to the comment thread — pass the id reject-diff returned as --commentId:
# CLI
meticulous agent reply-to-diff-comment --commentId=<id> --text="Fixed."
# MCP
reply_to_diff_comment(commentId="<id>", text="Fixed.")A diff you can't fix and can't confidently justify gets rejected the same way, with a reason explaining what's blocking you so the thread reflects reality — but leave it unresolved (no "Fixed" reply), and call it out clearly and specifically in the final report and in the PR description (Step 5) so a human can make the call.
Repeat Steps 3-4 until either no diffs remain, or every remaining diff is justified or explicitly flagged as unresolved.
Once the run is clean (or every remaining diff is accounted for), commit any outstanding changes, push the branch, and open the PR.
In the PR description:
https://app.meticulous.ai/test-runs/<testRunId>/replay-diff/<replayDiffId>?screenshot=<screenshotName>.Once CI has triggered its own Meticulous test run for the pushed commit, confirm it shows the same result you already validated locally — this catches drift between your local build and CI's build (e.g. a dependency lockfile mismatch, an env var only set in CI).
# CLI (resolves from local git HEAD — already the pushed commit)
meticulous agent test-run-diffs
# MCP (git context is never inferred — resolve the testRunId from the local HEAD commit first)
get_test_run_for_commit(commitSha="<sha>")
get_test_run_diffs(testRunId="<id>")If CI hasn't triggered the run yet, wait and retry rather than re-triggering it yourself — the PR's run should come from the same CI pipeline a human reviewer will see. If the PR run shows different diffs than your local iteration did, treat that as a new signal: go back to Step 4 using the PR's testRunId.
For every diff that's still present here and that you justified rather than fixed (Step 4's Acceptable bucket), leave your reasoning on the record as a plain review comment — this is the run CI and a human reviewer will actually see:
# CLI
meticulous agent create-diff-comment --replayDiffId=<id> --screenshotName=<name> --text="<why it's justified>" --x=<0..1> --y=<0..1>
# MCP
create_diff_comment(replayDiffId="<id>", screenshotName="<name>", text="<why it's justified>", x=<0..1>, y=<0..1>)Use ignore-diff only for a Step 4 unrelated diff — one that has nothing to do with your change:
# CLI
meticulous agent ignore-diff --replayDiffId=<id> --screenshotName=<name> --reason="<why it's unrelated>" --x=<0..1> --y=<0..1>
# MCP
ignore_diff(replayDiffId="<id>", screenshotName="<name>", reason="<why it's unrelated>", x=<0..1>, y=<0..1>)Neither decides anything — the diff stays unreviewed and the check stays pending — but your reasoning is on record for the human reviewing the PR.
As the last step, submit one brief feedback note to the Meticulous team: did the iterate-to-clean loop work well for this kind of task, was anything confusing, and what would have made it easier?
# CLI
meticulous agent submit-feedback --message="<one or two sentences>" --outcome=<helped|neutral|hindered> --testRunId=<id> --skill=meticulous-zero-diff-task
# MCP
submit_feedback(message="<one or two sentences>", outcome="<helped|neutral|hindered>", testRunId="<id>", skill="meticulous-zero-diff-task")© FlintSH, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .agents/skills/meticulous-zero-diff-task of FlintSH/Flare.
Open the folder on GitHubat commit c910523
Meticulous Zero Diff Task 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 |
|---|---|---|---|---|---|---|
| Meticulous Zero Diff Task this skillFlintSH/Flare | 135 | — | ~2.5k | Automated safety check: Pass | MIT | |
| Visual Diff FixJason904/ui-skill-lab | 144 | — | ~978 | Automated safety check: Pass | MIT | |
| Dozzle Visual Snapshot Updateramir20/dozzle | 15k | — | ~797 | Automated safety check: Pass | MIT | |
| Megalinter Checknvuillam/npm-groovy-lint | 248 | 1 repos | ~3.9k | Automated safety check: Notes | MIT | |
| Sonarqube686f6c61/alfred-dev | 117 | — | ~1.6k | Automated safety check: Notes | MIT | |
| Playwright CIzebbern/claude-code-guide | 4.6k | 2 repos | ~675 | Automated safety check: Pass | MIT |
Jason904/ui-skill-lab
This skill should be used after visual-acceptance-review has generated fix-tasks.json.
amir20/dozzle
Regenerates Playwright visual snapshots for Dozzle after an intentional UI change, running them through Docker Compose so filenames match the Linux CI platform.
nvuillam/npm-groovy-lint
Collect MegaLinter lint errors for the current repository. An agent skill from nvuillam/npm-groovy-lint.
686f6c61/alfred-dev
Levantar SonarQube con Docker, analizar el código y proponer mejoras.
zebbern/claude-code-guide
Production-ready CI/CD configurations for Playwright — GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, parallel sharding, reporting, code coverage, and global setup/teardown.
petrkindlmann/qa-skills
Bulk-regenerate broken test selectors after a UI refactor or redesign.
FlintSH/Flare
Overview of the Meticulous CLI tool and its global options. An agent skill from FlintSH/Flare.
FlintSH/Flare
Fix the visual diffs that have been reviewed and rejected on a Meticulous test run, following their review comments if given.
FlintSH/Flare
Increase coverage for a Meticulous project by tracing specific under-covered files back to a real UI action in the codebase, driving that action with a real recorded browser session, and validating…
FlintSH/Flare
Iterative frontend development loop using Meticulous for per-step visual validation.
FlintSH/Flare
Analyze a completed Meticulous test run — compare the diffs against the PR description to see what's expected, then focus on finding and flagging potential regressions.
FlintSH/Flare
Run a Meticulous session simulation against a live URL and analyze the visual output — either by inspecting screenshots directly (quick-check mode) or by comparing pixel and HTML diffs against a…
Categories
Implement a task for which no visual diffs are expected end to end, using Meticulous to drive the implementation to a clean visual diff before opening a PR. Meticulous Zero Diff Task is an agent skill from FlintSH/Flare. Implement a task for which no visual diffs are expected end to end, using Meticulous to drive the implementation to a clean visual diff before opening a PR.
Meticulous Zero Diff Task fits situations like: the tasks whole premise is the UI shouldnt change — a dependency/version upgrade; A code refactor.
Run `npx skills add FlintSH/Flare --skill meticulous-zero-diff-task -a claude-code`. Or copy the skill folder (.agents/skills/meticulous-zero-diff-task in FlintSH/Flare) into .claude/skills/meticulous-zero-diff-task in your project. Claude Code loads it when a task matches its description.
Run `npx skills add FlintSH/Flare --skill meticulous-zero-diff-task -a codex`. Or copy the skill folder (.agents/skills/meticulous-zero-diff-task in FlintSH/Flare) into .agents/skills/meticulous-zero-diff-task in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add FlintSH/Flare --skill meticulous-zero-diff-task -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/meticulous-zero-diff-task, .gemini/skills/meticulous-zero-diff-task, .github/skills/meticulous-zero-diff-task and .opencode/skills/meticulous-zero-diff-task in your project.
Going by SKILL.md and its folder, Meticulous Zero Diff Task needs the command-line tools its instructions call (npx). Our summary lists: Node.js; Docker.
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
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.
Meticulous Zero Diff Task is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.5k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Meticulous Zero Diff Task: Visual Diff Fix (Jason904/ui-skill-lab, 144 stars), Dozzle Visual Snapshot Updater (amir20/dozzle, 15k stars), Megalinter Check (nvuillam/npm-groovy-lint, 248 stars) and Sonarqube (686f6c61/alfred-dev, 117 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
FlintSH (a GitHub user) maintains it in FlintSH/Flare, which has 135 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 6, 2026.
Source: FlintSH/Flare on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.