web-quality-skills: verificações de qualidade web com prioridade à medição via Lighthouse

Para quem

Serve a quem vai melhorar a qualidade web a partir de medições, não por instinto no estilo. Texto oficial: é uma coleção Agent Skills não oficial, com prioridade à medição, para otimizar projetos web com Google Lighthouse, Chrome DevTools orientados a agent, Core Web Vitals, WCAG e indicações ligadas à pesquisa.

Melhor encaixe: quem já tem um site que se pode abrir ou um projeto local e quer primeiro uma verificação de qualidade baseada em evidência. A skill nomeada na fonte é web-quality-audit: verifica através de categorias Lighthouse e de código-fonte. As frases de disparo incluem “Audit my site”, “Review this for quality”, “Check web quality”.

Afirma ser independente da stack e utilizável com React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, HTML puro e semelhantes. Não ler esse conjunto como «só estes frameworks».

Antes de começar, é preciso conseguir executar npx skills add. Não trocar o caminho principal por outro instalador.

Concluir uma primeira tentativa em 3 minutos

Seguir só o caminho principal npx do repositório. A primeira tentativa é só verificação; não alterar código de produção.

Pré-condição: esta máquina já tem npm/npx e tens um projeto web existente ou um site alcançável. Não inventar um URL a verificar.

Local de instalação: executar no espaço de trabalho:

npx skills add addyosmani/web-quality-skills

Repositório oficial:

https://github.com/addyosmani/web-quality-skills

Âncora das notas da skill:

https://github.com/addyosmani/web-quality-skills#web-quality-audit

Visão geral do Lighthouse:

https://developer.chrome.com/docs/lighthouse/overview/

Gatilho de baixo risco: depois de instalar, dizer “Check web quality” ou “Review this for quality” num projeto existente. O texto oficial descreve isto como verificação baseada em evidência. Ler primeiro o relatório e só depois decidir se altera ficheiros. A página de especificação Agent Skills é só um apontador da fonte:

https://agentskills.io/

Sucesso: o assistente dá resultados por categorias Lighthouse e de código-fonte, em vez de entregar um patch de imediato. Se o passo seguinte alterar código de desempenho ou acessibilidade, confirmar primeiro que ficheiros mudam.

Casos de uso

Caso 1: correr web-quality-audit num site existente. Usar uma das frases oficiais e fazer verificar através de Lighthouse e código-fonte. Serve a quem já tem um site e quer primeiro bases de medição. A evidência só descreve esta linha de skill e não nomeia outras. Tratar a saída como resultado de verificação; não a enviar automaticamente.

Caso 2: fazer a mesma verificação com prioridade à medição em projetos de frameworks diferentes. O texto oficial diz independente da stack e cita React, Vue, Angular, Svelte, Next.js, Nuxt, Astro e HTML puro. Serve a quem já tem a stack fixa e só quer acrescentar uma verificação de qualidade. Não inferir que um desses frameworks é obrigatório nem inventar nomes de skills que não apareceram.

Limites de uso

O comando principal de instalação é npx skills add addyosmani/web-quality-skills. A fonte também escreve comandos de plugin do Claude Code: /plugin marketplace add addyosmani/web-quality-skills, depois /plugin install web-quality-skills@addy-web-quality-skills. Não misturar os dois caminhos numa só primeira operação.

A única skill nomeada nesta página é web-quality-audit. Não completar outros nomes de skills.

É uma coleção não oficial. O texto oficial não promete cobrir todas as cláusulas WCAG nem exige abrir ao mesmo tempo as indicações de pesquisa e o DevTools.