메뉴
Run accessibility checks on interactive UI components. Use after implementing UI, before code review. Forked to a11y-reviewer agent. Creates TodoWrite items for each check. Covers WCAG AA compliance: labels, keyboard nav, focus, color contrast, motion, and content.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when completing tasks, implementing major features, or before merging to verify work meets requirements - runs review in a forked code-reviewer agent
Activate autonomous loop mode for persistent development sessions. **CRITICAL:** Always activate this AFTER completing spec and implementation plan, BEFORE beginning implementation. This is what makes autonomous builds actually autonomous—the Stop hook enforces completion criteria.
Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes
Apply systematic root cause analysis and debugging methodologies to diagnose and fix bugs, test failures, and unexpected behavior. Use when encountering production issues, investigating test failures, diagnosing performance problems, tracing error sources through call stacks, analyzing logs and stack traces, reproducing inconsistent bugs, debugging race conditions, investigating memory leaks, or applying scientific method to problem-solving before proposing fixes.
Activate orchestrator mode. You coordinate specialists, you don't implement. MAXIMIZE parallelism with task-builder. MAXIMIZE quality with code-reviewer, codex, gemini. Speed + Quality through delegation, not through doing work yourself.
Execute ONE task in parallel with other task-builders. ALWAYS SPAWN MULTIPLE for independent tasks. ORCHESTRATOR: You coordinate, you don't implement. Spawn N task-builders for N unblocked tasks. Maximum parallelism = maximum speed = maximum quality (each task gets focused attention).
| name | accessibility-checklist |
| description | Run accessibility checks on interactive UI components. Use after implementing UI, before code review. Forked to a11y-reviewer agent. Creates TodoWrite items for each check. Covers WCAG AA compliance: labels, keyboard nav, focus, color contrast, motion, and content. |
| context | fork |
| agent | a11y-reviewer |
Run accessibility checks on every interactive component before code review.
Announce: "I'm using the accessibility-checklist skill to verify this component." This runs in a forked a11y-reviewer agent context.
Create TodoWrite items for each applicable check below. Mark as you verify.
Create todos for each:
aria-label on icon buttons, inputs without visible labels, slidersrole attribute when not using semantic HTML elementsaria-live on dynamic content (toasts, loading states, live updates)htmlFor/id:focus-visibleprefers-reduced-motionBefore marking complete, perform these manual checks:
Icon button without label:
<button aria-label="Close modal" onClick={onClose}>
<XIcon />
</button>
Live region for dynamic content:
<div aria-live="polite" aria-atomic="true">
{statusMessage}
</div>
Reduced motion support:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Focus visible styles:
button:focus-visible {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
}
After verification, provide: