Agent skill

Visual Acceptance Review

This skill should be used after spec-compliance-review and before visual-diff-fix.

MITAuto-check passedTesting & QA

Install Visual Acceptance Review

skills CLI

$ npx skills add Jason904/ui-skill-lab --skill visual-acceptance-review -a claude-code

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

GitHub CLI

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

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-acceptance-review -a codex

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

GitHub CLI

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

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

GitHub CLI

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

--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-acceptance-review -a gemini-cli

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

GitHub CLI

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

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-acceptance-review -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-acceptance-review .github/skills/visual-acceptance-review && 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-acceptance-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-acceptance-review into .github/skills/visual-acceptance-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-acceptance-review", 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-acceptance-review -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-acceptance-review --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-acceptance-review .opencode/skills/visual-acceptance-review && 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-acceptance-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-acceptance-review into .opencode/skills/visual-acceptance-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-acceptance-review", 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-acceptance-review
GitHub stars: 144
Token cost: ~1.1k tokens
SKILL.md length: 356 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 spec-compliance-review and before visual-diff-fix.

Works in 10 steps: reference.png → actual browser screenshot → visual-analysis.md / UI Type… → …
Tasks that involve Visual regression testing
SKILL.md covers Trigger Conditions, Required Inputs, Preflight Gates and Source of Truth, plus 4 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Visual Acceptance Review is an agent skill from Jason904/ui-skill-lab. This skill should be used after spec-compliance-review and before visual-diff-fix. It captures or analyzes actual browser screenshots and compares them against the reference design, responsive spec, visual tokens, layout spec, component tree, UI type, layout paradigm, and asset strategy. It outputs structured visual diff reports and fix-tasks without modifying code.

