peterruiter/claude-build-framework

Realiza uma verificação completa de acessibilidade conforme WCAG 2.2 AA — axe-core via Playwright em todas as páginas principais nos modos claro e escuro nos tamanhos 1440/390 (e 320 para reflow), além de testes manuais e contratuais. Use quando o usuário solicitar "passagem de acessibilidade", "WCAG", "auditoria a11y", "leitor de tela" ou antes da primeira versão pública.

O que é claude-build-framework?

Este skill implementa uma auditoria de acessibilidade abrangente e automatizada para aplicações web, seguindo o padrão WCAG 2.2 AA. Ele utiliza o axe-core integrado ao Playwright para varrer todas as páginas principais em diferentes viewports (1440px, 390px e 320px para reflow) e temas (claro e escuro). Além das verificações automatizadas, inclui testes manuais como espaçamento de texto, zoom de 200%, alternativas de arrastar, autenticação acessível e um script de teclado para padrões interativos (diálogos, abas, links de pular). O skill também gera relatórios detalhados (antes/depois), corrige problemas em componentes compartilhados, adiciona testes de contrato para prevenir regressões e produz uma página de declaração de acessibilidade com limitações conhecidas. É executado sob demanda, idealmente com poucos outros agentes rodando em paralelo, e seus resultados são registrados em arquivos JSON e no STATE.md para rastreamento contínuo.

Funciona com✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/peterruiter/claude-build-framework/tree/HEAD/skills/a11y-pass

Documentação

Passagem de acessibilidade

Referência: ${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md e ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md. WCAG 2.2 AA faz parte da definição de pronto de cada funcionalidade; esta passagem é a varredura completa adicional.

1. Configuração

Fixe e instale as ferramentas fora do produto: npm i --prefix <pasta> playwright@<versão fixada> axe-core@<versão fixada>; A11Y_TOOLS=<pasta>.
Execute o aplicativo localmente com dados de demonstração em um banco de dados temporário e sua própria porta.
Crie tests/a11y/pages.json listando todas as páginas principais (e diálogos via open), com lang por página e um módulo signIn para páginas autenticadas.
Execute a passagem quando poucos outros agentes estiverem rodando; faça pequenas edições direcionadas em componentes compartilhados.

2. Medição ("antes")

node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-before.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <páginas largas>
node --test "tests/contracts/*.test.mjs"     # contraste de tema no claro e escuro

Mais o script de teclado para os padrões do aplicativo (link de pular → main, armadilha de foco em diálogo e retorno de foco, Escape no nível mais alto, setas em listas de abas, Enter em linhas clicáveis) e as verificações manuais: espaçamento de texto (1.4.12), zoom de 200%, alternativas de arrastar (2.5.7), entrada redundante (3.3.7), autenticação acessível (3.3.8), gráficos com tabelas, e-mails (lang, tabelas de apresentação, textos alternativos, escuro).

3. Descobertas e correções

Tabela: # | Critério | Onde | Gravidade (grave/moderada/menor) | Corrigido?. Corrija no componente compartilhado (um token de anel de foco, um helper de teclas de diálogo, linhas clicáveis, teclas compostas, regiões de rolagem, regiões ativas, scroll-padding). Traduza cada novo nome acessível para cada idioma configurado. Adicione pares de contraste para novas combinações de cores.

4. Proteção

Testes de contrato para componentes compartilhados (nomes, regiões ativas presentes antes das mensagens, pares de tokens, movimento reduzido, links de pular).
Descobertas restantes em tests/a11y/known.json com motivos, idênticas às limitações conhecidas na página de declaração de acessibilidade (alvo WCAG 2.2 AA, limitações, contato; em cada idioma configurado; linkado a partir de todos os rodapés).

5. Relatório

Antes → depois: contagens de violações por superfície, contagens por gravidade (corrigido / não corrigido), capturas de tela, o que não foi feito (leitores de tela, shells nativos, auditoria externa). Um registro no "O que há de novo". Seção no STATE.md.