accessibility-diff — Claude Code skill: a11y regression checks
Diffs WCAG violations on a live page against a baseline taken before your edits. Shows what broke and what you fixed.
npx skills add AccessLint/skills --skill accessibility-diff -a claude-codeWhat accessibility-diff does
The skill snapshots accessibility violations from the page as it runs now, scans again after your changes, and reports the delta. The default path stashes uncommitted work, captures a baseline, pops the stash back, and rescans. Pass --branch <name> to compare against a branch instead.
The report lists new violations with selectors and suggested fixes, the ones that disappeared, and a count of pre-existing issues it hides. Each new violation gets a location, evidence, and either a mechanical fix or NEEDS HUMAN. The skill never edits files on its own.
Node.js is required: it runs npx @accesslint/cli and npx @accesslint/chrome, and the port comes from ensure, not a hardcoded value. Exit code 2 means the dev server never loaded or the URL was wrong. In branch mode a slow rebuild can produce a stale baseline, so --wait-for "<selector>" exists to hold the scan until the page is ready.
What it helps with
- find WCAG violations a specific PR introduces
- confirm an edit did not break accessibility
- get new violations with their selectors
- separate new issues from old ones
- run a11y checks as a CI gate
Example prompts for the agent
- Did my latest changes break accessibility on this page?
- What a11y issues did this PR add?
- Diff accessibility against the main branch
How to install accessibility-diff
1Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a claude-code2Manually: put the files in place
~/.claude/skills/accessibility-diff/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/accessibility-diff/
1Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a codex2Manually: put the files in place
.agents/skills/accessibility-diff/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a cursor2Manually: put the files in place
.cursor/skills/accessibility-diff/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install AccessLint/skills accessibility-diff2Manually: put the files in place
.github/skills/accessibility-diff/SKILL.md1Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a gemini-cli2Platform CLI
gemini skills install https://github.com/AccessLint/skills --path plugins/accesslint/skills/accessibility-diffManually: put the files in place
.devin/skills/accessibility-diff/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add AccessLint/skills --skill accessibility-diff -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about accessibility-diff
How do I install accessibility-diff in Claude Code?
Run npx skills add AccessLint/skills --skill accessibility-diff -a claude-code. The skill lands in ~/.claude/skills/accessibility-diff/SKILL.md.
What does accessibility-diff do?
It captures a baseline of WCAG violations on a live page, scans again after your changes, and reports what is new, what is fixed, and how many old issues remain. It does not modify code.
How is it different from accessibility-scan?
accessibility-diff reports only the delta from a baseline — what your change added or repaired. Use accessibility-scan for a full scan of one page or accessibility-audit for a whole site.
