web-accessibility — скилл для Claude Code: WCAG и ARIA
Скилл для агентной разработки, который подсказывает ИИ, как строить доступные веб-интерфейсы по WCAG 2.1: паттерны ARIA, навигация с клавиатуры, поддержка скринридеров.
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a claude-codeЧто делает web-accessibility
Внутри — набор готовых примеров на TSX: кнопка с aria-pressed, модальное окно с role="dialog" и ловушкой фокуса, меню навигации с role="menubar", форма с aria-describedby для ошибок. Отдельно разобран расчёт контраста: функция getContrastRatio считает отношение по WCAG AA — 4.5:1 для обычного текста, 3:1 для крупного и элементов интерфейса. Есть класс .sr-only для контента, который видят только скринридеры.
Для проверки скилл предлагает axe-core и jest-axe: тест рендерит компонент и падает, если находятся нарушения. Так доступность попадает в обычный прогон тестов, а не в ручной чек-лист перед релизом.
Скилл рассчитан на React и TypeScript — примеры на TSX, а тесты на Jest. Если у вас Vue, Svelte или голый HTML, паттерны ARIA переносятся, но код придётся переписать. Установка идёт через npx skills add с флагом под конкретную платформу, поэтому для каждой среды команда своя.
Какие задачи решает
- разметить модальное окно с ловушкой фокуса и возвратом фокуса после закрытия
- связать ошибку валидации с полем формы через
aria-describedby - посчитать контраст двух цветов и проверить его по нормам WCAG AA
- добавить в меню роли
menubarиmenuitemсaria-expanded - настроить тест на
jest-axe, который ловит нарушения доступности в компоненте
Примеры запросов агенту
- Сделай модальное окно с
role="dialog"и ловушкой фокуса по Tab - Проверь контраст цвета текста
#767676на белом фоне — проходит ли по WCAG AA? - Добавь в форму поле email с
aria-invalidи сообщением об ошибке для скринридера
Как установить web-accessibility
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a claude-code2Вручную: положить файлы
~/.claude/skills/web-accessibility/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/web-accessibility/
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a codex2Вручную: положить файлы
.agents/skills/web-accessibility/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a cursor2Вручную: положить файлы
.cursor/skills/web-accessibility/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install hoodini/ai-agents-skills web-accessibility2Вручную: положить файлы
.github/skills/web-accessibility/SKILL.md1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a gemini-cli2Командой платформы
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/web-accessibilityВручную: положить файлы
.devin/skills/web-accessibility/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о web-accessibility
Как установить web-accessibility в Claude Code?
Выполните npx skills add hoodini/ai-agents-skills --skill web-accessibility -a claude-code. Скилл окажется в ~/.claude/skills/web-accessibility/SKILL.md.
Что делает web-accessibility?
Даёт агенту примеры доступной разметки: ARIA-паттерны для кнопок, диалогов и меню, управление фокусом с клавиатуры, расчёт контраста и тесты на jest-axe.
С какими платформами работает скилл?
Кроме Claude есть команды для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждой платформы флаг -a свой, а файл скилла кладётся в каталог этой платформы.
