Auditar una página para problemas de accesibilidad a nivel de Claude Code

Heredaste una UI con estado de a11y desconocido y necesitas una auditoría real, no una casilla marcada. Mejoras reales de a11y, no 'ejecutamos axe y lo llamamos hecho'.

Addy Osmani Agent Skills — Casos de uso, Instalar & Demo en vivo

Name: Addy Osmani Agent Skills (Claude Skill)
Author: addyosmani

Por qué usarlo

Características clave

Skills de rendimiento: Core Web Vitals, presupuesto de render, depuración INP
Accesibilidad: scripts de axe + recorrido con lector de pantalla
Seguridad: revisión enfocada en OWASP y escaneo de secretos
Depuración: flujo estructurado de análisis de causa raíz, asistido por profiler
Funciona con múltiples agentes (Claude Code, Cursor, Codex, Gemini CLI)
MIT, sin telemetría

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "addyosmani-agent-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Addy Osmani Agent Skills

Cómo corregir fallos de Core Web Vitals con Claude haciendo el trabajo pesado

👤 Ingenieros frontend, equipos conscientes del rendimiento ⏱ ~90 min intermediate

Cuándo usarlo: PageSpeed bajó, LCP regresó por encima de 2,5s, el negocio está preguntando por qué.

Requisitos previos

Skill instalada — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
URL o repo a auditar — URL pública o servidor de desarrollo local

Flujo

Diagnosticar

Usa la skill de perf en https://misitio.com. Obtén un informe CrUX, ejecuta un trace de Lighthouse e identifica los 3 principales culpables de LCP e INP.✓ Copiado

→ Lista clasificada de culpables con referencias a archivos, no consejos genéricos de 'optimiza imágenes'
Corregir

Para el principal culpable de LCP, aplica la corrección. Para imágenes, prefiere fetchpriority + fallback AVIF/WebP. Muestra el diff y el razonamiento.✓ Copiado

→ Cambio de código + impacto esperado en métricas antes/después
Verificar

Vuelve a ejecutar Lighthouse localmente. Compara con la ejecución anterior.✓ Copiado

→ Los números mejoraron; si no, la hipótesis era incorrecta — volver al paso 1

Resultado: Mejoras medibles de LCP/INP con registro de cambios.

Errores comunes

Claude se lanza eagerly a reescribir un framework pesado — La skill incluye una regla de 'cambio mínimo viable' — pégala de vuelta si el agente se desvía

Combinar con: filesystem

Ejecutar una revisión segura-por-defecto en un código TypeScript

👤 Desarrolladores sin equipo de seguridad dedicado ⏱ ~75 min advanced

Cuándo usarlo: Antes del lanzamiento, quieres un barrido razonable — no un pen-test, pero mejor que nada.

Flujo

Escanear

Usa la skill de seguridad. Escanea src/ para: secretos hardcodeados, consultas SQL/NoSQL inseguras, rate limits faltantes en handlers POST, uso incorrecto de JWT.✓ Copiado

→ Tabla de hallazgos con archivo:línea y severidad
Corregir los 5 principales

Corrige los elementos de mayor severidad. Añade tests donde sea factible.✓ Copiado

→ 5 correcciones aplicadas

Resultado: Código que no fallará una revisión de seguridad básica.

Errores comunes

Falsos positivos en fixtures de test — La skill respeta /tests/ y /__fixtures__/ por defecto — pasa --include-tests para anularlo

Combinar con: github

Usar la skill estructurada de depuración en una regresión

👤 Cualquier desarrollador con un bug de 'ayer funcionaba' ⏱ ~60 min intermediate

Cuándo usarlo: Llevas 30 minutos adivinando — cambia a un flujo estructurado de causa raíz.

Flujo

Reproducir

Usa la skill de debug. Primer paso: obtener una reproducción mínima.✓ Copiado

→ Pasos de reproducción + un test fallido
Bisectar

Bisecta el historial de git con el test fallido como oráculo.✓ Copiado

→ Commit problemático identificado
Corregir

Corrección quirúrgica — conserva el comportamiento previsto del commit problemático.✓ Copiado

→ Corrección confirmada con explicación

Resultado: Una corrección reproducible respaldada por un test, no una intuición.

Errores comunes

La skill aplica bisect en exceso cuando el bug no está en el código (entorno/datos) — La skill verifica entorno/datos primero según su lista de verificación — sigue el orden

Combinar con: github

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

addyosmani-agent-skills + github

Abrir PRs desde la salida de las skills

addyosmani-agent-skills + filesystem

Persistir informes de auditoría de skills

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar
perf.audit	url_or_path	Regresión de rendimiento
a11y.audit	path	Verificación de a11y antes de publicar
security.scan	path	Barrido de seguridad pre-lanzamiento
debug.bisect	failing_test, search_window	Regresión con baseline conocido como bueno

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: N/A — skill local
Tokens por llamada: Las revisiones intensas pueden ser altas; bases de código grandes usan 50k+ tokens
Monetario: Gratis (MIT)
Consejo: Ejecuta perf/a11y por ruta, no en todo el sitio a la vez, para mantener los costes acotados

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: filesystem-read

Almacenamiento de credenciales: Ninguno

Salida de datos: Lighthouse se ejecuta localmente; solo se obtienen las URLs auditadas

La salida de la skill puede citar código fuente — revisa antes de compartir externamente

Resolución de problemas

Errores comunes y soluciones

Lighthouse no se ejecuta

Instala Node 18+ y Chrome; la skill espera ambos en PATH

Verificar: `npx lighthouse https://example.com` funciona de forma independiente

Reglas de axe desactualizadas

La skill incluye una versión fijada de axe; actualiza con git pull regularmente

Bisect se ejecuta indefinidamente en un test no determinista

Pasa --repeat 3 para que cada commit se pruebe 3 veces — los tests intermitentes se filtran

Alternativas

Addy Osmani Agent Skills vs otros

Alternativa	Cuándo usarla	Contrapartida
wshobson/agents	Quieres cobertura amplia de roles (backend / datos / DevOps)	wshobson es más amplio; el bundle de Addy es más profundo en perf web/a11y
Skills oficiales de Anthropic	Bloques de construcción genéricos y oficialmente respaldados	Menos opinadas; menos orientadas a la práctica

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills