CWV Superpowers: Diagnóstico Automatizado de Core Web Vitals

O CWV Superpowers é uma skill gratuita e open-source do Claude Code que se conecta aos seus field data do CoreDash e a ferramentas do navegador Chrome para diagnosticar problemas de Core Web Vitals. Ele identifica seu pior gargalo em dados de usuários reais, rastreia a causa raiz e gera a correção do código. Não é uma lista de sugestões do Lighthouse. O elemento, o arquivo, a linha de código.

Última revisão por Arjen Karel em março de 2026

Início rápido:

O código está no GitHub. Instale-o no Claude Code com dois comandos:

/* Instale o MarketPlace e a skill CWV SuperPower */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers

/* agora inicie o superpoder de IA do Core Web Vitals */
Por que meu site está lento?

Depois, adicione o CoreDash como um servidor MCP e execute claude --chrome. Só isso.

O que a skill CWV SuperPower faz

O CWV Superpowers combina duas fontes de dados que juntas respondem tanto o que está lento quanto o porquê.

O Real User Monitoring do CoreDash diz a você o que está realmente lento. Usuários reais, dispositivos reais, redes reais. O CoreDash rastreia cada carregamento de página e atribui cada métrica ao elemento exato que causa o problema. Quando ele diz que seu LCP é de 4,2 segundos e o elemento gargalo é div.hero > img.main, isso é o que seus usuários reais experimentam.

O tracing do navegador Chrome diz o porquê. A skill visita a página com emulação móvel (4g, throttling de CPU de 4x), grava o waterfall de rede e rastreia as fases exatas que os dados de RUM identificaram. Não tudo, apenas a parte que comprovadamente deixa suas páginas lentas!

Esse é o truque! Os dados de RUM dizem o que está lento, mas não o porquê. Um trace do Chrome dá o porquê, mas sem field data você investiga a página errada ou a métrica errada. O CWV Superpowers combina ambos.

Ele diagnostica todos os três Core Web Vitals: LCP (detalhamento de quatro fases), INP (detalhamento de três fases com atribuição de script) e CLS (correspondência de padrões com causas conhecidas). Para os fluxos de trabalho específicos de cada métrica, consulte o guia de diagnóstico do LCP e o guia de diagnóstico do INP.

O fluxo de trabalho de 5 etapas

Toda investigação segue cinco etapas.

Etapa 1: Intenção. Você diz a ele o que analisar ("LCP nas minhas páginas de produto") ou pede para ele encontrar o problema ("O que devo corrigir primeiro?"). Se você especificar algo, ele esclarece o escopo. Se quiser descoberta, ele passa para a Etapa 2.

Etapa 2: Descoberta. A skill varre seu site por meio do CoreDash. Ela extrai a saúde geral, a saúde no mobile, as piores URLs por LCP e as piores por INP. Em seguida, escolhe o maior problema: avaliações ruins em vez de precisa melhorar, mobile em vez de desktop, maior volume de tráfego. Uma página com LCP de 2,4 segundos no p75 que "passa", mas tem 18% dos usuários na faixa ruim, ainda é um problema. O CWV Superpowers detecta isso.

Etapa 3: Diagnóstico. Para o LCP, ele faz de 5 a 7 chamadas de API do CoreDash: o elemento LCP, o tipo de elemento, o estado de prioridade, o detalhamento de quatro fases (TTFB, Load Delay, Load Time, Render Delay) e a tendência de 7 dias. Ele identifica o gargalo usando raciocínio proporcional: a fase que consome a maior parcela do tempo total, e não a fase que excede um limite absoluto. Para o INP, ele busca o elemento de interação lento, os scripts LOAF e o detalhamento de três fases. Para o CLS, ele faz a correspondência com cinco padrões de causas conhecidas.

Etapa 4: Trace do Chrome. Se o Chrome estiver disponível, a skill visita a página e faz o trace apenas da fase de gargalo da Etapa 3. Um trace direcionado gera evidências. Um trace completo de tudo gera ruído.

