A quality-check command that runs the project's design and accessibility checks, then reports the exact results. It also checks rendered pages in light and dark themes and verifies additional screen states.

Use it before calling a build or review finished, and fix each reported failure before running the checks again.

It prevents an agent from claiming that work is complete based on memory or assumptions instead of measured results.

gate — Skill for Claude Code by plugin87/ux-ui-agent-skills

About the project

UX/UI Agent Skills is a set of instructions, design tokens, reusable components, accessibility rules, and design-system references that guide Claude in producing interface designs and code. It is intended for developers and designers who want framework-independent, token-based UI work with accessibility checks. The catalogue entries package these UX, UI, component, and validation workflows as Claude Code skills and related add-ons.

plugin87/ux-ui-agent-skills · 3,006 stars · on GitHub · plugin87.github.io

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add plugin87/ux-ui-agent-skills --skill gate

Clone the repo

git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills

Made for: Claude Code.

Or install ux-ui-agent-skills, the plugin that ships this one along with the rest of its 26 skills, 1 command, 1 agent, 3 hooks, 2 MCP servers.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/gate/github.svg)](https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/gate)

Your own site

<a href="https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/gate"><img src="https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/gate/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/plugin87/ux-ui-agent-skills/gate"><img src="https://agentmods.dev/badge/skills/plugin87/ux-ui-agent-skills/gate.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 26 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 563 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00026	$0.00563
Opus 5.5	$0.00010	$0.00225
Sonnet 5.5	$0.00005	$0.00113
Haiku 4.5	$0.00003	$0.00056

Measured today against content hash 45b32915f1f5, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

gate scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/gate/SKILL.md · 39 lines

What it actually says

Step 0: is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Run the full quality gate and report the ACTUAL output, never a remembered or reasoned number.

Run: node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs (tokens + contrast + spec + no-hardcode + theme-refs + no-emoji + real-render WCAG + state-aware, light and dark; all-or-nothing).
Report the exact N/N line it prints.
If it is not fully green:
- List each failing check verbatim.
- Fix the cause (do not suppress the check).
- Re-run until green. Do not announce success between failures.
For any rendered HTML touched this session, also run the pixel-truth checks the gate cannot prove:
- node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> [--dark]
- node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_responsive.mjs <file>
- RENDER-AND-LOOK: screenshot the harness, park the pointer off it, inspect every state, click each control to confirm the state changed.

Honest scope: these gates prove objective correctness (tokens, a11y, no drift). They do not prove taste. Pair with DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs + human review; never claim auto-100% on aesthetics.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

today Changed 45b32915f1f5
19d ago First seen · 39 lines · 26 tokens per session scan A a45f327bfe85

Subscribe to this mod's changes

gate is a skill published in the GitHub repository plugin87/ux-ui-agent-skills (3,006 stars, last pushed today), licensed MIT. It adds 26 tokens to every session and 563 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-07.

Claude Code Design and UX Testing accessibility ai-agents claude claude-skills component-library

visual-qa

Runs rigorous visual QA across web, terminal, and paginated surfaces: an Apple HIG-based checklist, paired light/dark captures at phone and desktop widths, screenshot evidence, and a per-item PASS/FAIL verdict. Use for any UI build or change, or when asked whether a page, component, or TUI looks right or follows the…

code-yeongyu/oh-my-openagent · 78 tokens

gate

Getting it into your agent

Wrote this? Show the measurements

What it costs to keep this loaded

Grade A, and why

Nothing flagged

What it actually says

What this file has done since we first saw it

Other skills, from other repositories

visual-qa

accessibility

component-family-consistency

modular-scale-typography

extract-design

data-display-and-selection