Menu
WCAG 2.2 AA quick reference — semantics, keyboard, names, states, contrast, motion, errors. Use when building or reviewing UI components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Rubric for keeping Claude Code sessions cheap without losing quality — model tiering, cache hygiene, Read discipline, MCP pruning, subagent isolation. Use when cost feels wrong, before setting a budget, or when onboarding a teammate.
Safe schema-migration patterns for systems under live traffic — expand/contract, backfill, double-write, shadow-read, online DDL. Use when authoring, reviewing, or sequencing a migration that can't take a maintenance window.
What good observability looks like — structured logs, trace spans, metrics, correlation ids, and the instrumentation rules that turn logs into answers. Use when adding a feature, reviewing a service, or debugging a prod issue.
REST and GraphQL API design conventions — resource modeling, pagination, error envelopes, versioning, idempotency. Use when adding, changing, or reviewing endpoints.
Apply the Write/Select/Compress/Isolate framework to manage the context window. Use when the task is long, the transcript is bloated, the model is drifting, or before /holocron:handoff.
Hypothesis-driven debugging — reproduce, hypothesize, probe, locate, fix, guard. Use when something is broken and you don't yet know why.
| name | a11y-checklist |
| description | WCAG 2.2 AA quick reference — semantics, keyboard, names, states, contrast, motion, errors. Use when building or reviewing UI components. |
Use this as a walk-through, top to bottom. If you can't answer "yes" or "N/A" for a line, fix it.
<button> for actions. <a> for navigation. Lists use <ul>/<ol>. Landmarks use <main>/<nav>/<header>/<footer>/<aside>.<h1>, no skipped levels.<label>s (or aria-labelledby). Placeholder is not a label.Tab.:focus-visible without replacement.aria-label.alt; decorative alt="".aria-describedby.aria-expanded, aria-selected, aria-pressed, aria-checked, aria-invalid reflect the current state and update as it changes.aria-busy or a live region announcement.role="status" or role="alert" live region (use alert sparingly — it's interruptive).prefers-reduced-motion. No auto-animating carousels, parallax, or transitions without the opt-out.<main> landmark and a sensible lang on <html>.aria-required or required).role="button" on a <div> — use <button> insteadaria-hidden on interactive content — almost always wrongCommon SCs you'll cite: 1.1.1 (non-text alt), 1.3.1 (info and relationships), 1.4.3 (contrast), 2.1.1 (keyboard), 2.4.3 (focus order), 2.4.7 (focus visible), 3.3.1 (error identification), 4.1.2 (name, role, value), 4.1.3 (status messages).