Agent skill

Visual Spec Review

This skill should be used after visual-to-spec has produced 03visualspec/ and before design-system-governor or frontend implementation begins.

MITAuto-check passedFrontend & Design

Install Visual Spec Review

skills CLI

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

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

GitHub CLI

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

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

GitHub CLI

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

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

GitHub CLI

$ gh skill install Jason904/ui-skill-lab visual-spec-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-spec-review .cursor/skills/visual-spec-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-spec-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-spec-review into .cursor/skills/visual-spec-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-spec-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-spec-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-spec-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-spec-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-spec-review .gemini/skills/visual-spec-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-spec-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-spec-review into .gemini/skills/visual-spec-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-spec-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-spec-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-spec-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-spec-review .github/skills/visual-spec-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-spec-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-spec-review into .github/skills/visual-spec-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-spec-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-spec-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-spec-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-spec-review .opencode/skills/visual-spec-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-spec-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/visual-spec-review into .opencode/skills/visual-spec-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-spec-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-spec-review
GitHub stars: 144
Token cost: ~1.6k tokens
SKILL.md length: 639 words
Files: 14 (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-to-spec has produced 03visualspec/ and before design-system-governor or frontend implementation begins.

Works in 10 steps: reference.png — visual appearance and… → visual-analysis.md / UI Type… → visual-analysis.md / Visible Element… → …
Tasks that involve Design systems
SKILL.md covers Trigger Conditions, Required Inputs, Source of Truth Hierarchy and Required Sections to Read, plus 5 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Visual Spec Review is an agent skill from Jason904/ui-skill-lab. This skill should be used after visual-to-spec has produced 03visualspec/ and before design-system-governor or frontend implementation begins. It independently reviews extracted visual specs against the reference screenshot, UI type, layout paradigm, visible-element evidence, rejected assumptions, and asset strategy, catching hallucinations, inconsistencies, and implementation blockers.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including reference files (for example `README.md`, `examples/conflict-log.example.md` and `examples/optional-patch.example.md`).

It sits in Frontend & Design, covering Design systems. 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 Design systems

Example prompts

“/visual-spec-review”

Workflow steps

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

reference.png — visual appearance and screenshot facts
visual-analysis.md / UI Type Classification — UI type and high-level interpretation
visual-analysis.md / Visible Element Inventory — reference-visible evidence and bbox mapping
visual-analysis.md / Rejected Assumptions — forbidden interpretations
layout-spec.md / Layout Paradigm — layout strategy
component-tree.md — implementation component structure
implementation-risks.md / Asset Strategy — asset and rendering strategy
DESIGN.md — readable summary contract
tokens.json — consumable token values
human-review-needed.md — unresolved review gates

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

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

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). 639 words, ~1,632 tokens.

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

name: visual-spec-review
description: This skill should be used after visual-to-spec has produced 03_visual_spec/ and before design-system-governor or frontend implementation begins. It independently reviews extracted visual specs against the reference screenshot, UI type, layout paradigm, visible-element evidence, rejected assumptions, and asset strategy, catching hallucinations, inconsistencies, and implementation blockers.
argument-hint: [visual-spec-directory]

Version: 2.0.0

visual-spec-review

Review visual-to-spec outputs before implementation.

This skill audits the seven files in 03_visual_spec/ and determines whether they form a reliable frontend implementation contract.

It must not only check internal consistency. It must also verify that the visual spec still matches the reference screenshot, UI type, visible element evidence, rejected assumptions, and asset strategy.

Trigger Conditions

Use this skill when:

visual-to-spec has produced 03_visual_spec/
the user asks to review or validate visual specs
the user asks whether the UI spec is reliable before implementation
the user asks to catch hallucinations in layout-spec or component-tree
the user asks to validate screenshot-derived tokens, layout, or component tree
the implementation should not start until visual spec quality is confirmed

Required Inputs

Read:

text

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

Do not look for separate files such as:

text

ui-type-classification.md
visible-element-inventory.md
rejected-assumptions.md
asset-manifest.md

Those concepts must be read from fixed sections inside the seven visual-to-spec files.

Source of Truth Hierarchy

reference.png — visual appearance and screenshot facts
visual-analysis.md / UI Type Classification — UI type and high-level interpretation
visual-analysis.md / Visible Element Inventory — reference-visible evidence and bbox mapping
visual-analysis.md / Rejected Assumptions — forbidden interpretations
layout-spec.md / Layout Paradigm — layout strategy
component-tree.md — implementation component structure
implementation-risks.md / Asset Strategy — asset and rendering strategy
DESIGN.md — readable summary contract
tokens.json — consumable token values
human-review-needed.md — unresolved review gates

Required Sections to Read

From visual-analysis.md:

UI Type Classification
Visible Element Inventory
Rejected Assumptions

From layout-spec.md:

Layout Paradigm
Layer Model
Region Layout
Forbidden Layouts

From component-tree.md:

Component Tree Type
bboxRef for reference-visible components
Prohibited Components

From implementation-risks.md:

Asset Strategy
UI Type Drift Risks
Asset Misuse Risks
Hallucinated Component Risks

From human-review-needed.md:

high-impact structure risks
UI type confidence
layout paradigm confidence
asset strategy confidence
visible element inventory completeness

From DESIGN.md:

UI Type and Rendering Strategy
Asset Strategy
Forbidden Assumptions
Implementation Rules

From tokens.json:

source
confidence
strictness
usedBy
bboxRef if present

Review Stages

Run all review stages:

R0 — UI Type Consistency Review
R1 — Visible Element Evidence Review
R2 — Rejected Assumptions Review
R3 — Asset Strategy Review
R4 — Token and Schema Review
R5 — Component Tree Feasibility Review
R6 — Layout Spec Consistency Review
R7 — PRD / Prompt Pack Alignment Review
R8 — Human Review Gate Review

Detailed rules are in references/review-checklists.md.

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

Hard Rules

Do not treat internal spec consistency as sufficient.
Always validate against UI Type, Layout Paradigm, Visible Element Inventory, Rejected Assumptions, and Asset Strategy.
Do not pass a spec if panorama-scene, image-led, or scene-led UI has been converted into a dashboard layout.
Any reference-visible component must have bbox, bboxRef, or visual evidence in visual-analysis.md / Visible Element Inventory.
Any component or layout listed in Rejected Assumptions, Forbidden Layouts, or Prohibited Components must be blocking.
If the UI requires raster/image asset usage, a CSS/SVG redraw strategy for the main visual is a failure.
Do not silently repair source specs. Report required revisions and optionally provide patches.
Do not rewrite the UI design.
Do not create new visual-to-spec output files.
Do not merge this skill with design-system-governor, spec-compliance-review, or visual-acceptance-review.

Output

Write:

text

04_visual_spec_review/
  spec-review-report.md
  conflict-log.md
  revised-files-needed.md
  optional-patches/
    visual-analysis.patch.md
    layout-spec.patch.md
    component-tree.patch.md
    DESIGN.patch.md
    tokens.patch.json
    implementation-risks.patch.md
    human-review-needed.patch.md

Only create optional patch files when the correction is clear. Otherwise, list the required revision in revised-files-needed.md.

Pass / Conditional Pass / Fail

Pass only when:

UI Type matches the reference screenshot
Layout Paradigm matches UI Type
all reference-visible components have visible evidence
no rejected assumptions are violated
asset strategy exists and matches the UI type
tokens.json is parseable
component-tree is implementable and aligned with UI Type

Fail if any of the following occurs:

UI Type mismatch
Layout Paradigm mismatch
panorama-scene / image-led / scene-led UI is abstracted as dashboard
reference-visible component lacks bbox / bboxRef / visual evidence
Rejected Assumptions / Prohibited Components are violated
Asset Strategy is missing or conflicts with UI Type
main visual should be raster asset but is specified as CSS/SVG redraw
tokens.json cannot be parsed

Supporting Files

Read these references directly:

references/review-workflow.md
references/review-checklists.md
references/ui-type-review-rules.md
references/visible-evidence-rules.md
references/rejected-assumptions-rules.md
references/asset-strategy-review.md
references/pass-fail-rules.md
references/output-files.md

Examples:

examples/spec-review-report.example.md
examples/conflict-log.example.md
examples/revised-files-needed.example.md
examples/optional-patch.example.md

Files

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

SKILL.md
README.md
examples/conflict-log.example.md
examples/optional-patch.example.md
examples/revised-files-needed.example.md
examples/spec-review-report.example.md
references/asset-strategy-review.md
references/output-files.md
references/pass-fail-rules.md
references/rejected-assumptions-rules.md
references/review-checklists.md
references/review-workflow.md
references/ui-type-review-rules.md
references/visible-evidence-rules.md

Open the folder on GitHubat commit a71b4e2

Compare with similar skills

Visual Spec 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 Spec Review compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Visual Spec Review this skillJason904/ui-skill-lab	144	—	~1.6k	Automated safety check: Pass	MIT	3 mo ago
Impeccablebestofjs/bestofjs	3.1k	26 repos	~2.6k	Automated safety check: Pass	MIT	6 days ago
Figma Design System Builderwarpdotdev/warp	65k	2 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Figma use_figma Plugin API Ruleswarpdotdev/warp	65k	4 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
UI StylingOhh-889/skyroc	795	13 repos	~2.5k	Automated safety check: Pass	MIT	1 mo ago
Shadcnsupabase/evals	145	43 repos	~4.5k	Automated safety check: Pass	Apache-2.0	today

Similar skills

Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
3.1k GitHub starsUsed in 26 repos~2.6k tokens
Frontend & DesignAuto-check passed
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
65k GitHub starsUsed in 2 repos~4.4k tokens
Frontend & DesignAuto-check passed
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
65k GitHub starsUsed in 4 repos~4.4k tokens
Frontend & DesignAuto-check passed
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
795 GitHub starsUsed in 13 repos~2.5k tokens
Frontend & DesignAuto-check passed
Shadcn
supabase/evals
Official
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.
145 GitHub starsUsed in 43 repos~4.5k tokens
Frontend & DesignAuto-check passed
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
795 GitHub starsUsed in 11 repos~1.7k tokens
Frontend & DesignAuto-check passed

Questions about Visual Spec Review

What does Visual Spec Review do?

This skill should be used after visual-to-spec has produced 03visualspec/ and before design-system-governor or frontend implementation begins. Visual Spec Review is an agent skill from Jason904/ui-skill-lab. This skill should be used after visual-to-spec has produced 03visualspec/ and before design-system-governor or frontend implementation begins.

When should I use Visual Spec Review?

Visual Spec Review fits situations like: tasks that involve Design systems.

How do I install Visual Spec Review in Claude Code?

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

How do I install Visual Spec Review in Codex?

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

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

What does Visual Spec Review need to run?

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

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

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

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

What are the alternatives to Visual Spec Review?

Skills that share tags, products or a category with Visual Spec Review: Impeccable (bestofjs/bestofjs, 3.1k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visual Spec 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 Spec 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-spec-review

Trigger Conditions

Required Inputs

Source of Truth Hierarchy

Required Sections to Read

Review Stages

Hard Rules

Output

Pass / Conditional Pass / Fail

Supporting Files

Files

Compare with similar skills

Similar skills

More from Jason904/ui-skill-lab

Related

Questions about Visual Spec Review