Its SKILL.md is about 1.1k 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/acceptance-summary.example.md` and `examples/blocked-report.example.md`).

It sits in Testing & QA, covering Visual regression testing and Regulatory compliance. 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 Regulatory compliance

Example prompts

“/visual-acceptance-review”

Workflow steps

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

reference.png
actual browser screenshot
visual-analysis.md / UI Type Classification
layout-spec.md / Layout Paradigm
implementation-risks.md / Asset Strategy
component-tree.md
tokens.json
responsive-spec.md
05_design_system/
browser health logs

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 Acceptance Review loads about 1.1k tokens when it runs, and up to ~3.7k if it reads all its reference files. Until then it costs about 98 tokens; SKILL.md has 356 words of instructions outside code blocks.

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

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). 356 words, ~1,073 tokens.

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

name: visual-acceptance-review
description: This skill should be used after spec-compliance-review and before visual-diff-fix. It captures or analyzes actual browser screenshots and compares them against the reference design, responsive spec, visual tokens, layout spec, component tree, UI type, layout paradigm, and asset strategy. It outputs structured visual diff reports and fix-tasks without modifying code.
argument-hint: [dev-server-url-or-actual-screenshot]

Version: 2.0.0

visual-acceptance-review

Validate real browser rendering against the approved visual contract.

This skill performs screenshot-based visual acceptance and produces structured fix tasks.

It does not modify code. It does not redesign UI. It does not replace spec-compliance-review.

Trigger Conditions

Use this skill when:

implementation exists
spec-compliance-review has passed or user requests diagnostic-only review
a dev server URL is available
Playwright or screenshot capability is available
user asks to compare implementation against reference image
user asks for visual acceptance report or visual diff tasks

Required Inputs

reference.png
dev server URL or actual screenshot
UI workflow files under ui/03_visual_spec/
visual spec review files under ui/04_visual_spec_review/
design system files under ui/05_design_system/

Recommended:

spec compliance outputs under ui/06_spec_review/
package.json
playwright.config.*

Preflight Gates

Stop if:

ui/04_visual_spec_review/spec-review-report.md says Fail
ui/06_spec_review/compliance-report.md says Fail, unless user explicitly requests diagnostic-only mode
no screenshot capability exists and no actual screenshot is provided

Source of Truth

reference.png
actual browser screenshot
visual-analysis.md / UI Type Classification
layout-spec.md / Layout Paradigm
implementation-risks.md / Asset Strategy
component-tree.md
tokens.json
responsive-spec.md
05_design_system/
browser health logs

Main Workflow

Run preflight gates.
Capture or load screenshots.
Compare overall visual match.
Validate UI Type, Layout Paradigm, and Asset Strategy.
Compare regions using layout-spec.md.
Compare components using component-tree.md.
Compare colors, typography, spacing, and density.
Validate responsive screenshots against responsive-spec.md.
Capture browser health issues.
Generate reports and fix-tasks.json.

Show full SKILL.md (121 more words)Show less

Hard Rules

Do not modify code.
Do not modify visual spec files.
Do not modify design system files.
Do not modify OpenSpec files.
Do not redesign UI.
Do not claim pixel-precision if no script-backed comparison exists.
Do not compare mobile/tablet directly against desktop reference.png.
Do not allow actual rendering to change UI Type, Layout Paradigm, or Asset Strategy.
Do not treat passing tests as visual acceptance.
Do not treat internal spec consistency as visual acceptance.
If a photorealistic/panorama/scene-led main visual is missing or redrawn with CSS/SVG/chart/map, mark as Fail.

Output

Write:

text

07_validation/visual_acceptance/
  screenshots/
    reference.png
    actual-desktop-hd.png
    actual-desktop.png
    actual-tablet.png
    actual-mobile.png
  comparison-report.md
  acceptance-summary.md
  fix-tasks.json
  region-diffs/
    overview.md
    layout.md
    components.md
    colors.md
    typography.md
    spacing.md
    responsive.md
    asset-strategy.md
    browser-health.md
  console-errors.log
  network-errors.log
  blocked-report.md

blocked-report.md is only required when preflight blocks the review.

Supporting Files

Read these references directly:

references/acceptance-workflow.md
references/preflight-gates.md
references/screenshot-rules.md
references/comparison-rules.md
references/ui-type-asset-validation.md
references/confidence-rules.md
references/fix-task-schema.md
references/external-reviewer-usage.md
references/output-files.md

Examples:

examples/acceptance-summary.example.md
examples/comparison-report.example.md
examples/region-diff.example.md
examples/fix-tasks.example.json
examples/blocked-report.example.md

Files

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

SKILL.md
README.md
examples/acceptance-summary.example.md
examples/blocked-report.example.md
examples/comparison-report.example.md
examples/fix-tasks.example.json
examples/region-diff.example.md
references/acceptance-workflow.md
references/comparison-rules.md
references/confidence-rules.md
references/external-reviewer-usage.md
references/fix-task-schema.md
references/output-files.md
references/preflight-gates.md
references/screenshot-rules.md
references/ui-type-asset-validation.md

Open the folder on GitHubat commit a71b4e2

Compare with similar skills

Visual Acceptance Review 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 Acceptance Review compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Visual Acceptance Review this skillJason904/ui-skill-lab	144	—	~1.1k	Automated safety check: Pass	MIT	3 mo ago
Fin Guru ChecklistAojdevStudio/Finance-Guru	322	—	~382	Automated safety check: Pass	AGPL-3.0	yesterday
Review Local UI Screenshotsxiaocang/easydict_win32	104	—	~1.1k	Automated safety check: Pass	GPL-3.0	2 days ago
Handsontable Visual Test Demoshandsontable/handsontable	22k	—	~1.3k	Automated safety check: Pass	Custom licence	yesterday
Kc Screenshotimran31415/kube-coder	388	—	~870	Automated safety check: Notes	MIT	2 days ago
Visual QAliangdabiao/Godogen	126	—	~1.4k	Automated safety check: Pass	MIT	5 mo ago

Similar skills

Fin Guru Checklist
AojdevStudio/Finance-Guru
Run a pass or fail checklist from fin-guru/checklists/ against a deliverable, such as the margin strategy, dividend framework, or cash-flow policy checklist.
322 GitHub stars~382 tokensUpdated yesterday
Testing & QAAuto-check passed
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.
104 GitHub stars~1.1k tokensUpdated 2 days ago
Testing & QAAuto-check passed
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.
22k GitHub stars~1.3k tokensUpdated yesterday
Testing & QAAuto-check passed
Kc Screenshot
imran31415/kube-coder
Capture desktop + mobile, dark + light screenshots of the kube-coder dashboard SPA for visual QA of a UI change.
388 GitHub stars~870 tokensUpdated 2 days ago
Testing & QAAuto-check: notes
Visual QA
liangdabiao/Godogen
Visual quality assurance — analyze game screenshots for defects, compare against reference, check motion in frame sequences.
126 GitHub stars~1.4k tokensUpdated 5 mo ago
Testing & QAAuto-check passed
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.
135 GitHub stars~2.3k tokensUpdated 5 days ago
Testing & QAAuto-check passed

Questions about Visual Acceptance Review

What does Visual Acceptance Review do?

This skill should be used after spec-compliance-review and before visual-diff-fix. Visual Acceptance Review is an agent skill from Jason904/ui-skill-lab. This skill should be used after spec-compliance-review and before visual-diff-fix.

When should I use Visual Acceptance Review?

Visual Acceptance Review fits situations like: tasks that involve Visual regression testing; tasks that involve Regulatory compliance.

How do I install Visual Acceptance Review in Claude Code?

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

How do I install Visual Acceptance Review in Codex?

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

Can I use Visual Acceptance Review 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-acceptance-review -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-acceptance-review, .gemini/skills/visual-acceptance-review, .github/skills/visual-acceptance-review and .opencode/skills/visual-acceptance-review in your project.

What does Visual Acceptance Review need to run?

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

Does Visual Acceptance Review 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 Acceptance Review 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 Acceptance Review use?

Visual Acceptance Review 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 Acceptance Review use?

About 1.1k tokens (SKILL.md is roughly 4.3k 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 2.6k tokens, read only when the agent opens those files.

What are the alternatives to Visual Acceptance Review?

Skills that share tags, products or a category with Visual Acceptance Review: Fin Guru Checklist (AojdevStudio/Finance-Guru, 322 stars), Review Local UI Screenshots (xiaocang/easydict_win32, 104 stars), Handsontable Visual Test Demos (handsontable/handsontable, 22k stars) and Kc Screenshot (imran31415/kube-coder, 388 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visual Acceptance Review?

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 Acceptance Review

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-acceptance-review

Trigger Conditions

Required Inputs

Preflight Gates

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 Acceptance Review