메뉴
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 직업 분류 기준
| 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 detectionCommunicate 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.