Agent skill

Design System Governor

This skill should be used after visual-spec-review passes and before OpenSpec UI update or frontend implementation.

Install Design System Governor

skills CLI

$ npx skills add Jason904/ui-skill-lab --skill design-system-governor -a claude-code

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

GitHub CLI

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

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 design-system-governor -a codex

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

GitHub CLI

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

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

GitHub CLI

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

--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 design-system-governor -a gemini-cli

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

GitHub CLI

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

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 design-system-governor -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/design-system-governor .github/skills/design-system-governor && 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 "design-system-governor" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/design-system-governor into .github/skills/design-system-governor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-governor", 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 design-system-governor -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 design-system-governor --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/design-system-governor .opencode/skills/design-system-governor && 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 "design-system-governor" agent skill from https://github.com/Jason904/ui-skill-lab/tree/main/skills/design-system-governor into .opencode/skills/design-system-governor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-governor", 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: design-system-governor
GitHub stars: 144
Token cost: ~1.2k tokens
SKILL.md length: 398 words
Files: 19 (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-spec-review passes and before OpenSpec UI update or frontend implementation.

Works in 12 steps: reference.png — visual appearance → 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 and Required Sections to Read, plus 4 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design System Governor is an agent skill from Jason904/ui-skill-lab. This skill should be used after visual-spec-review passes and before OpenSpec UI update or frontend implementation. It expands screenshot-derived visual specs into a production design system by adding interaction states, responsive behavior, accessibility rules, UX checklist, and implementation constraints without overriding UI type, layout paradigm, component tree, rejected assumptions, or asset strategy.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 20 other files, including reference files (for example `README.md`, `examples/accessibility-spec.example.md` and `examples/component-state-spec.dashboard.example.md`).

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

Example prompts

“/design-system-governor”

Workflow steps

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

reference.png — visual appearance
visual-analysis.md / UI Type Classification
visual-analysis.md / Visible Element Inventory
visual-analysis.md / Rejected Assumptions
layout-spec.md / Layout Paradigm
layout-spec.md / Layer Model
component-tree.md
component-tree.md / Prohibited Components
implementation-risks.md / Asset Strategy
DESIGN.md
tokens.json
human-review-needed.md

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

Design System Governor loads about 1.2k tokens when it runs, and up to ~5.1k if it reads all its reference files. Until then it costs about 108 tokens; SKILL.md has 398 words of instructions outside code blocks.

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

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). 398 words, ~1,209 tokens.

