CWV Superpowers: Diagnóstico Automatizado de Core Web Vitals

O CWV Superpowers é uma skill gratuita e de código aberto do Claude Code que se conecta aos seus dados de campo do CoreDash e às ferramentas do navegador Chrome para diagnosticar problemas de Core Web Vitals. Ele identifica seu pior gargalo através de dados reais de usuários, 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

Guia de 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?

Em seguida, adicione o CoreDash como um servidor MCP e execute claude --chrome. E isso é tudo.

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 realmente está 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 está causando o problema. Quando ele diz que seu LCP é de 4,2 segundos e o elemento de gargalo é div.hero > img.main, é isso que seus usuários reais experimentam.

O rastreamento do navegador Chrome diz o porquê. A skill visita a página com emulação de dispositivo móvel (4g, estrangulamento 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 rastreamento do Chrome fornece o porquê, mas sem os dados de campo você está investigando 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 script) e CLS (correspondência de padrões contra 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 o que analisar ("LCP nas minhas páginas de produto") ou pede para encontrar o problema ("O que devo corrigir primeiro?"). Se você nomear algo específico, ele esclarece o escopo. Se você quiser descoberta, ele passa para a Etapa 2.

Etapa 2: Descoberta. A skill verifica seu site através do CoreDash. Ele extrai a integridade geral, a integridade em dispositivos móveis, as piores URLs por LCP e as piores por INP. Em seguida, 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 no p75 de 2,4 segundos que "passa", mas tem 18% dos usuários em território ruim, ainda é um problema. O CWV Superpowers detecta isso.

Etapa 3: Diagnóstico. Para o LCP, ele faz de 5 a 7 chamadas à API do CoreDash: o elemento do LCP, o tipo de elemento, o estado de prioridade, o detalhamento em 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 parte do tempo total, não a fase que excede um limite absoluto. Para o INP, ele extrai o elemento da 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 causas conhecidas.

Etapa 4: Rastreamento 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 rastreamento direcionado gera evidências. Um rastreamento completo de tudo gera ruído.

Etapa 5: Saída. Aplique a correção de código, gere um relatório em HTML, ou ambos. A correção nomeia 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 dados de campo, a evidência 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 porque não possui uma dica de preload e não tem fetchpriority="high". Dados do CoreDash: o LCP é de 3.820ms (ruim) em dispositivos móveis, p75. O Load Delay é o gargalo com 52% do total. O rastreamento do Chrome confirma: uma lacuna de 1.940ms entre o primeiro byte do HTML e a requisição da imagem no waterfall de rede.

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

Relatórios completos incluem cartões de métricas com classificações codificadas por cores, gráficos de detalhamento de fases e, quando o Chrome foi utilizado, capturas de tela em filmstrip e um SVG do waterfall de rede. Ambos os tipos de relatórios são arquivos HTML independentes que você pode soltar em uma thread do Slack ou anexar a um ticket.

Dica: O Chrome é opcional. Sem ele, você ainda obtém o diagnóstico completo de RUM, 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, porque os dados reais dos usuários são a principal fonte de verdade.

Começando

Você precisa de uma conta no CoreDash com dados reais de usuários fluindo. O plano gratuito funciona. Obtenha uma chave de API em Project Settings > API Keys (MCP). A chave é mostrada uma vez e armazenada como um hash SHA-256. Acesso somente leitura.

Claude Code (recomendado)

# Adicione o servidor MCP do CoreDash
claude mcp add --transport http coredash https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

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

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

Digite /mcp para verificar se o CoreDash está conectado. Em seguida, pergunte: "Quais são meus Core Web Vitals?" Se ele retornar seus dados reais de LCP, INP e CLS, você está pronto.

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 MCP via HTTP: VS Code (modo de agente 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 por cliente.

Para entender o contexto de por que os dados de campo são importantes para o trabalho de agentes de IA com Core Web Vitals e por que agentes que usam apenas o Lighthouse produzem correções que são rejeitadas um terço das vezes, leia o artigo de visão geral.