Lección 12 de 47 ≈ 60 min Construcción profesional Codex + GPT-5.6 Sol
Resultado visible
Cada acción mostrará qué está ocurriendo: inicial, foco, validación, envío, éxito, fallo, vacío y deshabilitado. Las animaciones comunicarán cambio, no ocultarán espera.
Ejemplo resuelto
Formulario de contacto:
- el botón dice «Enviar consulta»;
- durante el envío cambia a «Enviando…» y evita duplicados;
- si falla, conserva los datos no sensibles y explica qué hacer;
- si funciona, confirma recepción sin prometer respuesta inmediata;
- ofrece un canal alternativo.
Prompt
Haz un inventario de acciones de la interfaz. Para cada una define estados
inicial, hover, focus, loading, success, error, empty y disabled cuando
apliquen. Implementa primero los estados del recorrido principal.
No uses solo color para comunicar. Respeta reduced motion y evita bloquear
la interfaz con animaciones. Prueba doble clic, red lenta y fallo de red.
Errores frecuentes
- «Algo salió mal» sin indicar recuperación.
- botón deshabilitado sin explicar por qué;
- spinner infinito;
- mensaje verde que desaparece demasiado rápido;
- animación que provoca mareo o retrasa la tarea.
Evidencia
Graba o captura al menos éxito, error y foco. Documenta cómo simular cada estado sin alterar datos reales.
Fuentes oficiales
Siguiente misión recomendada
Si has guardado la evidencia de esta lección, continúa con «Decide cuándo pasar a Next.js». Si no, repite la comprobación antes de avanzar.