Auditar uma página para problemas de acessibilidade no nível do Claude Code

Você herdou uma UI com status de a11y desconhecido e precisa de uma auditoria real, não de checkbox. Melhorias reais de a11y, não 'executamos o axe e chamamos de feito'.

Addy Osmani Agent Skills — Casos de uso, Instalar & Demo ao vivo

Name: Addy Osmani Agent Skills (Claude Skill)
Author: addyosmani

Por que usar

Principais recursos

Skills de performance: Core Web Vitals, orçamento de renderização, debugging de INP
Acessibilidade: scripts de walkthrough com axe + leitor de tela
Segurança: revisão focada em OWASP e varredura de segredos
Debugging: fluxo estruturado de causa raiz, auxiliado por profiler
Funciona entre agentes de código (Claude Code, Cursor, Codex, Gemini CLI)
MIT, sem telemetria

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "addyosmani-agent-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Addy Osmani Agent Skills

Como corrigir falhas nos Core Web Vitals com o Claude fazendo o trabalho pesado

👤 Engenheiros de frontend, equipes focadas em performance ⏱ ~90 min intermediate

Quando usar: O PageSpeed caiu, o LCP regrediu além de 2,5s e o negócio está perguntando o porquê.

Pré-requisitos

Skill instalada — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
URL ou repositório para auditar — URL pública ou servidor de dev local

Fluxo

Diagnosticar

Use a skill de perf em https://mysite.com. Extraia um relatório CrUX, execute um trace do Lighthouse e identifique os 3 principais culpados de LCP e INP.✓ Copiado

→ Lista classificada de culpados com referências a arquivos, não conselhos genéricos como 'otimize imagens'
Corrigir

Para o principal culpado do LCP, aplique a correção. Para imagens, prefira fetchpriority + fallback AVIF/WebP. Mostre o diff e a justificativa.✓ Copiado

→ Mudança de código + impacto esperado na métrica antes/depois
Verificar

Execute o Lighthouse localmente novamente. Compare com a execução anterior.✓ Copiado

→ Números melhoraram; se não, a hipótese estava errada — volte ao passo 1

Resultado: Melhorias mensuráveis de LCP/INP com rastro documentado.

Armadilhas

O Claude precipitadamente sugere uma reescrita pesada do framework — A skill inclui uma regra de 'mudança mínima viável' — reintroduza-a se o agente desviar

Combine com: filesystem

Executar uma revisão de segurança por padrão em uma codebase TypeScript

👤 Devs sem uma equipe de segurança dedicada ⏱ ~75 min advanced

Quando usar: Pré-lançamento, você quer uma varredura sensata — não um pen-test, mas melhor do que nada.

Fluxo

Varrer

Use a skill de segurança. Varra src/ para: segredos hardcoded, queries SQL/NoSQL inseguras, rate limits ausentes em handlers POST, uso incorreto de JWT.✓ Copiado

→ Tabela de achados com arquivo:linha e severidade
Corrigir os top 5

Corrija os itens de maior severidade. Adicione testes onde viável.✓ Copiado

→ 5 correções aplicadas

Resultado: Codebase que não reprovará em uma revisão básica de segurança.

Armadilhas

Falsos positivos em fixtures de teste — A skill respeita /tests/ e /__fixtures__/ por padrão — passe --include-tests para substituir

Combine com: github

Usar a skill de debug estruturado em uma regressão

👤 Qualquer dev com um bug 'funcionava ontem' ⏱ ~60 min intermediate

Quando usar: Você está há 30 min chutando — mude para um fluxo estruturado de causa raiz.

Fluxo

Reproduzir

Use a skill de debug. Primeiro passo: obtenha uma reprodução mínima.✓ Copiado

→ Passos de repro + um único teste com falha
Bissetar

Bisecte o histórico do git com o teste com falha como oracle.✓ Copiado

→ Commit responsável identificado
Corrigir

Correção cirúrgica — preserve o comportamento pretendido do commit responsável.✓ Copiado

→ Correção commitada com explicação

Resultado: Uma correção reproduzível respaldada por um teste, não por um palpite.

Armadilhas

Skill aplica bisect em excesso quando o bug não está no código (ambiente/dados) — A skill verifica ambiente/dados primeiro conforme sua checklist — siga a ordem

Combine com: github

Combinações

Combine com outros MCPs para 10× de alavancagem

addyosmani-agent-skills + github

Abrir PRs a partir da saída das skills

Após as correções de perf, abra um PR com o título 'perf(LCP): -300ms via image priority hints'.✓ Copiado

addyosmani-agent-skills + filesystem

Persistir relatórios de auditoria das skills

Salve relatórios de auditoria em /reports/$(date +%F)/ para acompanhamento de tendências.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar
perf.audit	url_or_path	Regressão de performance
a11y.audit	path	Verificação de a11y pré-lançamento
security.scan	path	Varredura de segurança pré-lançamento
debug.bisect	failing_test, search_window	Regressão com baseline conhecido como bom

Custo e limites

O que custa rodar

Cota de API: N/A — skill local
Tokens por chamada: Revisões pesadas podem ser altas; codebases grandes usam 50k+ tokens
Monetário: Gratuito (MIT)
Dica: Execute perf/a11y por rota, não em todo o site de uma vez, para manter os custos limitados

Segurança

Permissões, segredos, alcance

Escopos mínimos: filesystem-read

Armazenamento de credenciais: Nenhum

Saída de dados: O Lighthouse roda localmente; apenas as URLs auditadas são buscadas

A saída da skill pode citar código-fonte — revise antes de compartilhar externamente

Solução de problemas

Erros comuns e correções

Lighthouse falha ao executar

Instale Node 18+ e Chrome; a skill espera ambos no PATH

Verificar: `npx lighthouse https://example.com` funciona de forma isolada

Regras do axe desatualizadas

A skill vem com uma versão fixada do axe; atualize com git pull regularmente

Bisect roda indefinidamente em um teste não determinístico

Passe --repeat 3 para que cada commit seja testado 3x — testes instáveis são filtrados

Alternativas

Addy Osmani Agent Skills vs. outros

Alternativa	Quando usar	Troca
wshobson/agents	Você quer cobertura ampla de papéis (backend, dados, DevOps)	O wshobson é mais amplo; o pacote do Addy é mais profundo em web-perf/a11y
Skills oficiais da Anthropic	Blocos de construção genéricos e abençoados oficialmente	Menos opinativo; menos moldado por praticantes

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills