ai-friendly-web-design-skill MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

14 principios de diseño optimizados para navegación de agentes + accesibilidad
Convenciones de localizadores data-testid / data-ai-action estables
Sin interacciones solo al pasar el ratón, sin barreras de iframes/Shadow DOM
Estados de carga explícitos para evitar condiciones de carrera
Activación automática durante construcción/revisión de UI — marca problemas con severidad

Demo en vivo

Cómo se ve en la práctica

ai-friendly-web-design-skill.replay ▶ listo

0/0

Instalar

Elige tu cliente

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

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

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

{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_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": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_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": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "ai-friendly-web-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "ai-friendly-web-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/ianho7/ai-friendly-web-design-skill",
          "~/.claude/skills/ai-friendly-web-design-skill"
        ]
      }
    }
  }
}

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

claude mcp add ai-friendly-web-design-skill -- git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill

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

Casos de uso

Usos del mundo real: ai-friendly-web-design-skill

Auditar un componente existente para prepararlo para agentes

👤 Desarrolladores web que entregan a clientes que accederán a la página con agentes ⏱ ~30 min beginner

Cuándo usarlo: Tu chatbot de soporte o agente de QA sigue perdiendo el botón correcto.

Requisitos previos

Habilidad instalada — git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill

Flujo

Proporciona a Claude el componente

Revisa este Checkout.tsx según los principios de ai-friendly-web-design. Marca la severidad.✓ Copiado

→ Lista clasificada: crítico (envío solo al pasar) -> menor (falta aria-live)
Aplica las correcciones

Aplica todas las correcciones críticas + mayores, mantén los visuales idénticos.✓ Copiado

→ Componente parcheado + resumen de diferencias

Resultado: Un componente que siga siendo bonito para humanos y accesible para agentes.

Errores comunes

Agregar data-testid en todas partes sin convención — Sigue la convención de nombres de la habilidad (data-testid='<area>-<action>') o se desviarán

Combinar con: chrome-devtools

Construir un nuevo formulario con controles nativos y ARIA adecuado

👤 Desarrolladores frontend que construyen formularios críticos (checkout, incorporación) ⏱ ~45 min intermediate

Cuándo usarlo: Un nuevo formulario donde no puedes permitirte bloquear lectores de pantalla o agentes.

Flujo

Estructura a partir de principios

Construye un formulario de dirección de facturación usando ai-friendly-web-design. Tipos de entrada nativos, etiquetas, aria-describedby para errores, carga explícita al enviar.✓ Copiado

→ Formulario con tipos HTML nativos (email, tel), sin hacks personalizados de combobox
Agregar enlaces profundos + estado de URL

Haz que el paso del formulario se refleje en la URL para que los agentes puedan abrir el paso 2 directamente.✓ Copiado

→ parámetro step en URL, estado restaurado al cargar

Resultado: Un formulario que tanto la tecnología de asistencia como los agentes naveguen limpiamente.

Reemplazar scroll infinito con paginación predecible

👤 Ingenieros de producto donde los agentes no pueden pasar de la página 1 ⏱ ~30 min intermediate

Cuándo usarlo: Tu página de lista usa scroll infinito y los agentes nunca llegan a los elementos debajo del pliegue.

Flujo

Refactorizar a ruta paginada

Reemplaza la lista de scroll infinito con paginación basada en URL (?page=N). Mantén la sensación del comportamiento de scroll.✓ Copiado

→ Páginas direccionables, anterior/siguiente con ARIA

Resultado: Una lista que un agente pueda recorrer de forma determinista.

Errores comunes

Romper el SEO eliminando completamente el scroll antiguo — Mantén la carga de scroll dentro de cada página — solo haz que el límite de página sea explícito

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

ai-friendly-web-design-skill + chrome-devtools

Prueba el componente en vivo y confirma que los localizadores de agentes funcionen

Carga el componente parcheado en devtools, verifica que los valores data-testid y atributos aria se rendericen.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar
review_component	component path/source	Cualquier PR de UI o auditoría
apply_principles	component + findings	Después de la revisión
scaffold_agent_friendly	UI spec	UI desde cero

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguno
Tokens por llamada: Moderado — componente + revisión
Monetario: Gratuito
Consejo: Ejecuta la revisión en el momento del PR, no en cada pulsación de tecla

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno

Salida de datos: Ninguno

Resolución de problemas

Errores comunes y soluciones

La revisión dice que no hay problemas pero los agentes aún pierden botones

Ejecuta con snapshot de Chrome DevTools; el Shadow DOM puede estar oculto de la revisión estática

Los nombres data-testid entran en conflicto con las pruebas existentes

Proporciona tu convención de nombres a la habilidad antes de que se auto-nombre

Alternativas

ai-friendly-web-design-skill vs otros

Alternativa	Cuándo usarla	Contrapartida
Manual a11y review + Lighthouse	Solo te importa la accesibilidad, no la navegación de agentes	Se pierden preocupaciones específicas de agentes como localizadores estables

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills