メニュー
Use when reviewing or building UI components - ensures keyboard, screen-reader, and visual accessibility (WCAG 2.1 AA) so a11y is built in, not retrofitted.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Communicate efficiently without sacrificing clarity - natural, concise, actionable. Global skill loaded for every command and agent.
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Manages context caching to optimize token usage and cost by creating, incrementally updating, and invalidating caches while verifying integrity before reuse.
Clean code and engineering discipline: modularity, readability, sizing, naming, duplication, separation of concerns, plus the four behavioral principles - think before coding, simplicity first, surgical changes, and goal-driven execution. Global skill applied to all coding work.
Detects and resolves drift between code, documentation, and contextual knowledge, classifying each drift and recommending concrete sync actions to keep artifacts consistent.
Detects and quantifies technical, knowledge, architecture, documentation, and testing debt; rates severity and produces a prioritized paydown plan in time/risk/money terms.
| name | accessibility-review |
| description | Use when reviewing or building UI components - ensures keyboard, screen-reader, and visual accessibility (WCAG 2.1 AA) so a11y is built in, not retrofitted. |
| auto_load | ["/review"] |
| applies_to | ["reviewer","frontend","qa"] |
| mandatory_when | ["UI components","forms","interactive elements","navigation","modals/dialogs"] |
Accessibility is far cheaper to build in than to retrofit. This skill enforces a WCAG 2.1 AA baseline at review time for any UI change.
Honesty note: Full WCAG compliance requires manual testing with real assistive technology and expert review. This skill catches the common, mechanically- and visually-detectable violations — it does not certify full compliance.
| Condition | Severity |
|---|---|
| Feature unusable without a mouse; content invisible to screen readers; form with no labels | 🚫 Critical |
| Missing focus management, low contrast, missing alt text, improper ARIA | ⚠️ Important |
| Minor semantic improvements, nice-to-have enhancements | 💡 Minor |
<button>, <a>, <nav>, <main>) over <div onClick><h1>, logical heading hierarchy (no skipped levels)<ul>/<ol>, tables use <th> with scope<div>/<span> with no role/keyboard handlingalt (or alt="" if decorative)aria-label<label> (or aria-label/aria-labelledby)aria-live where relevantaria-expanded/aria-selected/aria-checked reflect actual staterole that duplicates a native element's implicit roleprefers-reduced-motion for animation// ❌ Critical: div as button — not keyboard/SR accessible
<div onClick={save}>Save</div>
// ✅
<button onClick={save}>Save</button>
// ❌ Critical: icon button with no accessible name
<button onClick={close}><XIcon /></button>
// ✅
<button onClick={close} aria-label="Close dialog"><XIcon /></button>
// ❌ Critical: input with no label
<input type="email" placeholder="Email" />
// ✅ (placeholder is NOT a label)
<label htmlFor="email">Email</label>
<input id="email" type="email" />
// ❌ Important: status update not announced
<div>{message}</div>
// ✅
<div role="status" aria-live="polite">{message}</div>
// ❌ Important: info by color only
<span style={{color:'red'}}>Failed</span>
// ✅
<span style={{color:'red'}}>❌ Failed</span>
### Accessibility: {Title}
**Severity:** {Critical/Important/Minor}
**WCAG:** {e.g. 1.4.3 Contrast, 2.1.1 Keyboard, 4.1.2 Name/Role/Value}
**Location:** {file:line}
**Problem:** {who is excluded and how}
**Fix:** {concrete change}
/review (frontend changes)clean-code, documentationeslint-plugin-jsx-a11y to the project for shift-left detection