Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Accessibility and screen-reader support, built in from the start rather than bolted on.
Install Accessibility
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit accessibility --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/accessibility .claude/skills/accessibility && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "accessibility" agent skill from https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit/tree/main/.claude/skills/accessibility into .claude/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit/tree/main/.claude/skills/accessibilityType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit accessibility --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/accessibility .agents/skills/accessibility && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "accessibility" agent skill from https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit/tree/main/.claude/skills/accessibility into .agents/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit accessibility --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/accessibility .cursor/skills/accessibility && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "accessibility" agent skill from https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit/tree/main/.claude/skills/accessibility into .cursor/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git --path .claude/skills/accessibility--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit accessibility --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/accessibility .gemini/skills/accessibility && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "accessibility" agent skill from https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit/tree/main/.claude/skills/accessibility into .gemini/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit accessibilityInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/accessibility .github/skills/accessibility && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "accessibility" agent skill from https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit/tree/main/.claude/skills/accessibility into .github/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install TheDecipherist/claude-code-mastery-project-starter-kit accessibility --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/accessibility .opencode/skills/accessibility && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "accessibility" agent skill from https://github.com/TheDecipherist/claude-code-mastery-project-starter-kit/tree/main/.claude/skills/accessibility into .opencode/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
accessibility- GitHub stars
- 338
- Token cost
- ~1.6k tokens
- SKILL.md length
- 874 words
- Files
- 1
- Skills in repo
- 24
- Repo updated
- First seen
- Licence
- MIT
At a glance
Accessibility and screen-reader support, built in from the start rather than bolted on.
- Interactive component
- SKILL.md covers Semantic HTML first, ARIA last, Use the real element, not a…, Every interactive thing needs… and Keyboard and focus, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Tasks that involve Accessibility
What it does
Accessibility is an agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. Accessibility and screen-reader support, built in from the start rather than bolted on. Claude treats a11y as an afterthought and reaches for clickable divs, skips alt text and labels, and removes focus rings. Use when building or editing any UI, page, or interactive component. Covers semantic HTML before ARIA, real buttons and links, accessible names, keyboard operability and focus management, headings and landmarks, contrast and motion, and how to actually test it. Most of it is free if you use the right element.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Accessibility. The repository describes itself as: The definitive starting point for Claude Code projects. Based on Claude Code Mastery Guides V1-V5. The licence is MIT.
When your agent uses it
- Interactive component
- Tasks that involve Accessibility
Example prompts
- “/accessibility”
What it can do on your machine
Read from SKILL.md and the folder at commit 61fbb99. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Accessibility loads about 1.6k tokens when it runs. Until then it costs about 134 tokens; SKILL.md has 874 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from TheDecipherist/claude-code-mastery-project-starter-kit at commit 61fbb99, republished under its MIT licence (© TheDecipherist). 874 words, ~1,647 tokens.
Download SKILL.mdSave it as
.claude/skills/accessibility/SKILL.md (or your agent's skills folder).- name
- accessibility
- description
- Accessibility and screen-reader support, built in from the start rather than bolted on. Claude treats a11y as an afterthought and reaches for clickable divs, skips alt text and labels, and removes focus rings. Use when building or editing any UI, page, or interactive component. Covers semantic HTML before ARIA, real buttons and links, accessible names, keyboard operability and focus management, headings and landmarks, contrast and motion, and how to actually test it. Most of it is free if you use the right element.
- when_to_use
- - Building or editing any UI, page, form, or interactive component, treat a11y as a default, not a later pass - Anything with buttons, links, forms, modals…
Accessibility: Build It In, Don't Bolt It On
Accessibility is a current best practice, not a nice-to-have for later, and most of it costs nothing if you use the right elements from the start. Claude's defaults (clickable divs, missing labels, removed focus rings) are exactly what breaks screen readers and keyboards, and they're expensive to retrofit. Treat it as part of the build, like you would performance.
Semantic HTML first, ARIA last
The native element gives you keyboard support, focus, the correct role, and screen-reader semantics for free. The first rule of ARIA is don't use ARIA when a native element already does the job, and bad ARIA is worse than none. Reach for the real element before reaching for a role.
Use the real element, not a clickable div
<button> for actions (submit, toggle, open a menu), <a href> for navigation (it goes somewhere). A <div onclick> is none of these: it isn't focusable, doesn't fire on Enter or Space, and is announced as nothing. Recreating a button with role, tabindex, and keydown handlers is work you will get subtly wrong, the native <button> is already all of that. Same for <nav>, <ul>, <table>, <label>, <input>, use them.
Every interactive thing needs an accessible name
- Images: a descriptive
alt, oralt=""for purely decorative ones so screen readers skip them. Never omit the attribute, that makes the reader announce the filename. - Form fields: a real
<label>tied to the input (for/idor wrapping). Aplaceholderis not a label, it vanishes on input, has poor contrast, and isn't reliably announced. - Icon-only buttons (hamburger, close X, search): an
aria-label. This is the single most common missing name, an icon button with no text is silent to a screen reader.
Keyboard and focus
Everything interactive must be reachable and operable by keyboard in a sensible order. Two things Claude breaks constantly:
- Never remove the focus ring (
outline: none) without replacing it, a keyboard user then can't see where they are. Use:focus-visibleto show a clear ring for keyboard users without it appearing on mouse clicks. - Manage focus on modals and route changes. Prefer the native
<dialog>withshowModal(), it traps focus, closes on Escape, and restores focus to the trigger. If you build your own, replicate all of that. In a SPA, move focus to the new view's heading on navigation, or a screen-reader user never learns the page changed.
Show full SKILL.md (474 more words)Show less
Structure: headings, landmarks, and sectioning
Headings are the outline that screen readers and search engines navigate by, so get them right:
- One
<h1>per page, the page's title. Then<h2>/<h3>in order, don't skip levels for visual size (style with CSS, keep the order logical). - Use real heading elements, not a styled
<span>or<div>. Something that just looks like a heading carries no meaning, assistive tech and crawlers don't see a heading at all. And don't wrap the heading text in a<span>to style it, style the heading element (or a class on it) directly, the heading's content should be the heading text. - Keep a heading next to the content it labels. A heading describes the block that immediately follows it, so the heading and its paragraph belong together, heading first, grouped. A heading stranded away from its content, or with unrelated markup wedged between, loses the relationship that gives it meaning to both a reader and a crawler.
Then use the document-sectioning elements for what they mean, not as styled <div>s, so assistive tech can understand and navigate the page:
- Landmarks wrap the page's regions:
<header>(banner),<nav>,<main>(one per page),<aside>(complementary),<footer>(contentinfo). Add a skip-to-content link to<main>so keyboard and screen-reader users can jump straight in instead of tabbing through the nav every time. <article>for a self-contained piece that stands on its own or repeats, a post, comment, card, product. It tells assistive tech "this is one discrete item," which is what makes a feed or list navigable.<section>for a thematic group, but only when it has a heading. A bare<section>is not a landmark and adds nothing, it becomes a navigable region only when you give it an accessible name (aria-labelledbypointing at its heading). If it's just a styling wrapper with no heading, use a<div>.
The rule both ways: reach for the element that describes the content, but overusing <section> and <article> as generic wrappers is as unhelpful as never using them.
Don't lock people out: contrast, color, zoom, motion
- Text contrast at least 4.5:1 (3:1 for large text), and never convey meaning by color alone, pair it with text, an icon, or a pattern.
- Never disable zoom (
user-scalable=no/maximum-scale=1), see responsive-css. - Respect
prefers-reduced-motionfor animations and parallax. - Announce dynamic changes (toasts, async results, validation) with an
aria-liveregion, or they happen silently for a screen reader.
Test it, don't assume it
Do a keyboard-only pass (Tab through everything, operate it with Enter/Space/Escape, watch the focus ring) and run an actual screen reader on the key flows. Automated tools (axe, Lighthouse) are worth running but catch only a fraction of issues, the keyboard and screen-reader pass is what finds the rest.
This skill is built to grow. Add a rule when a real accessibility failure has a stable, defensible fix.
© TheDecipherist, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/accessibility of TheDecipherist/claude-code-mastery-project-starter-kit.
Open the folder on GitHubat commit 61fbb99
Compare with similar skills
Accessibility next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Accessibility this skillTheDecipherist/claude-code-mastery-project-starter-kit | 338 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 98 repos | ~308 | Automated safety check: Pass | None | |
| Accessibility Reviewmarkmead/hyperui | 12k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Web Animation DesignbaptisteArno/typebot.io | 11k | 2 repos | ~2.7k | Automated safety check: Pass | Custom licence | |
| Accessibility Fixeribelick/ui-skills | 9.4k | 4 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Wcag Audit PatternsvmDeshpande/ai-agent-automation | 178 | 10 repos | ~610 | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
Accessibility Review
markmead/hyperui
Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.
Web Animation Design
baptisteArno/typebot.io
Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.
Accessibility Fixer
ibelick/ui-skills
Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.
Wcag Audit Patterns
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
More from TheDecipherist/claude-code-mastery-project-starter-kit
All 24 skills in this repoCreate Service
TheDecipherist/claude-code-mastery-project-starter-kit
Scaffold a new microservice that follows the project's server/handlers/adapters architecture.
CSS Structure
TheDecipherist/claude-code-mastery-project-starter-kit
Where CSS should live. An agent skill from TheDecipherist/claude-code-mastery-project-starter-kit.
Docker
TheDecipherist/claude-code-mastery-project-starter-kit
Production Docker best practices for writing Dockerfiles, Compose files, and Swarm stacks.
Docker Swarm
TheDecipherist/claude-code-mastery-project-starter-kit
Production Docker Swarm deployment rules: what changes when a compose file goes from a single node to a multi-node Swarm.
Mongodb Backups
TheDecipherist/claude-code-mastery-project-starter-kit
Production MongoDB backup and restore practices that the documentation gets wrong.
Mongodb Replica Sets
TheDecipherist/claude-code-mastery-project-starter-kit
Production MongoDB replica-set operation: topology, durability, host tuning, and the container-specific gotchas Claude gets wrong.
Related
Categories
Questions about Accessibility
What does Accessibility do?
Accessibility and screen-reader support, built in from the start rather than bolted on. Accessibility is an agent skill from TheDecipherist/claude-code-mastery-project-starter-kit. Accessibility and screen-reader support, built in from the start rather than bolted on.
When should I use Accessibility?
Accessibility fits situations like: interactive component; tasks that involve Accessibility.
How do I install Accessibility in Claude Code?
Run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a claude-code`. Or copy the skill folder (.claude/skills/accessibility in TheDecipherist/claude-code-mastery-project-starter-kit) into .claude/skills/accessibility in your project. Claude Code loads it when a task matches its description.
How do I install Accessibility in Codex?
Run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a codex`. Or copy the skill folder (.claude/skills/accessibility in TheDecipherist/claude-code-mastery-project-starter-kit) into .agents/skills/accessibility in your project. Codex loads it when a task matches its description.
Can I use Accessibility in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TheDecipherist/claude-code-mastery-project-starter-kit --skill accessibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/accessibility, .gemini/skills/accessibility, .github/skills/accessibility and .opencode/skills/accessibility in your project.
What does Accessibility need to run?
SKILL.md names no scripts, command-line tools or credentials: Accessibility is instructions for the agent only.
Does Accessibility access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Accessibility safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Accessibility use?
Accessibility is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Accessibility use?
About 1.6k tokens (SKILL.md is roughly 6.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Accessibility?
Skills that share tags, products or a category with Accessibility: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Accessibility?
TheDecipherist (a GitHub user) maintains it in TheDecipherist/claude-code-mastery-project-starter-kit, which has 338 GitHub stars. The repository holds 24 skills in this directory. The repository was last updated on June 29, 2026.
Source: TheDecipherist/claude-code-mastery-project-starter-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.