Download SKILL.mdSave it as .claude/skills/design-system-governor/SKILL.md (or your agent's skills folder). This skill also uses 18 other files; get the full folder from GitHub.

name: design-system-governor
description: This skill should be used after visual-spec-review passes and before OpenSpec UI update or frontend implementation. It expands screenshot-derived visual specs into a production design system by adding interaction states, responsive behavior, accessibility rules, UX checklist, and implementation constraints without overriding UI type, layout paradigm, component tree, rejected assumptions, or asset strategy.
argument-hint: [visual-spec-directory]

Version: 2.0.0

design-system-governor

Expand a reviewed visual spec into a product-grade design system.

This skill reads the seven visual-to-spec files and optional visual-spec-review results. It adds the missing product-level rules that static screenshots cannot show: states, responsive behavior, accessibility, motion, and implementation constraints.

It must never redesign the UI or override screenshot-derived facts.

Trigger Conditions

Use this skill when:

visual-spec-review has passed or conditionally passed
the user asks to build or expand a design system from visual specs
the user asks to add hover/focus/loading/empty/error states
the user asks to add responsive and accessibility rules
the visual spec must be prepared for OpenSpec UI update or Codex implementation

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

Recommended:

text

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

If spec-review-report.md says Fail, stop. Do not generate 05_design_system/.

Source of Truth

reference.png — visual appearance
visual-analysis.md / UI Type Classification
visual-analysis.md / Visible Element Inventory
visual-analysis.md / Rejected Assumptions
layout-spec.md / Layout Paradigm
layout-spec.md / Layer Model
component-tree.md
component-tree.md / Prohibited Components
implementation-risks.md / Asset Strategy
DESIGN.md
tokens.json
human-review-needed.md

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 DESIGN.md:

UI Type and Rendering Strategy
Asset Strategy
Forbidden Assumptions
Implementation Rules

From tokens.json:

source
confidence
strictness
usedBy
bboxRef if present

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

Main Workflow

Confirm visual-spec-review did not fail.
Read UI Type and Layout Paradigm.
Read Rejected Assumptions and Prohibited Components.
Read Asset Strategy.
Branch design-system generation by UI Type.
Generate component states only for allowed components.
Generate responsive rules without changing layout paradigm.
Generate accessibility rules.
Generate implementation constraints.
Write 05_design_system/.

Hard Rules

Do not override screenshot-derived values.
Do not change UI Type.
Do not change Layout Paradigm.
Do not change Asset Strategy.
Do not add prohibited components.
Do not add rejected layouts.
Do not invent dashboard components for non-dashboard UIs.
Do not redraw raster/photorealistic main visuals with CSS/SVG if Asset Strategy forbids it.
Do not generate frontend code.
Do not modify 03_visual_spec/.
Do not modify 04_visual_spec_review/.
Do not merge this skill with implementation or validation skills.

Output

Write:

text

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

Supporting Files

Read these references directly:

references/governance-workflow.md
references/ui-type-branching-rules.md
references/state-rules.md
references/responsive-rules.md
references/accessibility-rules.md
references/asset-aware-design-rules.md
references/implementation-constraints-rules.md
references/external-skill-usage.md
references/output-files.md

Examples:

examples/master.example.md
examples/target-page.panorama.example.md
examples/target-page.dashboard.example.md
examples/component-state-spec.panorama.example.md
examples/component-state-spec.dashboard.example.md
examples/responsive-spec.example.md
examples/accessibility-spec.example.md
examples/implementation-constraints.example.md

Files

SKILL.md and 18 other files (references) in skills/design-system-governor of Jason904/ui-skill-lab.

SKILL.md
README.md
examples/accessibility-spec.example.md
examples/component-state-spec.dashboard.example.md
examples/component-state-spec.panorama.example.md
examples/implementation-constraints.example.md
examples/master.example.md
examples/responsive-spec.example.md
examples/target-page.dashboard.example.md
examples/target-page.panorama.example.md
references/accessibility-rules.md
references/asset-aware-design-rules.md
references/external-skill-usage.md
references/governance-workflow.md
references/implementation-constraints-rules.md
references/output-files.md
references/responsive-rules.md
references/state-rules.md
references/ui-type-branching-rules.md

Open the folder on GitHubat commit a71b4e2

Compare with similar skills

Design System Governor 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.

Design System Governor compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Design System Governor this skillJason904/ui-skill-lab	144	—	~1.2k	Automated safety check: Pass	MIT	3 mo ago
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar	5.7k	1 repos	~1.1k	Automated safety check: Pass	MIT	18 days ago
Extract DesignManavarya09/design-extract	4.2k	—	~786	Automated safety check: Notes	MIT	2 days ago
Color Auditrome-os/rome	748	—	~2.7k	Automated safety check: Pass	MIT	today
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill	138	—	~3k	Automated safety check: Pass	MIT	10 days ago
UI Component Spec Designerplugin87/ux-ui-agent-skills	1.6k	—	~2.8k	Automated safety check: Pass	MIT	yesterday

Similar skills

UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
5.7k GitHub starsUsed in 1 repo~1.1k tokens
Frontend & DesignAuto-check passed
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
4.2k GitHub stars~786 tokensUpdated 2 days ago
Frontend & DesignAuto-check: notes
Color Audit
rome-os/rome
Audit a design system's color palette against measurable color-science disciplines — WCAG/APCA contrast of declared token pairs, perceptual (OKLCH) ramp uniformity, color-blindness safety of…
748 GitHub stars~2.7k tokensUpdated today
Frontend & DesignAuto-check passed
Material Design 3 UI/UX Guide
skydashnet/material-design-3-ui-skill
Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.
138 GitHub stars~3k tokensUpdated 10 days ago
Frontend & DesignAuto-check passed
UI Component Spec Designer
plugin87/ux-ui-agent-skills
Writes a complete UI component spec with anatomy, variants, sizes, eight interaction states, design-token mapping and accessibility notes before or alongside code.
1.6k GitHub stars~2.8k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Typeui Fundamentals
bergside/typeui
Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements.
2k GitHub stars~861 tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed

Questions about Design System Governor

What does Design System Governor do?

This skill should be used after visual-spec-review passes and before OpenSpec UI update or frontend implementation. Design System Governor is an agent skill from Jason904/ui-skill-lab. This skill should be used after visual-spec-review passes and before OpenSpec UI update or frontend implementation.

When should I use Design System Governor?

Design System Governor fits situations like: tasks that involve Design systems; tasks that involve Accessibility.

How do I install Design System Governor in Claude Code?

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

How do I install Design System Governor in Codex?

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

Can I use Design System Governor 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 design-system-governor -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-system-governor, .gemini/skills/design-system-governor, .github/skills/design-system-governor and .opencode/skills/design-system-governor in your project.

What does Design System Governor need to run?

SKILL.md names no scripts, command-line tools or credentials: Design System Governor is instructions for the agent only.

Does Design System Governor 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 Design System Governor 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 Design System Governor use?

Design System Governor 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 Design System Governor use?

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

What are the alternatives to Design System Governor?

Skills that share tags, products or a category with Design System Governor: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Extract Design (Manavarya09/design-extract, 4.2k stars), Color Audit (rome-os/rome, 748 stars) and Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 138 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design System Governor?

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 Design System Governor

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

design-system-governor

Trigger Conditions

Required Inputs

Source of Truth

Required Sections to Read

Main Workflow

Hard Rules

Output

Supporting Files

Files

Compare with similar skills

Similar skills

More from Jason904/ui-skill-lab

Related

Questions about Design System Governor