accessibility-diff — скилл для Claude Code
Сравнивает нарушения доступности на живой странице до и после ваших правок. Показывает, что вы сломали, а что починили.
npx skills add AccessLint/skills --skill accessibility-diff -a claude-codeЧто делает accessibility-diff
Скилл снимает снапшот нарушений WCAG с текущей страницы, затем повторяет сканирование после ваших изменений и выдаёт разницу. По умолчанию работает через stash: прячет незакоммиченные правки, снимает baseline, возвращает их обратно и сканирует снова. Флаг --branch <name> переключает режим на сравнение с веткой.
В отчёте три блока: новые нарушения с селектором и предложением исправления, исправленные и количество старых, которые остались. Для каждого нового нарушения указывается место, доказательство и либо механическая правка, либо пометка NEEDS HUMAN. Скилл ничего не редактирует сам.
Нужен Node.js: скилл запускает npx @accesslint/cli и npx @accesslint/chrome, порт определяет автоматически через ensure. Если dev-сервер не поднят, CLI вернёт код 2. При медленной сборке в branch-режиме baseline может оказаться устаревшим, поэтому для ожидания пересборки есть --wait-for "<selector>".
Какие задачи решает
- найти, какие WCAG-нарушения добавил конкретный PR
- убедиться, что правка не сломала доступность
- получить список новых нарушений с селекторами
- отличить новые ошибки от старых
- встроить проверку доступности в CI
Примеры запросов агенту
- Проверь, не сломал ли я доступность на этой странице
- Какие a11y-нарушения добавил мой текущий PR?
- Сравни доступность с веткой main
Как установить accessibility-diff
1Через Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a claude-code2Вручную: положить файлы
~/.claude/skills/accessibility-diff/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/accessibility-diff/
1Через Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a codex2Вручную: положить файлы
.agents/skills/accessibility-diff/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a cursor2Вручную: положить файлы
.cursor/skills/accessibility-diff/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install AccessLint/skills accessibility-diff2Вручную: положить файлы
.github/skills/accessibility-diff/SKILL.md1Через Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a gemini-cli2Командой платформы
gemini skills install https://github.com/AccessLint/skills --path plugins/accesslint/skills/accessibility-diffВручную: положить файлы
.devin/skills/accessibility-diff/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о accessibility-diff
Как установить accessibility-diff в Claude Code?
Выполните npx skills add AccessLint/skills --skill accessibility-diff -a claude-code. Скилл появится в ~/.claude/skills/accessibility-diff/SKILL.md.
Что делает accessibility-diff?
Снимает снапшот нарушений WCAG с живой страницы до и после изменений, затем показывает разницу: новые нарушения, исправленные и сколько старых осталось. Сам код не правит.
Чем отличается от accessibility-scan?
accessibility-diff показывает только изменения относительно baseline — что вы добавили или починили. Полный скан одной страницы делает accessibility-scan, а всего сайта — accessibility-audit.
