CWV Superpowers: diagnóstico automatizado de Core Web Vitals

CWV Superpowers es una skill gratuita y de código abierto para Claude Code que se conecta a los field data de CoreDash y a las herramientas de Chrome para diagnosticar problemas de Core Web Vitals. Identifica el peor cuello de botella a partir de datos de usuarios reales, rastrea la causa raíz y genera el fix en el código. No una lista de sugerencias de Lighthouse. El elemento, el archivo, la línea de código.

Última revisión por Arjen Karel en marzo de 2026

Inicio rápido:

El código está en GitHub. Instálalo en Claude Code con dos comandos:

/* Install the MarketPlace and the CWV SuperPower Skill */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers

/* now start the Core Web Vitals AI superpower*/
Why is my site slow?

Luego añade CoreDash como servidor MCP y ejecuta claude --chrome. Eso es todo.

Qué hace la skill CWV Superpowers

CWV Superpowers combina dos fuentes de datos que responden tanto a qué va lento como a por qué.

CoreDash Real User Monitoring te dice qué va lento en realidad. Usuarios reales, dispositivos reales, redes reales. CoreDash registra cada carga de página y atribuye cada métrica al elemento exacto que causa el problema. Cuando indica que el LCP es de 4,2 segundos y que el elemento del cuello de botella es div.hero > img.main, eso es lo que experimentan los usuarios reales.

El tracing del navegador Chrome te dice por qué. La skill visita la página con emulación móvil (4g, 4x CPU throttling), registra el waterfall de red y traza las fases exactas que identificaron los datos RUM. ¡No todo, solo la parte que está demostrado que ralentiza las páginas!

¡Esa es la clave! Los datos RUM te dicen qué va lento, pero no por qué. Un trace de Chrome te da el porqué, pero sin field data investigas la página equivocada o la métrica incorrecta. CWV Superpowers combina ambos.

Diagnostica las tres Core Web Vitals: LCP (desglose en cuatro fases), INP (desglose en tres fases con atribución de scripts) y CLS (comparación de patrones con causas conocidas). Para ver los flujos de trabajo completos de cada métrica, consulta la guía de diagnóstico de LCP y la guía de diagnóstico de INP.

El flujo de trabajo en 5 pasos

Cada investigación sigue cinco pasos.

Paso 1: Intención. Le indicas qué analizar ("el LCP en mis páginas de producto") o le pides que busque el problema ("¿Qué debería arreglar primero?"). Si especificas algo concreto, acota el alcance. Si buscas descubrimiento, pasa al paso 2.

Paso 2: Descubrimiento. La skill escanea el sitio a través de CoreDash. Obtiene el estado general, el estado en móvil, las peores URL por LCP y las peores por INP. Luego elige el mayor problema: calificaciones "poor" sobre "needs improvement", móvil sobre escritorio, mayor volumen de tráfico. Una página con un LCP en p75 de 2,4 segundos que "aprueba" pero tiene un 18 % de usuarios en territorio poor sigue siendo un problema. CWV Superpowers lo detecta.

Paso 3: Diagnóstico. Para el LCP, realiza de 5 a 7 llamadas a la API de CoreDash: el elemento LCP, el tipo de elemento, el estado de prioridad, el desglose en cuatro fases (TTFB, Load Delay, Load Time, Render Delay) y la tendencia de 7 días. Identifica el cuello de botella mediante razonamiento proporcional: la fase que consume la mayor proporción del tiempo total, no la que supera un umbral absoluto. Para el INP, obtiene el elemento de interacción lenta, los scripts LOAF y el desglose en tres fases. Para el CLS, compara con cinco patrones de causas conocidas.

Paso 4: Trace de Chrome. Si Chrome está disponible, la skill visita la página y traza únicamente la fase del cuello de botella del paso 3. Un trace enfocado genera evidencia. Un trace completo de todo solo genera ruido.

Paso 5: Resultado. Aplica el fix de código, genera un informe HTML o ambos. El fix indica el archivo, la línea, el elemento, y muestra el antes y el después.

Cómo es el resultado

La skill genera una declaración de causa raíz que conecta los field data, la evidencia de Chrome y el fix específico:

Causa raíz: La imagen del LCP div.hero-banner > img.product-main en /product/running-shoes-42 se descubre con 1.980 ms de retraso porque carece de un preload hint y no tiene fetchpriority="high". Datos de CoreDash: el LCP es de 3.820 ms (poor) en móvil, p75. Load Delay es el cuello de botella con el 52 % del total. El trace de Chrome lo confirma: un desfase de 1.940 ms entre el primer byte del HTML y la petición de la imagen en el waterfall de red.

El fix es directo: añade un preload hint, asigna fetchpriority="high". Específico para el elemento, el archivo y la causa. Nada de consejos genéricos.

Los informes completos incluyen tarjetas de métricas con valoraciones codificadas por colores, gráficos de desglose por fases y, cuando se utilizó Chrome, capturas en filmstrip y un SVG del waterfall de red. Ambos tipos de informes son archivos HTML independientes que puedes compartir en un hilo de Slack o adjuntar a un ticket.

Consejo: Chrome es opcional. Sin él sigues obteniendo el diagnóstico RUM completo, la identificación del cuello de botella y los fixes de código. Pierdes la parte visual del filmstrip y del waterfall, pero la calidad del diagnóstico es la misma porque los datos de usuarios reales son la principal fuente de verdad.

Cómo empezar

Necesitas una cuenta de CoreDash con datos de usuarios reales activos. El plan gratuito sirve. Para uso interactivo no necesitas ninguna API key: Claude Code inicia sesión mediante el navegador. Si de todos modos quieres una key (para ejecuciones headless o en CI), obtén una en Project Settings > API Keys (MCP). Las keys se muestran una sola vez, se guardan como un hash SHA-256 y son de solo lectura.

Claude Code (recomendado)

# Add CoreDash MCP server (browser login, no API key)
claude mcp add --transport http coredash https://app.coredash.app/api/mcp

# Add the skill from the marketplace
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# Start with Chrome for full analysis
claude --chrome

En la primera conexión, ejecuta /mcp, selecciona coredash y elige Authenticate. El navegador abrirá la página de inicio de sesión y consentimiento de CoreDash; inicia sesión, elige un proyecto y acepta. Claude Code almacena un token OAuth de corta duración que se refresca solo (1 hora de acceso, 30 días de refresco) y se mantiene revocable. Luego pregunta: "¿Cuáles son mis Core Web Vitals?". Si devuelve tus datos reales de LCP, INP y CLS, todo está listo.

¿Prefieres una API key o ejecutas en modo headless sin navegador? Pasa el header Bearer:

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

Cursor

Añade CoreDash a .cursor/mcp.json:

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

Otros clientes MCP

El servidor MCP de CoreDash funciona con cualquier cliente compatible con HTTP MCP: VS Code (Copilot en modo agente), Windsurf, Gemini CLI, Cline y los IDE de JetBrains. El endpoint es https://app.coredash.app/api/mcp con un header de token Bearer. Consulta la guía de configuración en GitHub para la configuración de cada cliente.

Para saber por qué los field data son fundamentales en el trabajo de Core Web Vitals con agentes de IA y por qué los agentes basados únicamente en Lighthouse generan fixes que se rechazan un tercio de las veces, lee el artículo introductorio.