Agent skill

Visual Diff Fix

This skill should be used after visual-acceptance-review has generated fix-tasks.json.

MITAuto-check passedTesting & QA

Install Visual Diff Fix

skills CLI

$ npx skills add Jason904/ui-skill-lab --skill visual-diff-fix -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install Jason904/ui-skill-lab visual-diff-fix --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/Jason904/ui-skill-lab.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/visual-diff-fix .claude/skills/visual-diff-fix && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "visual-diff-fix" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-diff-fix into .claude/skills/visual-diff-fix/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-diff-fix", 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

$skill-installer install https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-diff-fix

Type 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.

skills CLI

$ npx skills add Jason904/ui-skill-lab --skill visual-diff-fix -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install Jason904/ui-skill-lab visual-diff-fix --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Jason904/ui-skill-lab.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/visual-diff-fix .agents/skills/visual-diff-fix && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "visual-diff-fix" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-diff-fix into .agents/skills/visual-diff-fix/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-diff-fix", 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.

skills CLI

$ npx skills add Jason904/ui-skill-lab --skill visual-diff-fix -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install Jason904/ui-skill-lab visual-diff-fix --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Jason904/ui-skill-lab.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/visual-diff-fix .cursor/skills/visual-diff-fix && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "visual-diff-fix" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-diff-fix into .cursor/skills/visual-diff-fix/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-diff-fix", 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

$ gemini skills install https://github.com/Jason904/ui-skill-lab.git --path skills/visual-diff-fix

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add Jason904/ui-skill-lab --skill visual-diff-fix -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install Jason904/ui-skill-lab visual-diff-fix --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Jason904/ui-skill-lab.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/visual-diff-fix .gemini/skills/visual-diff-fix && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "visual-diff-fix" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-diff-fix into .gemini/skills/visual-diff-fix/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-diff-fix", 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.

GitHub CLI

$ gh skill install Jason904/ui-skill-lab visual-diff-fix

Installs 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).

skills CLI

$ npx skills add Jason904/ui-skill-lab --skill visual-diff-fix -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/Jason904/ui-skill-lab.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/visual-diff-fix .github/skills/visual-diff-fix && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "visual-diff-fix" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-diff-fix into .github/skills/visual-diff-fix/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-diff-fix", 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.

skills CLI

$ npx skills add Jason904/ui-skill-lab --skill visual-diff-fix -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install Jason904/ui-skill-lab visual-diff-fix --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Jason904/ui-skill-lab.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/visual-diff-fix .opencode/skills/visual-diff-fix && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "visual-diff-fix" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-diff-fix into .opencode/skills/visual-diff-fix/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-diff-fix", 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: visual-diff-fix
GitHub stars: 144
Token cost: ~978 tokens
SKILL.md length: 288 words
Files: 16 (incl. references)
Skills in repo: 8
Repo updated: Jun 29, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

This skill should be used after visual-acceptance-review has generated fix-tasks.json.

Works in 9 steps: fix-tasks.json → reference.png → visual-analysis.md / UI Type… → …
Tasks that involve Visual regression testing
SKILL.md covers Trigger Conditions, Required Inputs, Source of Truth and Main Workflow, plus 3 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Visual Diff Fix is an agent skill from Jason904/ui-skill-lab. This skill should be used after visual-acceptance-review has generated fix-tasks.json. It applies precise visual fixes from structured diff tasks, preserves source-of-truth contracts, avoids redesign and unrelated refactors, validates each batch, and outputs resolved fix task reports.

Its SKILL.md is about 980 tokens, which your agent loads only when the skill is triggered. The skill folder holds 17 other files, including reference files (for example `README.md`, `examples/convergence-report.example.md` and `examples/escalation-report.example.md`).

It sits in Testing & QA, covering Visual regression testing and Refactoring. The repository describes itself as: AI-driven UI development skill pipeline — test lab for Codex skills covering PRD-to-pixel workflow. The licence is MIT.

When your agent uses it

Tasks that involve Visual regression testing
Tasks that involve Refactoring

Example prompts

“/visual-diff-fix”

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

fix-tasks.json
reference.png
visual-analysis.md / UI Type Classification
layout-spec.md / Layout Paradigm
implementation-risks.md / Asset Strategy
component-tree.md
tokens.json
05_design_system/
Implementation code

What it can do on your machine

Read from SKILL.md and the folder at commit a71b4e2. 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.
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

Visual Diff Fix loads about 978 tokens when it runs, and up to ~4k if it reads all its reference files. Until then it costs about 75 tokens; SKILL.md has 288 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~75
When it runs · the whole SKILL.md, loaded when a task matches: ~978
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~4k

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 Jason904/ui-skill-lab at commit a71b4e2, republished under its MIT licence (© Jason904). 288 words, ~978 tokens.

