Agent Skills es una colección gratuita de skills creada por Addy Osmani para que agentes como Claude Code trabajen con el método de un ingeniero sénior. Para quien hace SEO, lo más interesante es su comando /webperf: una auditoría de Core Web Vitals que tiene prohibido inventarse métricas.

Lo he probado con la portada de esta web. Te cuento cómo se instala, qué me dijo, qué comprobé a mano y para qué sirve el resto de la colección.

Qué es Agent Skills

Una skill es un conjunto de instrucciones que le enseña a un agente de IA a trabajar con un método concreto. Si te suena a chino, te lo explico en el post sobre Replica Skill y las skills de Claude.

Agent Skills reúne 25 skills organizadas por fases de trabajo: definir, planificar, construir, verificar, revisar y publicar. Las ha escrito Addy Osmani, ingeniero de Google conocido por su trabajo en Chrome y en rendimiento web. Es de código abierto (licencia MIT) y supera las 100.000 estrellas en GitHub.

Además de las skills, trae 9 comandos (/spec, /plan, /build, /test, /review, /code-simplify, /ship, /constraints y /webperf) y 4 agentes especializados: revisor de código, auditor de seguridad, ingeniero de tests y auditor de rendimiento web.

Las piezas que importan si haces SEO

La mayor parte de la colección está pensada para programar. Pero tres piezas tocan de lleno el SEO técnico:

  • /webperf y el agente web-performance-auditor: una auditoría de rendimiento centrada en Core Web Vitals, carga, renderizado y red.
  • performance-optimization: los umbrales de LCP (2,5 s), INP (200 ms) y CLS (0,1), y cómo corregir lo que los empeora.
  • shipping-and-launch: una lista de comprobación antes de publicar que exige Core Web Vitals en «bueno» y Lighthouse sin avisos de accesibilidad.

Lo que me convenció de probarlo es una regla del auditor: nunca inventarse métricas. Si solo lee el código, no puede saber cuánto tarda tu web, y así tiene que decirlo. Cada hallazgo se marca como «impacto potencial» y la tabla de métricas queda como «no medido».

Si le das datos reales, cambia al modo profundo. Le valen un informe de Lighthouse, la respuesta de PageSpeed Insights, la API de CrUX o una traza de DevTools. Y tiene que indicar de dónde sale cada número: no es lo mismo una prueba de laboratorio que lo que viven tus usuarios.

Cómo se instala en Claude Code

Como plugin, que es la forma de tener también los comandos y los agentes, son dos comandos dentro de Claude Code:

/plugin marketplace add addyosmani/agent-skills
/plugin install agent-skills@addy-agent-skills

Si el segundo comando falla en Windows con un error de clave SSH, el propio proyecto indica que añadas el catálogo con la dirección completa: /plugin marketplace add https://github.com/addyosmani/agent-skills.git.

Si solo quieres las skills, sin comandos, también se instalan con npx skills add addyosmani/agent-skills. Funciona en Claude Code, Cursor, Codex, Copilot, Gemini CLI y muchos otros agentes. Puedes instalar una sola con --skill nombre-de-la-skill.

Un detalle que me gustó al revisar el repositorio: trae scripts de hooks, pero el plugin no los activa. Están documentados para otros agentes que los necesitan.

Lo he probado con mi web: Lighthouse + /webperf

Primero pasé Lighthouse en móvil por la portada de aliciaruiz.es. Es la medición de laboratorio que usa también PageSpeed Insights: simula un móvil de gama media con una red lenta.

Informe de Lighthouse en móvil de la portada de aliciaruiz.es: rendimiento 87, First Contentful Paint 3,1 s, Largest Contentful Paint 3,2 s, Total Blocking Time 0 ms, Cumulative Layout Shift 0 y Speed Index 3,1 s
Mi portada en Lighthouse móvil: 87 de rendimiento, con el LCP en 3,2 s, por encima de los 2,5 s recomendados.

Un 87 no está mal, pero el LCP se pasaba del umbral de 2,5 s. Después abrí Claude Code con Agent Skills cargado y le di tres cosas: el informe de Lighthouse en JSON, el HTML de la portada y el código del CMS que la genera. El encargo fue tan simple como este:

/webperf Audita la portada https://aliciaruiz.es/ (móvil).
Informe de Lighthouse: lighthouse-home.report.json.
HTML servido: home.html. Código del CMS: app/

Tardó dos minutos y medio. No tocó ningún archivo: solo leyó y me devolvió un informe ordenado por impacto.

Qué encontró (y qué comprobé yo)

Lo primero que hizo bien fue explicar el LCP. El elemento más grande de mi portada es el titular, que es texto. De sus 3,2 s, unos 2,56 s son retraso de renderizado: el HTML ya ha llegado, pero el navegador espera a las fuentes antes de pintar el titular.

Estos fueron sus hallazgos principales. Los comprobé uno a uno en el informe de Lighthouse y en el HTML, y todos eran ciertos:

  • La hoja de Google Fonts bloquea el renderizado. Antes de pintar, el navegador conecta con dos dominios de Google y descarga el CSS y las fuentes. Lighthouse calcula un ahorro de 1,38 s. Su propuesta: alojar las fuentes en mi servidor y precargar solo la del titular.
  • Cargo una fuente que casi no se usa. Roboto solo aparece en la réplica animada de Search Console de la portada, y pesa 37 KB. Quitarla de la petición ahorra una descarga en la ruta crítica.
  • Los logos del carrusel son demasiado grandes. Son PNG de 96 px de alto que en móvil se ven mucho más pequeños. Propone exportarlos más pequeños en WebP y cargar en diferido la copia que se repite para el bucle.
  • Las imágenes solo se guardan 2 horas en caché. Para imágenes que no cambian, recomienda un año. Si quieres entender esa cabecera, te lo cuento en el post sobre cabeceras HTTP y SEO.

