跳到主要内容

accesslint-diff 精选

Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use `scan` for a full audit with no diffing.

在 GitHub 打开

安装方式

cp -r plugins/agentic-awesome-skills-claude/skills/accesslint-diff ~/.claude/skills/accesslint-diff

把该 skill 目录放进客户端 skills 目录。不同客户端的目录可能不同,Claude Code 默认是 ~/.claude/skills/

整仓一次性获取:git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git

依赖与权限

  • 无需 API Key
  • 需要联网访问外部服务
  • 依赖外部命令:git node npx sed
  • 以上为按正文与 frontmatter 自动推断的信号,仅供参考;安装前建议先阅读原文。

SKILL.md 正文

来源 sickn33/agentic-awesome-skills@09e9410 · 许可 MIT · 内容未修改

Default branch: !git symbolic-ref refs/remotes/origin/HEAD --short 2>/dev/null | sed 's|.*/||' || echo main

Report only what changed. Locate; don't fix. If no URL in $ARGUMENTS, ask for one.

Parse $ARGUMENTS: strip --branch <name> if present → branch mode. If --branch has no value, use the default branch above. Remainder is the URL.

When to Use

  • Use this skill when the task matches this description: Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use scan for a full audit with no diffing.

1. Audit

PORT=$(npx -y @accesslint/chrome@latest ensure | node -e 'process.stdin.on("data",d=>process.stdout.write(""+JSON.parse(d).port))')

Stash mode (default — uncommitted changes). Tell the user first: _"Running in diff mode — stashing your changes to capture a baseline, then restoring. Your working tree will be fully restored."_ If git stash push fails, warn and exit.

git stash push -u -m "accesslint-diff-baseline"
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot
git stash pop && sleep 2
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json

Branch mode (--branch <name>). Tell the user first: _"Diffing against <name> — checking out that branch to capture a baseline, then restoring. Your working tree will be fully restored."_

Branch switching triggers a rebuild but not a browser reload — the CLI opens a fresh tab each time so it always reads the current build. Use --wait-for "<selector>" to gate the audit until the rebuild is ready; without it, warn the user that a slow build may yield a stale baseline.

Keep the branch value in the quoted branch variable below; never paste or evaluate a branch name as shell syntax.

git diff --quiet && git diff --cached --quiet || git stash push -u -m "accesslint-diff-branch"
branch="<branch>"
git check-ref-format --branch "$branch" >/dev/null
case "$branch" in -*) echo "Refusing option-like branch name: $branch" >&2; exit 1 ;; esac
git rev-parse --verify --quiet "$branch^{commit}" >/dev/null
git switch "$branch"
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot [--wait-for "<selector>"]
git switch - && git stash pop 2>/dev/null
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json [--wait-for "<selector>"]

Pass --selector, --include-aaa to both runs.

2. Report

Accessibility diff — http://localhost:3000/ vs main (94 rules, live DOM)
2 new · 1 fixed · 4 pre-existing hidden

New — Critical
- color-contrast — 2.1:1 (needs 4.5:1), #bbb on #fff
    where: main > p.subtitle   fix: darken to #767676
Fixed
- img-alt — <img src="old.jpg"> (no longer present)

Each new violation: where (selector verbatim + file:line (symbol) if source present — never fabricate), evidence, fix (mechanical change or NEEDS HUMAN).

Don't edit. For fixes: apply mechanical ones then re-run accesslint:diff to verify; for bulk work hand off to accesslint:audit.

3. Tear down

npx -y @accesslint/chrome@latest stop --all  # skip if ensure reported "managed":false

Gotchas

  • ensure always determines the port — never hardcode 9222.
  • CLI exit 2 = bad URL or page never loaded; check the dev server.
  • Stash mode: sleep 2 covers most HMR cases; if baseline looks identical to current, add --wait-for "<selector>".
  • Branch mode: no HMR — CLI opens a fresh tab each run. --wait-for is the rebuild gate.
  • Heavy DOM changes between runs cause selector drift — re-run with accesslint:scan for the full picture.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

质量与来源

所属仓库
sickn33/agentic-awesome-skills
仓库星标
4.7 万
最近更新
今天
采集时间
今天
commit
09e94102a500
内容指纹
sha256:604484bc175703c
文件路径
plugins/agentic-awesome-skills-claude/skills/accesslint-diff/SKILL.md

同仓库其它 Skill

查看全部 50 个
00-andruia-consultant
Arquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.
精选 sickn33/agentic-awesome-skills 4.7 万 原文
Claude CodeCodex CLICursor
007
Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
精选 sickn33/agentic-awesome-skills 4.7 万 原文
Claude CodeCodex CLICursor
10-andruia-skill-smith
Ingeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
精选 sickn33/agentic-awesome-skills 4.7 万 原文
Claude CodeCodex CLICursor
20-andruia-niche-intelligence
Estratega de Inteligencia de Dominio de Andru.ia. Analiza el nicho específico de un proyecto para inyectar conocimientos, regulaciones y estándares únicos del sector. Actívalo tras definir el nicho.
精选 sickn33/agentic-awesome-skills 4.7 万 原文
Claude CodeCodex CLICursor
2slides-ppt-generator
AI-powered presentation generation via the 2slides API — create slides from text, match a reference image style, summarize documents into decks, add AI voice narration, and export pages/audio. Use for any \"make slides\", \"create a deck\", or \"slides from this document\" request.
精选 sickn33/agentic-awesome-skills 4.7 万 原文
Claude CodeCodex CLICursor
360-feedback-system
360 feedback register: reviewer, subject, review cycle, visibility, due date and score, as CSV, SQL, JSON Schema or Notion on request. Use for 360 reviews or peer feedback cycles.
精选 sickn33/agentic-awesome-skills 4.7 万 原文
Claude CodeCodex CLICursor
agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
精选 shanraisshan/claude-code-best-practice 6.7 万 原文
Claude CodeCodex CLIGemini CLI
presentation-structure
Knowledge about the presentation slide format, weight system, navigation, and section structure
精选 shanraisshan/claude-code-best-practice 6.7 万 原文
Claude CodeCodex CLIGemini CLI
presentation-styling
Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
精选 shanraisshan/claude-code-best-practice 6.7 万 原文
Claude CodeCodex CLIGemini CLI
vibe-to-agentic-framework
The conceptual framework behind the presentation — what "Vibe Coding to Agentic Engineering" means, why the journey is structured the way it is, and how every slide fits the narrative arc
精选 shanraisshan/claude-code-best-practice 6.7 万 原文
Claude CodeCodex CLIGemini CLI
time-skill
Display the current time in Pakistan Standard Time (PKT, UTC+5). Use when the user asks for the current time, Pakistan time, or PKT.
精选 shanraisshan/claude-code-best-practice 6.7 万 原文
Claude CodeCodex CLIGemini CLI
weather-fetcher
Instructions for fetching current weather temperature data for Dubai, UAE from Open-Meteo API
精选 shanraisshan/claude-code-best-practice 6.7 万 原文
Claude CodeCodex CLIGemini CLI