Skip to content
alyn
plugin87

Gate skill

Run the one-command quality gate and report the real N/N result. Use before claiming any build/review is done.

$npx skills add plugin87/ux-ui-agent-skills --skill gate
GitHub stars
3,155
Pack installs
11k
Alyn Score
60/99
Updated
17 h ago
License
MIT

Install Gate

Pick your agent. Every command is ready to paste.

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

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads gate when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the gate skill”. In Codex, type $gate.

The skill itself

SKILL.md

GitHub

Requirements

This skill needs the full UX/UI Agent Skills kit: the gates, the references and the design-system library. Install it with npx ux-ui-agent-skills@3.1.0 init or as the Claude Code plugin. npx skills@1.7.6 add copies the skill folder and nothing else, and this skill has no guidance-only mode: its whole job is to run the gates and report their real N/N, so without the kit there is nothing for it to do.

Step 0: is the kit here? Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING, say plainly that only the skill folder was installed, name the install command above, and stop. Do not guess the contents of a file you could not open, and do not report a result you did not produce.

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

  1. 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).
  2. Report the exact N/N line it prints.
  3. 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.
  4. 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.

Tips for Gate

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • It is part of a pack with 26 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Gate

What does the Gate skill do?

Run the one-command quality gate and report the real N/N result. Use before claiming any build/review is done.

How do I install Gate?

Run "npx skills add plugin87/ux-ui-agent-skills --skill gate" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Gate work in Cursor and Codex?

Yes. Gate uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Gate free?

Gate is open source on GitHub under the MIT license. It is free to install; check the license before commercial use.

Who made Gate?

Gate is published by plugin87 in the plugin87/ux-ui-agent-skills repository, together with 25 other skills.

Similar skills. From other creators.