菜单
Principio 4 de WCAG - compatibilidad con tecnologías actuales y futuras. Use cuando implemente HTML, ARIA, o componentes custom para asegurar compatibilidad.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Biblioteca de componentes y patrones UI mobile-first para PWAs iOS/Android. Cubre navegación, gestos, componentes, cámara, safe areas, y patterns de Tailwind + shadcn/ui optimizados para móvil. Cumple iOS HIG y Material Design 3.
Workflow completo de desarrollo Design-First: exploración → clarificación → planificación → implementación autónoma (Ralph Loop). Incluye creación de issues GitHub de alta calidad estilo PRD.
Mantiene consistencia visual en apps iOS/PWA. Define paleta de colores, tipografía, espaciado, y componentes siguiendo un Design Token System. Evita inconsistencias de colores, fuentes y estilos. Usar cuando se detecten problemas de consistencia visual o al iniciar un nuevo proyecto.
Orquesta el flujo completo de MVP automatizado: SPEC → Historias → Tareas → Skills. Genera skills especializadas para cada tarea para que los agentes paralelos tengan conocimiento contextual específico.
Realiza entrevistas de feedback post-MVP para identificar bugs, mejoras UX, problemas de performance, seguridad y features faltantes
Principio 2 de WCAG - interfaces operables por todos. Use cuando diseñe navegación, interacciones, o cualquier componente que requiera input del usuario.
| name | wcag-robust |
| description | Principio 4 de WCAG - compatibilidad con tecnologías actuales y futuras. Use cuando implemente HTML, ARIA, o componentes custom para asegurar compatibilidad. |
| metadata | {"author":"ux-ui-skills","version":"1.0","category":"accessibility"} |
El cuarto principio de WCAG establece que el contenido debe ser lo suficientemente robusto para ser interpretado por una amplia variedad de user agents, incluyendo tecnologías asistivas.
<!-- Malo: ID duplicado -->
<div id="menu">...</div>
<div id="menu">...</div>
<!-- Bueno: IDs únicos -->
<div id="main-menu">...</div>
<div id="footer-menu">...</div>
Todo componente de UI debe tener:
<!-- Nativo: automáticamente accesible -->
<button>Guardar</button>
<input type="checkbox" checked />
<!-- Custom: necesita ARIA -->
<div role="button" aria-label="Guardar" tabindex="0">💾</div>
<div role="checkbox" aria-checked="true" tabindex="0">✓</div>
Los mensajes que informan al usuario deben ser anunciados por screen readers sin recibir focus.
<!-- Live region para mensajes -->
<div role="status" aria-live="polite">Guardado exitosamente</div>
<div role="alert" aria-live="assertive">Error: No se pudo guardar</div>
Si puedes usar un elemento HTML nativo con la semántica requerida, úsalo.
<!-- Landmarks -->
<nav role="navigation">
<!-- o simplemente <nav> -->
<main role="main">
<!-- o simplemente <main> -->
<aside role="complementary">
<!-- o simplemente <aside> -->
<!-- Widgets -->
<div role="button">
<!-- mejor usar <button> -->
<div role="tablist">
<div role="dialog">
<div role="alert"></div>
</div>
</div>
</div>
</aside>
</main>
</nav>
<!-- Estados -->
aria-expanded="true|false" aria-selected="true|false" aria-hidden="true|false"
aria-disabled="true|false"
<!-- Propiedades -->
aria-label="Descripción" aria-labelledby="id-del-label"
aria-describedby="id-de-descripcion" aria-controls="id-del-elemento-controlado"
<!-- Tabs accesibles -->
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
Tab 1
</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
Tab 2
</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Contenido Tab 1</div>
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h2 id="modal-title">Confirmar acción</h2>
<p>¿Estás seguro?</p>
<button>Confirmar</button>
<button>Cancelar</button>
</div>
<!-- Contador de items -->
<div aria-live="polite" aria-atomic="true">3 items en el carrito</div>
<!-- Notificaciones -->
<div role="status">Mensaje enviado</div>