/ Directorio / Playground / ai-friendly-web-design-skill
← Todos los servidores ↗ GitHub
● Comunidad ianho7 ⚡ Instantáneo

ai-friendly-web-design-skill

por ianho7 · ianho7/ai-friendly-web-design-skill

14 principios de diseño más auto-revisión para construir UIs web que los agentes IA puedan navegar de forma confiable — HTML semántico, IDs de prueba estables, sin interacciones ocultas.

Una habilidad de Claude Code que aplica 14 principios de diseño para que las UIs sean usables por humanos y automatización/agentes: HTML semántico, ARIA, localizadores data-testid / data-ai-action estables, controles de formulario nativos, paginación sobre scroll infinito, estados de carga explícitos, enlaces profundos en URL, errores claros, puntos de entrada duales UI+API. Se aplica automáticamente cuando Claude construye o revisa un componente de UI.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

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

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

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.

Flujo
  1. 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)
  2. 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
  1. 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
  2. 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
  1. 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

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

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

AlternativaCuándo usarlaContrapartida
Manual a11y review + LighthouseSolo te importa la accesibilidad, no la navegación de agentesSe 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