القائمة
Principio 3 de WCAG - contenido comprensible para todos. Use cuando escriba contenido, diseñe flujos, o implemente comportamientos predecibles.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| 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>
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.