Web Quality Skills
Para guiar a agentes de IA (Claude Code, Codex, Gemini CLI) en la optimización de rendimiento, accesibilidad y SEO de un sitio web.
Colección de Agent Skills para que los agentes de IA optimicen la calidad web según Lighthouse y Core Web Vitals
Notas y contexto
Qué es
Web Quality Skills es una colección de Agent Skills creada por Addy Osmani (Google Chrome) que enseña a los agentes de IA cómo mejorar un proyecto web. Cada skill es un conjunto de instrucciones basadas en las guías de Google Lighthouse y en las buenas prácticas de Core Web Vitals. El proyecto es agnóstico al framework: funciona con React, Vue, Angular, Svelte, Next.js, Nuxt, Astro o HTML plano. Se publica bajo licencia MIT.
Para qué sirve
- Auditar la calidad de un sitio con la skill
web-quality-audit, que cubre todas las categorías. - Optimizar el rendimiento de carga y el uso de recursos.
- Mejorar las métricas de Core Web Vitals (LCP, INP y CLS).
- Reforzar la accesibilidad según WCAG 2.2 y el SEO del proyecto.
Cuándo usarlo
Es útil cuando trabajas con un agente de codificación (Claude Code, Codex o Gemini CLI) y quieres que sus cambios sigan criterios reales de calidad web en lugar de soluciones improvisadas. Encaja especialmente al preparar un sitio para producción o al abordar problemas de rendimiento, accesibilidad o posicionamiento. Si solo buscas medir métricas sin un agente, herramientas como Lighthouse o PageSpeed Insights cubren ese hueco.
Ejemplo
Las skills se instalan con la CLI del agente o copiándolas a su directorio local. Con Claude Code:
/plugin marketplace add addyosmani/web-quality-skillsUna vez instaladas, se activan automáticamente cuando el prompt coincide con su descripción. Por ejemplo, basta con pedir:
Audita la calidad web de este proyecto y mejora el LCPy el agente aplica la skill correspondiente (web-quality-audit, core-web-vitals, etc.).
Puntos clave
- Seis skills:
web-quality-audit,performance,core-web-vitals,accessibility,seoybest-practices. - Basado en las guías de Lighthouse y la experiencia del equipo de Chrome DevTools.
- Compatible con varios agentes (Claude Code, Codex, Gemini CLI) y agnóstico al framework.
- Activación automática según la descripción de cada skill, sin configuración manual.
Ten en cuenta
- No es una herramienta independiente: necesita un agente de IA compatible que soporte el formato de Agent Skills.
- Son guías de buenas prácticas, no un linter ni un medidor; conviene verificar los resultados con Lighthouse o PageSpeed Insights.
- Consulta el repositorio para conocer la lista actualizada de skills y los métodos de instalación.