Etapa 5: Saída. Aplique a correção do código, gere um relatório HTML ou ambos. A correção indica o arquivo, a linha, o elemento e mostra o antes e o depois.

Como é a saída

A skill gera uma declaração de causa raiz que conecta os field data, as evidências do Chrome e a correção específica:

Causa raiz: A imagem do LCP div.hero-banner > img.product-main em /product/running-shoes-42 é descoberta 1.980ms tarde demais porque não possui uma dica de preload e não tem fetchpriority="high". Dados do CoreDash: o LCP é de 3.820ms (ruim) no mobile, p75. O Load Delay é o gargalo, representando 52% do total. O trace do Chrome confirma: um intervalo de 1.940ms entre o primeiro byte do HTML e a requisição da imagem no waterfall de rede.

A correção é direta: adicione uma dica de preload, defina fetchpriority="high". Específica para o elemento, o arquivo e a causa. Não é um conselho genérico.

Relatórios completos incluem cards de métricas com classificações coloridas, gráficos de detalhamento de fases e, quando o Chrome foi usado, screenshots do filmstrip e um SVG do waterfall de rede. Ambos os tipos de relatório são arquivos HTML autocontidos que você pode enviar em uma thread do Slack ou anexar a um ticket.

Dica: O Chrome é opcional. Sem ele, você ainda obtém o diagnóstico de RUM completo, a identificação de gargalos e as correções de código. Você perde os recursos visuais de filmstrip e waterfall, mas a qualidade do diagnóstico é a mesma, pois os dados de usuários reais são a principal fonte de verdade.

Primeiros passos

Você precisa de uma conta no CoreDash com dados de usuários reais fluindo. O plano gratuito funciona. Para uso interativo, você não precisa de nenhuma chave de API; o Claude Code faz o login pelo navegador. Se quiser uma chave de qualquer forma (para execuções headless ou CI), obtenha uma em Project Settings > API Keys (MCP). As chaves são exibidas apenas uma vez, armazenadas como um hash SHA-256 e são somente leitura.

Claude Code (recomendado)

# Adicione o servidor MCP do CoreDash (login via navegador, sem chave de API)
claude mcp add --transport http coredash https://app.coredash.app/api/mcp

# Adicione a skill a partir do marketplace
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# Inicie com o Chrome para uma análise completa
claude --chrome

Na primeira conexão, execute /mcp, selecione coredash e escolha Authenticate. Seu navegador abrirá a página de login e consentimento do CoreDash; faça login, selecione um projeto e aceite. O Claude Code armazena um token OAuth de curta duração que se renova automaticamente (1 hora de acesso, 30 dias de renovação) e permanece revogável. Depois, pergunte: "Quais são meus Core Web Vitals?". Se ele retornar seus dados reais de LCP, INP e CLS, você está pronto.

Prefere uma chave de API ou está rodando de forma headless sem navegador? Passe o cabeçalho Bearer em vez disso:

claude mcp add --transport http coredash https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

Cursor

Adicione o CoreDash ao arquivo .cursor/mcp.json:

{
  "mcpServers": {
    "coredash": {
      "url": "https://app.coredash.app/api/mcp",
      "headers": {
        "Authorization": "Bearer cdk_YOUR_API_KEY"
      }
    }
  }
}

Outros clientes MCP

O servidor MCP do CoreDash funciona com qualquer cliente que suporte HTTP MCP: VS Code (modo agente do Copilot), Windsurf, Gemini CLI, Cline e IDEs da JetBrains. O endpoint é https://app.coredash.app/api/mcp com um cabeçalho de token Bearer. Consulte o guia de configuração no GitHub para a configuração de cada cliente.

Para entender por que os field data importam para o trabalho de Core Web Vitals de agentes de IA e por que agentes focados apenas no Lighthouse produzem correções que são rejeitadas um terço das vezes, leia o artigo de visão geral.