Agent skill

Spec Compliance Review

This skill should be used after Codex implements a UI change and before visual acceptance review.

Install Spec Compliance Review

skills CLI

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

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

GitHub CLI

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

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

GitHub CLI

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

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

GitHub CLI

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

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

GitHub CLI

$ gh skill install Jason904/ui-skill-lab spec-compliance-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/spec-compliance-review .gemini/skills/spec-compliance-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 "spec-compliance-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/spec-compliance-review into .gemini/skills/spec-compliance-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-compliance-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 spec-compliance-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 spec-compliance-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/spec-compliance-review .github/skills/spec-compliance-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 "spec-compliance-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/spec-compliance-review into .github/skills/spec-compliance-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-compliance-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 spec-compliance-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 spec-compliance-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/spec-compliance-review .opencode/skills/spec-compliance-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 "spec-compliance-review" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/spec-compliance-review into .opencode/skills/spec-compliance-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-compliance-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: spec-compliance-review
GitHub stars: 144
Token cost: ~1.1k tokens
SKILL.md length: 351 words
Files: 17 (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 Codex implements a UI change and before visual acceptance review.

Works in 10 steps: PRD / OpenSpec spec.md → reference.png → visual-analysis.md / UI Type… → …
Tasks that involve Regulatory compliance
SKILL.md covers Trigger Conditions, Required Inputs, Preflight and Source of Truth, plus 4 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Spec Compliance Review is an agent skill from Jason904/ui-skill-lab. This skill should be used after Codex implements a UI change and before visual acceptance review. It audits source code against project-specific visual specs, design tokens, component tree, design-system rules, OpenSpec implementation strategy, UI type, layout paradigm, and asset strategy. It reports violations without redesigning or modifying code.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 18 other files, including reference files (for example `README.md`, `examples/compliance-report.example.md` and `examples/forbidden-regression-report.example.md`).

It sits in Frontend & Design, covering Regulatory compliance, Design tokens and 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 Regulatory compliance
Tasks that involve Design tokens
Tasks that involve Design systems

Example prompts

“/spec-compliance-review”

Workflow steps

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

PRD / OpenSpec spec.md
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/
OpenSpec design.md and tasks.md
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

Spec Compliance Review loads about 1.1k tokens when it runs, and up to ~4.6k if it reads all its reference files. Until then it costs about 94 tokens; SKILL.md has 351 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~94
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: ~4.6k

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). 351 words, ~1,136 tokens.

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

name: spec-compliance-review
description: This skill should be used after Codex implements a UI change and before visual acceptance review. It audits source code against project-specific visual specs, design tokens, component tree, design-system rules, OpenSpec implementation strategy, UI type, layout paradigm, and asset strategy. It reports violations without redesigning or modifying code.
argument-hint: [source-code-directory]

Version: 2.0.0

spec-compliance-review

Audit implemented frontend code against the approved visual contract and design system.

This skill verifies that implementation code complies with:

03_visual_spec/
04_visual_spec_review/
05_design_system/
OpenSpec design.md and tasks.md
source / strictness rules
UI Type, Layout Paradigm, and Asset Strategy

It does not modify code and does not perform screenshot-based visual acceptance.

Trigger Conditions

Use this skill when:

Codex has produced or modified frontend implementation
implementation is ready for code-level review
visual acceptance has not yet started
the user asks to check whether implementation complies with visual specs
the user asks to review UI implementation against tokens, component tree, or design system

Required Inputs

Read implementation code:

text

src/
app/
components/
styles/
package.json
tailwind.config.*
vite.config.*
next.config.*
playwright.config.*

Actual project paths may vary.

Read UI workflow files:

text

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 OpenSpec files:

text

proposal.md
spec.md
design.md
tasks.md
change-summary.md

Preflight

If ui/04_visual_spec_review/spec-review-report.md says Fail, stop and output a blocked compliance report.

Do not audit implementation against failed visual specs.

Source of Truth

PRD / OpenSpec spec.md
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/
OpenSpec design.md and tasks.md
Implementation code

Main Workflow

