Auditoria de Layout
layout-audit.mjs ao lado deste arquivo navega por uma página em várias larguras e mede o DOM. Ele relata
apenas o que uma pessoa chamaria de defeito de layout; acessibilidade é uma questão separada que ele não aborda.
node ~/.claude/skills/layout-audit/layout-audit.mjs --base=http://localhost:3000 --routes=/,/pricing
Flags: --routes (separadas por vírgula, padrão /), --widths (padrão 1440x900,390x844), --auth=user:pass
para Autenticação Básica, --shots=<dir> para também salvar uma captura de tela por rota e largura, --json para comparar execuções.
Playwright é obtido do @playwright/cli instalado globalmente, então nenhum projeto ganha uma dependência.
Verificações
| Verificação | O que significa |
|---|---|
viewport-overflow | Um elemento ultrapassa a borda da viewport - a página rola horizontalmente |
clipped-text | Uma caixa corta seu próprio texto sem reticências e sem título, então o texto é inacessível |
collapsed-text | Um elemento contém texto mas não tem altura - aparece como um espaço em branco |
overlapping-text | Duas caixas de texto são desenhadas nos mesmos pixels |
tiny-text | Texto abaixo do que pode ser lido em um telefone |
Trabalhando com o resultado
- Execute contra uma build, não um servidor de desenvolvimento no meio de uma edição. Recarga a quente deixa estilos meio aplicados.
- Agrupe os achados por elemento antes de consertar qualquer coisa. Um cabeçalho compartilhado repetido em dez rotas é um defeito, não dez, e a contagem no relatório não é a quantidade de trabalho.
- Truncamento com reticências e um título é um padrão, não um defeito - a ferramenta já exclui isso. Se um achado diz que uma caixa corta texto, o texto é genuinamente inacessível.
- Um achado repetido em uma classe de elemento é uma decisão de design. O tamanho da fonte em toda uma superfície, ou uma cor, pertence a quem possui o design; reporte os números e deixe que eles escolham em vez de alterar a paleta de passagem.
- Uma captura de tela ainda captura o que nenhuma regra declara. Use
--shotse olhe para as páginas que as regras consideraram limpas, especialmente na largura de telefone. - Uma execução limpa não diz nada sobre o telefone de uma pessoa. O WebKit do Playwright com um perfil de iPhone não é o Safari em um iPhone. Quando um defeito reportado de telefone não se reproduz, diga isso em vez de relatar que funciona, então peça o dispositivo ou remova o mecanismo suspeito por completo.
- Prove que uma regra dispara antes de confiar em um zero. Plante o defeito em uma página de teste, execute as verificações contra ela e veja a regra reportá-lo. Um corte no nível da página em particular faz comparações ingênuas de largura passarem em todas as páginas.