Menu
Principio 3 de WCAG - contenido comprensible para todos. Use cuando escriba contenido, diseñe flujos, o implemente comportamientos predecibles.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
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.
Based on SOC occupation classification
| name | wcag-understandable |
| description | Principio 3 de WCAG - contenido comprensible para todos. Use cuando escriba contenido, diseñe flujos, o implemente comportamientos predecibles. |
| metadata | {"author":"ux-ui-skills","version":"1.0","category":"accessibility"} |
El tercer principio de WCAG establece que la información y la operación de la interfaz deben ser comprensibles. Los usuarios deben poder entender tanto el contenido como cómo operar la interfaz.
<!-- Idioma de página -->
<html lang="es">
<!-- Cambio de idioma en parte -->
<p>
La palabra <span lang="en">accessibility</span> significa accesibilidad.
</p>
</html>
<!-- Malo: cambio de contexto en focus -->
<select onchange="window.location=this.value">
<option>Seleccionar...</option>
<option value="/page1">Página 1</option>
</select>
<!-- Bueno: requiere acción explícita -->
<select id="pages">
<option>Seleccionar...</option>
<option value="/page1">Página 1</option>
</select>
<button onclick="goToPage()">Ir</button>
<!-- Error message asociado -->
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-error" />
<div id="email-error" class="error">
Ingresa un email válido, por ejemplo: nombre@ejemplo.com
</div>
<label for="phone">
Teléfono
<span class="hint">(formato: 555-123-4567)</span>
</label>
<input
id="phone"
type="tel"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
aria-describedby="phone-hint"
/>
<div id="phone-hint" class="visually-hidden">
Ingresa 10 dígitos separados por guiones
</div>