AI-Friendly Web Design
Revisa o construye UI con una lista de verificación clasificada por severidad para HTML semántico, ARIA, localizadores estables y trampas de hover/popup.
Probado · Funciona
Qué hace
Proporciona cinco modos de tarea (design, implement, review, refactor, generate tests) más un modelo de severidad fijo Alta/Media/Baja para detectar bloqueadores de operabilidad como div-as-button, menús solo con hover y entradas sin etiquetar, y recomienda localizadores de Playwright role/label/text-first sobre selectores CSS. Se activa con trabajo de componentes de UI, revisiones de accesibilidad, decisiones de HTML semántico/ARIA y autoría de pruebas de Playwright.
Informe de la prueba
Se revisó un fragmento de formulario de inicio de sesión deliberadamente roto (botones div, entradas solo con placeholder, menú de ayuda solo con hover): la revisión guiada por la habilidad marcó correctamente el menú solo con hover como de severidad Alta según sus propios innegociables y produjo una tabla de severidad con correcciones de Playwright getByRole/getByLabel, mientras que la revisión de línea base solo dijo 'add labels' sin clasificación.
Probado el: 2026-07-14 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/ianho7/ai-friendly-web-design-skill cd ai-friendly-web-design-skill mkdir -p ~/.claude/skills cp -r skills/ai-friendly-web-design ~/.claude/skills/ai-friendly-web-design
Comandos y prompts de ejemplo
/ai-friendly-web-designRevisa o construye UI con una lista de verificación clasificada por severidad para HTML semántico, ARIA, localizadores estables y trampas de hover/popup.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Review this login form for accessibility issues.Write Playwright tests for checkout using stable locators.I'm designing a new settings page, help with the UI contract.