Download SKILL.mdSave it as .claude/skills/visual-diff-fix/SKILL.md (or your agent's skills folder). This skill also uses 15 other files; get the full folder from GitHub.

name: visual-diff-fix
description: This skill should be used after visual-acceptance-review has generated fix-tasks.json. It applies precise visual fixes from structured diff tasks, preserves source-of-truth contracts, avoids redesign and unrelated refactors, validates each batch, and outputs resolved fix task reports.
argument-hint: [fix-tasks-json]

Version: 2.0.0

visual-diff-fix

Apply precise visual fixes from fix-tasks.json.

This skill only fixes listed visual diff tasks. It does not redesign, does not rewrite visual specs, and does not expand scope.

Trigger Conditions

Use this skill when:

07_validation/visual_acceptance/fix-tasks.json exists
visual-acceptance-review returned Fail or Conditional Pass
user asks to fix visual differences
user asks Codex to apply visual diff fixes

Required Inputs

text

ui/07_validation/visual_acceptance/
  fix-tasks.json
  comparison-report.md
  acceptance-summary.md
  region-diffs/

ui/03_visual_spec/
  visual-analysis.md
  layout-spec.md
  component-tree.md
  DESIGN.md
  tokens.json
  implementation-risks.md
  human-review-needed.md

ui/04_visual_spec_review/
  spec-review-report.md
  conflict-log.md
  revised-files-needed.md

ui/05_design_system/
  MASTER.md
  pages/target-page.md
  ux-checklist.md
  component-state-spec.md
  responsive-spec.md
  accessibility-spec.md
  implementation-constraints.md

Recommended:

text

ui/06_spec_review/
  compliance-report.md
  violation-list.json

package.json
playwright.config.*
src/
app/
components/
styles/

Source of Truth

fix-tasks.json
reference.png
visual-analysis.md / UI Type Classification
layout-spec.md / Layout Paradigm
implementation-risks.md / Asset Strategy
component-tree.md
tokens.json
05_design_system/
Implementation code

Main Workflow

Run preflight gates.
Load and validate fix-tasks.json.
Sort tasks by priority, blocking, strictness, source, and dependency.
Group related tasks by root cause and file.
Apply one small batch of fixes.
Run available validation commands.
Capture screenshot if available.
Update resolved task status.
Repeat until high/medium blocking issues are fixed or convergence is reached.
Write outputs under 08_diff_fix/.

Hard Rules

Only fix tasks listed in fix-tasks.json.
Do not redesign.
Do not refactor unrelated code.
Do not introduce new visual style.
Do not create new tokens unless task explicitly requires it and source-of-truth allows it.
Do not overwrite screenshot-derived required tokens without impact analysis.
Do not modify visual spec files.
Do not modify design system files.
Do not modify OpenSpec files.
If a task is review-required, do not auto-fix it.
If a task requires UI Type or Asset Strategy restoration, do not substitute with local spacing/color tweaks.
If a fix causes regression, rollback or mark caused-regression.

Output

Write:

text

08_diff_fix/
  fix-report.md
  fix-tasks.resolved.json
  convergence-report.md
  escalation-report.md
  screenshots/
    after-batch-1.png
    after-batch-2.png
    final.png
  validation/
    lint.log
    build.log
    test.log
    screenshot.log

convergence-report.md and escalation-report.md are only required when applicable.

Supporting Files

Read these references directly:

references/fix-workflow.md
references/preflight-gates.md
references/prioritization-rules.md
references/fix-handlers.md
references/token-protection-rules.md
references/validation-rules.md
references/convergence-rules.md
references/fix-task-schema.md
references/output-files.md

Examples:

examples/fix-tasks.example.json
examples/fix-tasks.resolved.example.json
examples/fix-report.example.md
examples/convergence-report.example.md
examples/escalation-report.example.md

Files

SKILL.md and 15 other files (references) in skills/visual-diff-fix of Jason904/ui-skill-lab.

SKILL.md
README.md
examples/convergence-report.example.md
examples/escalation-report.example.md
examples/fix-report.example.md
examples/fix-tasks.example.json
examples/fix-tasks.resolved.example.json
references/convergence-rules.md
references/fix-handlers.md
references/fix-task-schema.md
references/fix-workflow.md
references/output-files.md
references/preflight-gates.md
references/prioritization-rules.md
references/token-protection-rules.md
references/validation-rules.md

Open the folder on GitHubat commit a71b4e2

Compare with similar skills

Visual Diff Fix 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.

Visual Diff Fix compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Visual Diff Fix this skillJason904/ui-skill-lab	144	—	~978	Automated safety check: Pass	MIT	3 mo ago
Meticulous Zero Diff TaskFlintSH/Flare	135	—	~2.5k	Automated safety check: Pass	MIT	yesterday
Selector Drift Recoverypetrkindlmann/qa-skills	163	—	~5.1k	Automated safety check: Pass	MIT	3 mo ago
Triage Sonarqubenetdata/netdata	81k	—	~2.8k	Automated safety check: Notes	GPL-3.0	today
Test Guidelinesgetsentry/sentry-dart	873	—	~3.1k	Automated safety check: Pass	MIT	today
Sonarqube Analysishbmartin/graphviz2drawio	275	—	~508	Automated safety check: Notes	GPL-3.0	2 mo ago

Similar skills

Meticulous Zero Diff Task
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.
135 GitHub stars~2.5k tokensUpdated yesterday
Testing & QAAuto-check passed
Selector Drift Recovery
petrkindlmann/qa-skills
Bulk-regenerate broken test selectors after a UI refactor or redesign.
163 GitHub stars~5.1k tokensUpdated 3 mo ago
Testing & QAAuto-check passed
Triage Sonarqube
netdata/netdata
Inspect, review, or apply authorized triage decisions to SonarCloud issues and security hotspots; also review the Sonar helpers.
81k GitHub stars~2.8k tokensUpdated today
Testing & QAAuto-check: notes
Test Guidelines
getsentry/sentry-dart
Official
Enforce Sentry Dart/Flutter SDK test conventions for naming, structure, and fixtures.
873 GitHub stars~3.1k tokensUpdated today
Testing & QAAuto-check passed
Sonarqube Analysis
hbmartin/graphviz2drawio
Inspect SonarQube Cloud/SonarCloud findings for this repository using local .env credentials.
275 GitHub stars~508 tokensUpdated 2 mo ago
Testing & QAAuto-check: notes
Effect TS
tellahq/opensession
Write idiomatic Effect v4 TypeScript verified against the pinned effect@4.0.0-rc.112 source.
392 GitHub stars~3.7k tokensUpdated today
Testing & QAAuto-check passed

Questions about Visual Diff Fix

What does Visual Diff Fix do?

This skill should be used after visual-acceptance-review has generated fix-tasks.json. Visual Diff Fix is an agent skill from Jason904/ui-skill-lab.json.

When should I use Visual Diff Fix?

Visual Diff Fix fits situations like: tasks that involve Visual regression testing; tasks that involve Refactoring.

How do I install Visual Diff Fix in Claude Code?

Run `npx skills add Jason904/ui-skill-lab --skill visual-diff-fix -a claude-code`. Or copy the skill folder (skills/visual-diff-fix in Jason904/ui-skill-lab) into .claude/skills/visual-diff-fix in your project. Claude Code loads it when a task matches its description.

How do I install Visual Diff Fix in Codex?

Run `npx skills add Jason904/ui-skill-lab --skill visual-diff-fix -a codex`. Or copy the skill folder (skills/visual-diff-fix in Jason904/ui-skill-lab) into .agents/skills/visual-diff-fix in your project. Codex loads it when a task matches its description.

Can I use Visual Diff Fix 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 Jason904/ui-skill-lab --skill visual-diff-fix -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-diff-fix, .gemini/skills/visual-diff-fix, .github/skills/visual-diff-fix and .opencode/skills/visual-diff-fix in your project.

What does Visual Diff Fix need to run?

SKILL.md names no scripts, command-line tools or credentials: Visual Diff Fix is instructions for the agent only.

Does Visual Diff Fix 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 Visual Diff Fix 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 Visual Diff Fix use?

Visual Diff Fix 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 Visual Diff Fix use?

About 978 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3k tokens, read only when the agent opens those files.

What are the alternatives to Visual Diff Fix?

Skills that share tags, products or a category with Visual Diff Fix: Meticulous Zero Diff Task (FlintSH/Flare, 135 stars), Selector Drift Recovery (petrkindlmann/qa-skills, 163 stars), Triage Sonarqube (netdata/netdata, 81k stars) and Test Guidelines (getsentry/sentry-dart, 873 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visual Diff Fix?

Jason904 (a GitHub user) maintains it in Jason904/ui-skill-lab, which has 144 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on June 29, 2026.

Source: Jason904/ui-skill-lab on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Visual Diff Fix

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

visual-diff-fix

Trigger Conditions

Required Inputs

Source of Truth

Main Workflow

Hard Rules

Output

Supporting Files

Files

Compare with similar skills

Similar skills

More from Jason904/ui-skill-lab

Related

Questions about Visual Diff Fix