メニュー
Universal UI/UX and accessibility rules for any web interface. Framework-agnostic - works for React, Vue, Svelte, Solid, Angular, Blazor, Razor, Twig, Jinja, ERB, Blade, and any template engine. Based on WCAG 2.2 AA, Nielsen heuristics, Material/Apple HIG.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Registers a new phase in ROADMAP.md. Slug-as-ID — multi-developer safe. Validates slug uniqueness and shape. Append at end (default), or position via --before/--after. Atomic commit.
Adopt mode for brownfield projects. Scans existing repo (manifests, layout, git, docs), infers stack/code-design, confirms with user, generates PROJECT.md + ROADMAP.md with adopted=true flag. Replaces /jdi-new for projects with code already written.
Removes a phase from ROADMAP.md. Accepts slug OR position. Refuses to remove done/current/past phases. Archives any existing phase artifacts. Atomic commit.
Upfront pre-roadmap research. Reads user idea, asks key questions, captures project-wide Definition of Done baseline, researches stack/domain, generates initial PROJECT.md + ROADMAP.md. Single agent instead of multiple parallel researchers to save tokens.
Prints a compact summary of where the project is — current phase, what the last action did, and the exact next command to run. --stats adds outcome metrics derived from artifacts (first-pass rate, loop iterations, lead time). Read-only. No agent invoked.
Adaptive question loop to capture locked decisions before planning the phase. Accepts slug or position.
| name | frontend-rules |
| description | Universal UI/UX and accessibility rules for any web interface. Framework-agnostic - works for React, Vue, Svelte, Solid, Angular, Blazor, Razor, Twig, Jinja, ERB, Blade, and any template engine. Based on WCAG 2.2 AA, Nielsen heuristics, Material/Apple HIG. |
| triggers | ["frontend rules","UI patterns","web accessibility","WCAG","UX best practices","validate interface"] |
UI/UX standards that CANNOT be violated - regardless of stack. Concepts > syntax. Works for SPA, SSR, MPA, hybrid, any template engine.
Whenever code touches a visible human interface:
.tsx, .jsx, .vue, .svelte, .astro, .qwik, .solid (JS-based components).razor, .cshtml (Blazor / Razor Pages / MVC).html, .twig, .jinja, .j2, .erb, .blade.php, .hbs, .liquid, .mustache, .ejs, .pug (template engines)Does NOT apply to: API-only backends, CLI tools, services without UI.
All mandatory. Violation = BLOCK on review.
outline: none or outline: 0 without a replacement. Focus must be perceptible in strong light and on a cheap monitor. :focus-visible is the standard<button> for action (even if styled as a link)<a href> for navigation (even if styled as a button)<form> for forms (Enter submits, native validation works)h1 -> h2 -> h3, no level skipping)<nav>, <main>, <header>, <footer>, <aside>, <section>, <article> when appropriate<ul>/<ol> for lists, not repeated <div>aria-label="descriptive action"role="alert" or aria-live="assertive"aria-busy="true" + aria-live="polite"aria-expanded="true|false" + aria-controlsrole="dialog" + aria-modal="true" + aria-labelledbyaria-describedbypadding, not margin<input>, <textarea>, <select> with:
<label htmlFor="id">, ORaria-label="...", ORaria-labelledby="id-of-another-element"aria-describedby="error-id". Error text has matching id<html lang="pt-BR"> declared. Without this screen reader reads English for pt-BR text@media (prefers-reduced-motion: reduce)Every screen/component that loads or mutates data must cover all 5:
autocomplete attribute: email, current-password, new-password, name, given-name, family-name, tel, postal-code, etc. Enables browser autofilltype="email" shows keyboard with @ on mobileinputmode="numeric" for OTP/PIN/ZIPtype="tel" for phonetype="url" for URLtype="date" for date (with fallback if browser doesn't support)pushState without reason. Single-page nav uses router that emits real history/ or Ctrl+K (convention)width + height on every <img> (avoids jump on load)font-display: swap with metric-compatible fallbacksrcset)<link rel="preload">)margin: 13pxt("key") or equivalent{% trans %}, <t>, @Localize)margin-inline-start instead of margin-leftpadding-block instead of padding-toptext-align: start/end instead of left/rightdir="auto" on fields accepting input in any languageIntl.DateTimeFormat or backend equivalentIntl.NumberFormatscript-src 'self' at minimum - no unsafe-inline, no unsafe-evalframe-ancestors 'none' or whitelist - prevents clickjackingincludeSubDomainstarget="_blank" ALWAYS with rel="noopener noreferrer" (prevents tabnabbing)action URLEach item below is automatic violation. Reviewer marks BLOCK + cites rule.
| Anti-pattern | Why it is BLOCK |
|---|---|
| Button that looks like a link / link that looks like a button | Confuses mental model, violates convention |
<div onclick> instead of <button> | No keyboard, no ARIA, no semantics |
<a href="#"> or <a href="javascript:"> for action | Becomes a destinationless link - use <button> |
| Modal without Esc close | Keyboard trap - WCAG 2.1.2 |
| Modal without visible close button | Same reason |
| Infinite spinner without timeout/fallback | User doesn't know if it's stuck |
| Auto-play media with sound | WCAG 1.4.2 |
| Toast as ONLY confirmation of destructive action | Toast disappears - destructive needs persistent |
| Disabled state without visible reason | "Why doesn't it work?" - UX bug |
| Generic error "Something went wrong" | Not actionable |
| Color as ONLY state indicator | Color blindness - WCAG 1.4.1 |
| Required marked ONLY by color (red border) | Same reason |
| Required shown ONLY after submit | User didn't know it was required |
Form without <label> or aria-label | WCAG 3.3.2 |
| Placeholder replacing label | Disappears when user types - WCAG 3.3.2 |
| Heading skip (h1 -> h3 without h2) | WCAG 1.3.1 |
<img> without alt | WCAG 1.1.1 |
<img alt="image"> or redundant alt "image of X" | Good alt describes content, not media |
| Text over image without overlay/guaranteed contrast | WCAG 1.4.3 |
| Animation > 400ms on direct interaction | Perceived as slow |
prefers-reduced-motion ignored | WCAG 2.3.3 |
| Outline removed without replacement | WCAG 2.4.7 |
Arbitrary positive tabindex (tabindex="5") | Breaks natural order - only use 0 and -1 |
lang absent on <html> | Screen reader pronounces wrong |
| Form action or href with direct user input | Risk of XSS/open redirect |
localStorage.setItem('token', ...) or similar for credential | XSS risk - use httpOnly cookie |
If task touches UI files, load checklist in mind before writing.
Apply the checklist of rules 1-10. In particular:
Consult references:
references/wcag-checklist.mdreferences/state-coverage.mdreferences/forms-patterns.mdreferences/anti-patterns.mdRun specific greps based on the type:
JSX/TSX/Vue/Svelte:
# Button without aria-label and without inner text
grep -RnE '<button[^>]*>(\s*<[^>]+/?>\s*)+</button>' src/
# Input without label
grep -RnE '<input(?![^>]*aria-label)(?![^>]*id=)' src/
# href="#" for action
grep -RnE 'href="#"' src/
# localStorage with token
grep -RnE 'localStorage\.(set|get)Item.*[Tt]oken' src/
# Outline removed
grep -RnE 'outline\s*:\s*(none|0)' src/
Server-side templates (Razor/Twig/Blade/ERB/Jinja): Similar greps adapted to the syntax.
Does NOT produce its own file. Modifies the parent agent's judgement:
references/wcag-checklist.md - WCAG 2.2 AA expanded with code examplesreferences/state-coverage.md - Patterns for loading/empty/error/success/disabled across enginesreferences/forms-patterns.md - Universal patterns for form validation and UXreferences/anti-patterns.md - Gallery of anti-patterns with wrong example + fixApplies skill before writing:
aria-label="Delete item Order #123"), undo if possible<button>, not <a> or <div>Code written comes out compliant.
<input> without labelMarks gate 5 as BLOCK:
[BLOCK] src/components/LoginForm.tsx:42
Rule: Forms - Form labels (WCAG 1.3.1, 3.3.2)
Violation: <input type="email" /> without <label>, aria-label, or aria-labelledby
Fix: <label htmlFor="email">Email</label><input id="email" type="email" />
localStorage.setItem('access_token', token)Marks gate 5 as BLOCK:
[BLOCK] src/auth/store.ts:18
Rule: UI Security - Tokens in storage
Violation: localStorage.setItem with authentication token
Why: vulnerable to XSS - any malicious script on the page reads the token
Fix: backend sets httpOnly cookie SameSite=Strict; frontend doesn't touch token
Skill is not loaded. PROJECT.md has frontend.has_frontend: false. Nothing happens.