También me gustó lo que descartó. Lighthouse avisaba de un fallo de la caché de navegación atrás y adelante, y el auditor vio que se debía a falta de memoria en el entorno de pruebas, no a mi web. Y destacó lo que ya estaba bien: sin JavaScript de terceros, sin redirecciones y CLS en 0.

Apliqué sus recomendaciones: de 87 a 100

Un informe solo vale si lo aplicas, así que corregí tres de sus cuatro hallazgos. Dejé fuera el trabajo de las animaciones, que el propio auditor marcó como prioridad baja:

  • Fuentes en mi servidor. Quité la hoja de Google Fonts, alojé las dos fuentes de la web y precargué la del titular. De paso, eliminé Roboto. Bonus: la web ya no envía la IP de cada visitante a Google para cargar una tipografía.
  • Logos ligeros. Los regeneré en WebP al doble del tamaño al que se ven, en lugar de servir PNG de 96 px. La copia que se repite en el carrusel ahora se carga en diferido.
  • Caché de un año para imágenes y fuentes, en lugar de dos horas.

Volví a pasar Lighthouse en las mismas condiciones. La puntuación subió a 100: el LCP bajó de 3,2 a 1,4 s, el FCP de 3,1 a 1,3 s y el peso de la portada de 271 a 154 KB.

Informe de Lighthouse en móvil de la portada de aliciaruiz.es después de los cambios: rendimiento 100, First Contentful Paint 1,3 s, Largest Contentful Paint 1,4 s, Total Blocking Time 20 ms, Cumulative Layout Shift 0 y Speed Index 1,5 s
La misma portada después de aplicar las recomendaciones: 100 de rendimiento y LCP en 1,4 s.

Un apunte honesto: Lighthouse varía entre pasadas. De cuatro pruebas, tres dieron 100 y una dio 78 por un pico puntual de bloqueo, justo después de vaciar la caché. Por eso conviene repetir la prueba varias veces antes de sacar conclusiones, y mirar los datos reales de usuarios cuando los tengas.

Lo que no puede hacer

  • No mide lo que viven tus usuarios. Con un informe de Lighthouse trabaja con datos de laboratorio. Los datos reales de usuarios (CrUX, los mismos que ves en el informe de Core Web Vitals de Search Console) necesitan una clave de API de Google o la respuesta completa de PageSpeed Insights.
  • No sustituye el criterio. Te dice qué tocar y por qué, pero decidir si merece la pena alojar las fuentes en tu servidor, o tocar un carrusel que funciona, sigue siendo cosa tuya.
  • No es gratis en uso. El plugin es gratuito, pero la auditoría consume como cualquier conversación con Claude. En mi caso, Claude Code la estimó en menos de un dólar a precio de API. Con un plan Pro o Max no pagas aparte, pero cuenta para tus límites de uso.

Otras skills útiles aunque no programes

Aunque no programes a diario, hay un par de skills que encajan con cualquiera que encargue trabajo técnico a un agente:

  • interview-me: te hace preguntas de una en una hasta tener claro lo que quieres antes de empezar. Muy útil cuando el encargo es tan vago como «arregla el SEO de esta plantilla».
  • code-review-and-quality: revisa lo que ha escrito el agente desde cinco ángulos, seguridad incluida. Útil antes de subir a producción un cambio en una web de cliente.

Mi consejo: no instales las 25 por instalar. Si tu trabajo es el SEO técnico, empieza por /webperf y añade las demás cuando las necesites.

Preguntas frecuentes sobre Agent Skills

¿Funciona en Cursor, Codex o Antigravity?

Sí. Las skills funcionan en más de 70 agentes a través de npx skills, y el proyecto tiene guías propias para Codex, Cursor, Gemini CLI, Copilot, Antigravity, OpenCode y Windsurf. Los comandos como /webperf son de Claude Code; en otros agentes se invoca la skill por su nombre.

¿Necesito saber programar para usar /webperf?

No para lanzarlo ni para entender el informe, que es lo que hace un SEO técnico con cualquier auditoría. Para aplicar las correcciones sí necesitas acceso al código de la web, o alguien que lo tenga. El propio Claude Code puede hacer los cambios si se lo pides, pero revísalos antes de publicar.

¿Puedo usarlo con el plan gratuito de Claude?

No. Claude Code necesita un plan Pro, Max, Team o Enterprise, o pagar por uso con la API. Las skills en sí son gratuitas.

¿Puede tener malware?

Un plugin puede ejecutar código en tu ordenador con tus permisos, así que instálalo siempre desde el repositorio oficial (addyosmani/agent-skills). Este en concreto son sobre todo instrucciones en texto, y sus scripts de hooks no se activan al instalarlo.

Conclusión

Agent Skills es mucho más que una colección para programadores. Su comando /webperf convierte un informe de Lighthouse en una lista de tareas ordenada por impacto. Además, conecta cada problema con el archivo y la línea donde está, y no se inventa números.

En mi web acertó en todo lo que comprobé. Me ahorró el trabajo de cruzar el informe de Lighthouse con el código a mano, y aplicando tres de sus recomendaciones la portada pasó de 87 a 100 en móvil.

Si quieres que revise el rendimiento y el resto del SEO técnico de tu web, echa un vistazo a mi servicio de SEO técnico o escríbeme y lo vemos.

Fuentes