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 ferramentas do navegador Chrome para diagnosticar problemas de Core Web Vitals. Ele identifica o seu pior gargalo em dados de usuários reais, rastreia a causa raiz e gera a correção de 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 para 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 Superpowers 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 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 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, limitação 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 em quatro fases), INP (detalhamento em três fases com atribuição de scripts) e CLS (correspondência de padrões com causas conhecidas). Para os fluxos de trabalho completos específicos de cada métrica, consulte o guia de diagnóstico de LCP e o guia de diagnóstico de INP.

O fluxo de trabalho de 5 etapas

Cada 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 você quiser descoberta, ele passa para a Etapa 2.

Etapa 2: Descoberta. A skill escaneia seu site pelo CoreDash. Ela extrai a saúde geral, a saúde mobile, as piores URLs por LCP e as piores por INP. Em seguida, ela escolhe o maior problema: classificações ruins em vez de precisa melhorar, mobile em vez de desktop, maior volume de tráfego. Uma página com um LCP p75 de 2,4 segundos 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 em quatro fases (TTFB, atraso de carregamento, tempo de carregamento, atraso de renderização) e a tendência de 7 dias. Ele identifica o gargalo usando raciocínio proporcional: a fase que consome a maior parte do tempo total, não a fase que ultrapassa um limite absoluto. Para o INP, ele extrai o elemento de interação lenta, os scripts LOAF e o detalhamento em três fases. Para o CLS, ele faz a correspondência com cinco padrões de causa conhecidos.

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

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

Como é o resultado

A skill gera uma declaração de causa raiz que conecta field data, 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.980 ms atrasada porque não possui uma dica de preload e não tem fetchpriority="high". Dados do CoreDash: LCP é de 3.820 ms (ruim) no mobile, p75. O atraso de carregamento é o gargalo com 52% do total. O trace do Chrome confirma: intervalo de 1.940 ms entre o primeiro byte do HTML e a requisição da imagem no waterfall de rede.

A correção vem em seguida: 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 for usado, capturas de tela do filmstrip e um SVG do waterfall de rede. Ambos os tipos de relatório são arquivos HTML independentes 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 do gargalo e as correções de código. Você perde os visuais de filmstrip e waterfall, mas a qualidade do diagnóstico é a mesma, porque os dados de usuários reais são a principal fonte da verdade.

Como começar

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 login pelo navegador. Se quiser uma chave mesmo assim (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 de apenas leitura.

Claude Code (recomendado)

# Adicione o servidor MCP do CoreDash (login pelo 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, escolha um projeto e aceite. O Claude Code armazena um token OAuth de curta duração que se atualiza automaticamente (1 hora de acesso, 30 dias de atualizaçã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á executando em modo headless onde não há navegador? Passe o header 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 .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 de agente do Copilot), Windsurf, Gemini CLI, Cline e IDEs da JetBrains. O endpoint é https://app.coredash.app/api/mcp com um header de token Bearer. Consulte o guia de configuração no GitHub para ver a configuração por cliente.

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