Creación de Interfaces y Accesibilidad
Resumen
El estándar es accesible, minimalista y hermoso — por construcción, no por pulido. El gusto no es accionable como regla, por lo que se convierte en restricciones, precedentes y escalamiento. No se le pide al agente que invente gusto, solo que respete las restricciones y escale el resto.
Accesibilidad — un requisito, no un pase final
Reglas comprobables:
- Cada elemento interactivo debe ser accesible por teclado con un estado de foco visible.
- Cada control debe tener un nombre accesible; cada campo de formulario debe tener una etiqueta asociada y mensajes de error claros.
- HTML semántico y landmarks en lugar de sopa de
div. - El contraste de color debe cumplir WCAG AA; el significado nunca debe transmitirse solo por color.
- Respetar las preferencias de movimiento reducido.
Hermoso y minimalista — como restricciones, no como sensaciones
- Consistencia mediante restricción. Usar los tokens del sistema de diseño — espaciado, escala tipográfica, escala de color. Sin números mágicos únicos. La coherencia es la estética.
- Las pantallas existentes son la guía de estilo. Coincidir con el lenguaje visual establecido antes de inventar.
- Moderación (UI-YAGNI). Cada elemento gana su lugar; eliminar hasta que eliminar algo rompa algo. Jerarquía y espacio en blanco sobre densidad y decoración.
- Preferir los patrones de la biblioteca de componentes antes de construir UI personalizada.
- Dos elementos de UI similares → un componente parametrizado. Las diferencias son props/variantes, nunca copiar y pegar. Una tercera copia es un defecto. (DRY aplicado a la interfaz.)
La regla de escalamiento
Las decisiones de gusto se escalan; nunca se toman por cuenta propia. Cuando una elección es genuinamente estética y no está determinada por tokens o precedentes, no adivinar en silencio:
- Seguir el precedente más cercano existente, o
- Presentar opciones (maquetas, comparaciones lado a lado) para una decisión humana de gusto.
Referencia rápida
| Situación | Hacer |
|---|---|
| Nuevo componente se parece a uno existente | Parametrizar el existente; no copiar |
| Un valor de espaciado/color no está en los tokens | Usar el token más cercano; no inventar un número mágico |
| Decisión visual genuinamente novedosa | Escalar con opciones; no improvisar |
| Agregar un elemento interactivo | Teclado + foco + nombre accesible, desde el inicio |
Aplicación: linting/pruebas de accesibilidad en CI (por ejemplo, eslint-plugin-jsx-a11y, axe) para las reglas comprobables; la moderación estética es criterio del revisor mediante la regla de escalamiento.
Fundamento completo: Artículo VII de la constitución, incluido en engineering-constitution/references/engineering-constitution.md.