# accessibility-diff

Diffs WCAG violations on a live page against a baseline taken before your edits. Shows what broke and what you fixed.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 947 installs · ★ 114
- Author: AccessLint
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/AccessLint/skills/tree/HEAD/plugins/accesslint/skills/accessibility-diff/SKILL.md
- Updated: 2026-08-25
- HTML: https://affpapa.org/en/nevibecode/skills/accessibility-diff

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add AccessLint/skills --skill accessibility-diff -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/accessibility-diff/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/accessibility-diff/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add AccessLint/skills --skill accessibility-diff -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/accessibility-diff/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add AccessLint/skills --skill accessibility-diff -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/accessibility-diff/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install AccessLint/skills accessibility-diff
```

2. **Manually: put the files in place**
- File: `.github/skills/accessibility-diff/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add AccessLint/skills --skill accessibility-diff -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/AccessLint/skills --path plugins/accesslint/skills/accessibility-diff
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/accessibility-diff/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add AccessLint/skills --skill accessibility-diff -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/AccessLint/skills/tree/HEAD/plugins/accesslint/skills/accessibility-diff/SKILL.md

## When to use it
- 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
- Did my latest changes break accessibility on this page?
- What a11y issues did this PR add?
- Diff accessibility against the main branch

## Similar
- [improve-codebase-architecture](https://affpapa.org/en/nevibecode/skills/improve-codebase-architecture.md) — skill · 1163035 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [tdd](https://affpapa.org/en/nevibecode/skills/tdd.md) — skill · 1141062 installs
- [skill-creator](https://affpapa.org/en/nevibecode/skills/skill-creator.md) — skill · 414180 installs
- [agent-browser](https://affpapa.org/en/nevibecode/skills/vercel-labs-agent-browser.md) — skill · 1200000 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs

From the same set: [accesslint/skills](https://affpapa.org/en/nevibecode/by/accesslint/skills.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md