Cómo auditar y optimizar tu sitio web con un solo comando usando Claude Code
El contexto
Hace poco publiqué cómo debuggear un problema de Safari Mobile que nos costó más de 10 horas. El diagnóstico fue manual, lento y doloroso.
Después de eso me pregunté: ¿qué pasaría si pudiera automatizar auditorías de calidad web directamente desde mi terminal?
La respuesta la encontré en las Web Quality Skills de Addy Osmani, engineering lead del equipo de Chrome en Google.
¿Qué son las Web Quality Skills?
Son un conjunto de 6 skills para Claude Code que encapsulan años de investigación del equipo de Chrome sobre rendimiento web. Funcionan como comandos especializados que puedes invocar directamente desde tu terminal.
Las 6 skills son:
/web-quality-audit— Auditoría completa: 50+ patrones de performance, 40+ reglas de accesibilidad, 30+ requisitos de SEO, 20+ patrones de seguridad/performance— Optimización de carga y eficiencia: critical rendering path, bundling, imágenes, fonts, caching/core-web-vitals— LCP < 2.5s, INP < 200ms, CLS < 0.1/accessibility— Cumplimiento WCAG 2.1: perceptible, operable, comprensible, robusto/seo— SEO técnico, on-page, structured data, mobile-friendliness/best-practices— Headers de seguridad, APIs modernas, compatibilidad, manejo de errores
Lo mejor: son agnósticas al framework. Funcionan con React, Next.js, Vue, Nuxt, Astro, Svelte o HTML puro.
Cómo instalarlas
La forma más rápida:
npx skills add addyosmani/web-quality-skillsSi prefieres hacerlo manual:
git clone https://github.com/addyosmani/web-quality-skills.git
cp -r web-quality-skills/skills/* ~/.claude/skills/Eso es todo. Las skills quedan disponibles en tu próxima sesión de Claude Code.
Cómo las uso en un proyecto real
1. Auditoría general
Cuando inicio un proyecto o tomo uno existente, lo primero que hago es una auditoría completa:
/web-quality-audit
Esto analiza el proyecto entero y genera un reporte con problemas organizados por categoría: performance, accesibilidad, SEO y mejores prácticas. Es como ejecutar Lighthouse pero con contexto de tu código.
2. Performance y Core Web Vitals
Si el sitio carga lento, voy directo a performance:
/performance
Claude analiza el critical rendering path, encuentra JavaScript bloqueante, imágenes sin optimizar, fonts que retrasan el render, y me sugiere fixes concretos.
Para algo más específico:
/core-web-vitals
Me da un breakdown de LCP, INP y CLS con causas comunes y código para debuggear. Incluye fixes específicos por framework.
3. Accesibilidad
/accessibility
Revisa contra WCAG 2.1: contraste, etiquetas ARIA, navegación por teclado, roles semánticos, textos alternativos. No es solo un checklist — aplica las correcciones directamente en el código.
4. SEO técnico
/seo
Revisa meta tags, structured data, canonical URLs, sitemap, robots.txt, Open Graph, y performance como señal de ranking.
Presupuestos de performance incluidos
Las skills traen budgets de performance concretos basados en las recomendaciones del equipo de Chrome:
| Recurso | Límite | |---------|--------| | Peso total de la página | < 1.5 MB | | JavaScript | < 300 KB | | CSS | < 100 KB | | Imágenes above-the-fold | < 500 KB | | Fonts | < 100 KB | | Third-party scripts | < 200 KB |
Y los targets de Core Web Vitals:
| Métrica | Objetivo | |---------|----------| | LCP | ≤ 2.5s | | INP | ≤ 200ms | | CLS | ≤ 0.1 | | Lighthouse Performance | ≥ 90 | | Lighthouse Accessibility | 100 | | Lighthouse Best Practices | ≥ 95 | | Lighthouse SEO | ≥ 95 |
Lo que cambia en tu workflow
Antes de estas skills, optimizar un sitio web significaba:
- Ejecutar Lighthouse manualmente
- Interpretar los resultados
- Buscar cómo aplicar cada fix
- Implementar los cambios uno por uno
- Volver a ejecutar Lighthouse para verificar
Ahora es:
- Ejecutar
/web-quality-audit - Claude analiza, sugiere y aplica las correcciones
- Verificar los resultados
El ciclo de feedback se reduce de horas a minutos.
Un ejemplo concreto
En este mismo portfolio ejecuté /performance y Claude detectó:
- Imágenes sin
loading="lazy"fuera del viewport - Fonts que bloqueaban el render inicial
- CSS no crítico cargando de forma síncrona
- Componentes que podían usar lazy loading
Aplicó los fixes directamente. El score de Performance en Lighthouse subió de 78 a 95.
Cuándo usar cada skill
| Situación | Skill recomendada |
|-----------|-------------------|
| Empiezo un proyecto nuevo | /web-quality-audit |
| El sitio carga lento | /performance |
| Necesito mejorar métricas de Google | /core-web-vitals |
| Quiero cumplir estándares de accesibilidad | /accessibility |
| Necesito mejorar el posicionamiento | /seo |
| Revisión general de código | /best-practices |
Conclusión
Las Web Quality Skills convierten a Claude Code en un auditor de calidad web que entiende tu código, conoce las mejores prácticas de Chrome, y aplica las correcciones directamente.
No reemplazan el conocimiento de performance. Pero lo democratizan.
Si trabajas en web, instala estas skills. Son gratis, open source, y van a cambiar cómo optimizas tus proyectos.
Auditar performance no debería requerir ser experto en Lighthouse. Solo necesitas las herramientas correctas.