gate
Run every objective gate this project can prove and report the real N/N. Use before claiming any screen or component is done.
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/plugin87/ux-ui-agent-skills/HEAD/templates/product-design/.claude/commands/gate.md -o ~/.claude/commands/gate.mdgate.md
Run the checks below in order, against this project. Report the real output of each one, then a single `N/N` line. It is all or nothing: if a check fails, fix it and re-run rather than reporting a partial pass. `<harness>` means the component's `*.states.html` file, or the directory `src/components/` to sweep all of them. One-time setup: the render gates drive headless Chrome, so a fresh project needs `npm i -D playwright` once. Without it those scripts print `SKIPPED` and exit 0, which looks like a pass and is not one. ## Theme (the source of truth) ``` python3 scripts/validate_tokens.py design-tokens.json python3 scripts/validate_contrast.py design-tokens.json node scripts/build_tokens.mjs --in design-tokens.json --out src/theme.css python3 scripts/validate_theme_refs.py src/theme.css src python3 scripts/lint_hardcodes.py src python3 scripts/check_no_emoji.py src public ``` ## Rendered UI (every component harness) ``` node scripts/verify_states.mjs src/components/<harness> node scripts/verify_states.mjs --dark src/components/<harness> node scripts/axe_audit.mjs src/components/<harness> node scripts/verify_responsive.mjs src/components node scripts/verify_responsive.mjs src/components --scale=1.25 node scripts/verify_target_size.mjs src/components node scripts/verify_keyboard.mjs src/components node scripts/verify_reduced_motion.mjs src/components node scripts/verify_overflow.mjs src/components node scripts/lint_intent.mjs src/components ``` Modals and drawers add: ``` node scripts/verify_focustrap.mjs src/components/<harness> --open="#openBtn" ``` ## Then look The gates prove contrast, roles, sizes, and overflow. They do not prove the UI works. Screenshot the harness in light and dark, click every control, and confirm the state actually changed. A checkbox that passes axe and does not toggle is still broken. ## Scope, stated honestly This proves objective correctness: token consistency, WCAG 2.2 AA on a real render in both themes, keyboard operability, target size, reduced motion, responsive behaviour, no hardcoded values, no emoji. It does not prove taste. Never report a number a gate did not just produce. Note: `node scripts/accuracy_report.mjs` is the design kit's own aggregate gate and expects the kit's example harnesses. In this project, the list above is the gate.
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.
Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.
Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.
Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.
Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.