Run preflight.
Read UI Type, Layout Paradigm, Asset Strategy, Rejected Assumptions, Forbidden Layouts, and Prohibited Components.
Scan implementation files for token usage.
Compare component structure against component-tree.md.
Check UI Type / Layout Paradigm / Asset Strategy preservation.
Check design-system states.
Check responsive behavior from code and config.
Check accessibility implementation.
Check OpenSpec design/tasks compliance.
Produce reports under 06_spec_review/.

Show full SKILL.md (108 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 perform screenshot visual acceptance.
Do not treat passing tests as sufficient.
Do not treat internal spec consistency as sufficient.
Do not override source / strictness labels.
Do not let generic web guidelines override project-specific visual contract.
If implementation changes UI Type, Layout Paradigm, or Asset Strategy, mark as error.
If implementation adds Prohibited Components or Forbidden Layouts, mark as error.

Output

Write:

text

06_spec_review/
  compliance-report.md
  violation-list.json
  source-traceability-report.md
  forbidden-regression-report.md
  recommended-fixes.md

Supporting Files

Read these references directly:

references/compliance-workflow.md
references/review-checklists.md
references/token-compliance-rules.md
references/ui-type-layout-asset-rules.md
references/component-state-responsive-a11y-rules.md
references/openspec-compliance-rules.md
references/violation-schema.md
references/severity-rules.md
references/external-quality-gates.md
references/output-files.md

Examples:

examples/compliance-report.example.md
examples/violation-list.example.json
examples/source-traceability-report.example.md
examples/forbidden-regression-report.example.md
examples/recommended-fixes.example.md

Files

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

SKILL.md
README.md
examples/compliance-report.example.md
examples/forbidden-regression-report.example.md
examples/recommended-fixes.example.md
examples/source-traceability-report.example.md
examples/violation-list.example.json
references/compliance-workflow.md
references/component-state-responsive-a11y-rules.md
references/external-quality-gates.md
references/openspec-compliance-rules.md
references/output-files.md
references/review-checklists.md
references/severity-rules.md
references/token-compliance-rules.md
references/ui-type-layout-asset-rules.md
references/violation-schema.md

Open the folder on GitHubat commit a71b4e2

Compare with similar skills

Spec Compliance 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.

Spec Compliance Review compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Spec Compliance Review this skillJason904/ui-skill-lab	144	—	~1.1k	Automated safety check: Pass	MIT	3 mo 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
Design SystemOhh-889/skyroc	795	11 repos	~1.7k	Automated safety check: Pass	MIT	1 mo ago
Design Dnazanwei/design-dna	1.9k	1 repos	~2.1k	Automated safety check: Pass	MIT	1 mo ago
Scalar Design Systemscalar/scalar	16k	—	~2.7k	Automated safety check: Pass	MIT	yesterday

Similar skills

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
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
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
1.9k GitHub starsUsed in 1 repo~2.1k tokens
Frontend & DesignAuto-check passed
Scalar Design System
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
16k GitHub stars~2.7k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Stitch Taste Design System
google-labs-code/stitch-skills
Official
Generates a DESIGN.md design-language file for Google Stitch that encodes color, typography, layout, component behavior and motion rules to avoid generic AI-looking UI.
8.5k GitHub starsUsed in 15 repos~3.1k tokens
Frontend & DesignAuto-check passed

Questions about Spec Compliance Review

What does Spec Compliance Review do?

This skill should be used after Codex implements a UI change and before visual acceptance review. Spec Compliance Review is an agent skill from Jason904/ui-skill-lab. This skill should be used after Codex implements a UI change and before visual acceptance review.

When should I use Spec Compliance Review?

Spec Compliance Review fits situations like: tasks that involve Regulatory compliance; tasks that involve Design tokens; tasks that involve Design systems.

How do I install Spec Compliance Review in Claude Code?

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

How do I install Spec Compliance Review in Codex?

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

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

What does Spec Compliance Review need to run?

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

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

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

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

What are the alternatives to Spec Compliance Review?

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

Who maintains Spec Compliance 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 Spec Compliance 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

spec-compliance-review

Trigger Conditions

Required Inputs

Preflight

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 Spec Compliance Review