swl-ses 3.3.2

package/habilidades/ux-diseno/SKILL.md

@@ -0,0 +1,488 @@
+---
+name: ux-diseno
+description: Principios de UX design para desarrolladores. Heurísticas de Nielsen, Fitts's Law, Ley de Miller, Gestalt, jerarquía visual, micro-interacciones, feedback visual, estados vacíos, error states, loading states.
+---
+
+# UX Design para Desarrolladores
+
+Un desarrollador que entiende UX toma mejores decisiones de implementación sin necesitar
+validación en cada detalle visual. Estos principios reducen fricción y aumentan la usabilidad
+sin depender de un diseñador para cada componente.
+
+---
+
+## 1. Las 10 Heurísticas de Nielsen
+
+### H1 — Visibilidad del estado del sistema
+
+El sistema debe siempre informar al usuario qué está pasando, en tiempo oportuno.
+
+```html
+<!-- MAL: botón que no indica que está procesando -->
+<button onclick="enviar()">Enviar</button>
+
+<!-- BIEN: feedback inmediato del estado -->
+<button [disabled]="cargando" (click)="enviar()">
+  @if (cargando) {
+    <span class="spinner" aria-label="Enviando..."></span>
+    Enviando...
+  } @else {
+    Enviar
+  }
+</button>
+
+<!-- Loading states: skeleton > spinner > mensaje de texto -->
+```
+
+### H2 — Match entre sistema y mundo real
+
+Hablar el idioma del usuario, no el del desarrollador.
+
+```
+MAL: "Error 500: Internal Server Error. SQLAlchemy constraint violation."
+BIEN: "No pudimos guardar los cambios. Por favor intenta de nuevo."
+
+MAL: "Token JWT expirado"
+BIEN: "Tu sesión ha expirado. Inicia sesión nuevamente para continuar."
+
+MAL: Mostrar UUID en la interfaz: "ID: a3f2-4b1c-..."
+BIEN: Mostrar número de folio amigable: "Solicitud #2024-0142"
+```
+
+### H3 — Control y libertad del usuario
+
+Los usuarios cometen errores — darles salidas claras.
+
+```
+Siempre proveer:
+- Botón "Cancelar" en formularios largos
+- "Deshacer" en acciones destructivas (o soft-delete con tiempo límite)
+- Confirmación antes de eliminar: "¿Eliminar expediente de Juan Pérez? Esta acción no se puede deshacer."
+- Breadcrumbs para saber dónde están y poder regresar
+```
+
+### H4 — Consistencia y estándares
+
+```
+Convenciones que NUNCA romper:
+- Azul subrayado = enlace
+- Logo (top-left) = regresa a inicio
+- X en esquina superior = cerrar modal
+- Enter en formulario = enviar
+- Escape = cerrar/cancelar
+
+En el sistema: un mismo patrón para la misma acción.
+Si "Guardar" está a la izquierda en un formulario, que esté a la izquierda en todos.
+```
+
+### H5 — Prevención de errores
+
+```html
+<!-- Mejor prevenir que mostrar mensajes de error -->
+
+<!-- Deshabilitar botón hasta que el formulario sea válido -->
+<button [disabled]="!formulario.valid" type="submit">
+  Guardar
+</button>
+
+<!-- Confirmar email peligroso antes de proceder -->
+<input
+  type="email"
+  placeholder="correo@empresa.com.mx"
+  pattern="[a-z0-9._%+\-]+@empresa\.com\.mx"
+/>
+<small>Solo se aceptan correos @empresa.com.mx</small>
+
+<!-- Formatear automáticamente mientras el usuario escribe -->
+<!-- RFC: XXXX000000XXX — aplicar máscara de input -->
+```
+
+### H6 — Reconocimiento antes que recuerdo
+
+```
+No forzar al usuario a recordar información entre pantallas.
+- Mostrar qué archivo se seleccionó en paso anterior
+- Mostrar nombre del empleado en todos los pasos de un flujo multi-paso
+- Autocompletar con datos usados recientemente
+- Mostrar progreso en formularios multi-paso (Step 2 de 4)
+```
+
+### H7 — Flexibilidad y eficiencia de uso
+
+```
+Atajos para usuarios expertos:
+- Keyboard shortcuts documentados (Ctrl+S = guardar, Ctrl+F = buscar)
+- Acciones en masa para usuarios frecuentes
+- Filtros guardados / búsquedas favoritas
+- "Crear otro" en formularios de alta frecuente
+```
+
+### H8 — Diseño minimalista y estético
+
+```
+Cada elemento extra compite por atención del usuario.
+Eliminar:
+- Texto instructivo que nadie lee
+- Campos opcionales que casi nadie llena
+- Iconos sin texto en acciones no obvias
+- Columnas de tabla que nadie usa
+
+Regla: si dudas si incluir algo, no lo incluyas.
+```
+
+### H9 — Ayudar a reconocer, diagnosticar y recuperarse de errores
+
+```
+Mensaje de error efectivo = Qué pasó + Por qué + Qué hacer
+
+MAL: "Error de validación"
+BIEN: "El RFC debe tener 13 caracteres. Ejemplo: PEGJ850101GR5"
+
+MAL: "Operación fallida"
+BIEN: "No se pudo conectar al servidor de nómina SAP.
+       Por favor intenta en 5 minutos. Si el problema persiste,
+       contacta a soporte@empresa.com.mx"
+```
+
+### H10 — Ayuda y documentación
+
+```
+La mejor ayuda es que la interfaz sea autoexplicativa.
+Cuando se necesita ayuda:
+- Tooltips en campos técnicos (hover sobre el ícono ?)
+- Links a artículos específicos ("¿Cómo calculo el IMSS?")
+- Texto de ejemplo dentro del campo (placeholder)
+- Ejemplos reales en mensajes de error
+```
+
+---
+
+## 2. Ley de Fitts — Tamaño y Distancia de Objetivos
+
+**Principio**: El tiempo para alcanzar un objetivo depende de su tamaño y distancia.
+Objetivos más grandes y más cercanos son más fáciles de alcanzar.
+
+```css
+/* MAL: botón de acción principal demasiado pequeño */
+.btn-guardar {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+/* BIEN: objetivo con área de toque adecuada */
+.btn-guardar {
+  padding: 12px 24px;        /* Mínimo 44x44px de área táctil (mobile) */
+  font-size: 16px;
+  min-height: 44px;          /* Estándar de accesibilidad táctil */
+}
+
+/* Acciones destructivas alejadas de las primarias */
+.acciones-formulario {
+  display: flex;
+  gap: 16px;
+}
+
+.btn-cancelar {
+  /* Lejos y de menor prominencia visual que "Guardar" */
+  margin-right: auto;
+  color: #666;
+  background: transparent;
+}
+
+.btn-guardar {
+  /* Acción principal: grande, prominente, a la derecha */
+  background: #1a56db;
+  color: white;
+}
+```
+
+---
+
+## 3. Ley de Miller — El número mágico 7±2
+
+**Principio**: La memoria de trabajo puede retener entre 5 y 9 elementos simultáneamente.
+
+```
+Aplicaciones prácticas:
+- Menú de navegación: máximo 7 opciones de primer nivel
+- Pasos de wizard: máximo 5-7 pasos (si son más, revisar el flujo)
+- Columnas en tabla: máximo 7 columnas visibles sin scroll horizontal
+- Opciones en dropdown: si hay más de 7, agregar búsqueda
+- Formulario: agrupar campos relacionados en secciones (máximo 7 por sección)
+```
+
+```html
+<!-- MAL: 12 opciones de filtro sin agrupar -->
+<select>
+  <option>Enero</option> <option>Febrero</option> <option>Marzo</option>
+  <!-- ... 9 opciones más -->
+</select>
+
+<!-- BIEN: agrupar opciones relacionadas -->
+<select>
+  <optgroup label="2026">
+    <option>Enero 2026</option>
+    <option>Febrero 2026</option>
+  </optgroup>
+  <optgroup label="2025">
+    <option>Diciembre 2025</option>
+    <!-- ... -->
+  </optgroup>
+</select>
+```
+
+---
+
+## 4. Principios Gestalt
+
+### Proximidad — Elementos cercanos parecen relacionados
+
+```css
+/* Campos del mismo formulario: poco espacio entre ellos */
+/* Secciones distintas: mucho espacio entre ellas */
+.grupo-campo {
+  margin-bottom: 8px;    /* Dentro del mismo grupo */
+}
+.seccion {
+  margin-bottom: 32px;   /* Entre secciones distintas */
+}
+```
+
+### Similitud — Elementos similares parecen relacionados
+
+```css
+/* Mismo color + estilo = misma función */
+/* Botones primarios: azul */
+/* Botones destructivos: rojo */
+/* Botones neutros: gris */
+/* NUNCA mismo color para funciones distintas */
+```
+
+### Continuidad — El ojo sigue líneas y curvas
+
+```html
+<!-- Usar alineación para guiar al ojo -->
+<!-- Formulario: labels alineados a la izquierda, inputs alineados -->
+<!-- Tabla: columnas numéricas alineadas a la derecha -->
+```
+
+---
+
+## 5. Jerarquía Visual
+
+```css
+/* Escala tipográfica clara */
+:root {
+  --text-xs:   0.75rem;    /* 12px — metadatos, badges */
+  --text-sm:   0.875rem;   /* 14px — texto secundario */
+  --text-base: 1rem;       /* 16px — cuerpo */
+  --text-lg:   1.125rem;   /* 18px — subtítulos */
+  --text-xl:   1.25rem;    /* 20px — títulos de sección */
+  --text-2xl:  1.5rem;     /* 24px — títulos de página */
+  --text-3xl:  1.875rem;   /* 30px — hero / KPIs */
+
+  /* Pesos */
+  --font-normal:   400;
+  --font-medium:   500;
+  --font-semibold: 600;
+  --font-bold:     700;
+
+  /* Color como jerarquía */
+  --color-text-primary:   #111827;  /* Contenido principal */
+  --color-text-secondary: #6b7280;  /* Contenido de apoyo */
+  --color-text-disabled:  #9ca3af;  /* Deshabilitado */
+}
+```
+
+---
+
+## 6. Estados que Toda UI Debe Manejar
+
+### Estado de Carga (Loading)
+
+```html
+<!-- Skeleton loader — mejor que spinner para listas -->
+<div class="skeleton-card" aria-busy="true" aria-label="Cargando expedientes...">
+  <div class="skeleton-line w-3/4 h-4 mb-2"></div>
+  <div class="skeleton-line w-1/2 h-3 mb-1"></div>
+  <div class="skeleton-line w-2/3 h-3"></div>
+</div>
+
+<!-- Spinner inline para acciones puntuales -->
+<button disabled>
+  <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">...</svg>
+  Guardando...
+</button>
+```
+
+```css
+/* Skeleton con animación de shimmer */
+.skeleton-line {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+```
+
+### Estado Vacío (Empty State)
+
+```html
+<!-- MAL: tabla vacía sin explicación -->
+<table>
+  <thead>...</thead>
+  <tbody><!-- nada --></tbody>
+</table>
+
+<!-- BIEN: empty state con contexto y acción -->
+<div class="empty-state" role="status">
+  <img src="assets/empty-expedientes.svg" alt="" aria-hidden="true" />
+  <h3>No hay expedientes registrados</h3>
+  <p>Crea el primer expediente para comenzar a gestionar tu equipo.</p>
+  <a routerLink="/expedientes/nuevo" class="btn-primary">
+    Crear expediente
+  </a>
+</div>
+```
+
+### Estado de Error
+
+```html
+<!-- Error inline en formulario -->
+<div class="error-message" role="alert">
+  <svg class="error-icon" aria-hidden="true">...</svg>
+  <div>
+    <strong>No se pudo guardar el expediente</strong>
+    <p>El número de empleado ya existe en el sistema. Verifica el campo e intenta nuevamente.</p>
+  </div>
+  <button onclick="reintentar()">Reintentar</button>
+</div>
+
+<!-- Error de página completa (403, 404, 500) -->
+<div class="error-page">
+  <span class="error-code">404</span>
+  <h1>Página no encontrada</h1>
+  <p>La URL que buscas no existe o fue movida.</p>
+  <div class="acciones">
+    <a routerLink="/">Ir al inicio</a>
+    <button onclick="history.back()">Regresar</button>
+  </div>
+</div>
+```
+
+---
+
+## 7. Micro-interacciones
+
+```css
+/* Feedback visual en acciones */
+
+/* Botón con confirmación visual de éxito */
+.btn-guardar.exito {
+  background-color: #16a34a;
+  transition: background-color 0.3s ease;
+}
+
+/* Hover suave en cards clicables */
+.card-empleado {
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  cursor: pointer;
+}
+.card-empleado:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+/* Animación de entrada para notificaciones */
+@keyframes slide-in {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0);   opacity: 1; }
+}
+.toast {
+  animation: slide-in 0.25s ease-out;
+}
+
+/* Reducir movimiento para usuarios con vestibular disorders */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## 8. Formularios — UX Específica
+
+```
+Orden de campos: del más familiar al más específico
+1. Nombre → Apellido → Email (todos conocen esto)
+2. Departamento → Puesto (contexto)
+3. RFC → CURP → NSS (datos específicos de RRHH)
+
+Reglas de campo:
+- Label siempre visible (no solo placeholder)
+- Hint text debajo del campo, no encima
+- Error mensaje específico, no genérico
+- Marcar REQUERIDO con asterisco (*) y leyenda al inicio
+- Marcar OPCIONAL explícitamente (no asumir que el usuario lo sabe)
+- Autocompletar habilitado para datos personales (autocomplete="name", etc.)
+- Tab order lógico (de izquierda a derecha, arriba a abajo)
+- Formato de fecha en contexto mexicano: dd/mm/aaaa
+```
+
+---
+
+## 9. Mobile First
+
+```css
+/* Base: mobile (320px+) */
+.grid-empleados {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+/* Tablet (768px+) */
+@media (min-width: 768px) {
+  .grid-empleados {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Desktop (1024px+) */
+@media (min-width: 1024px) {
+  .grid-empleados {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Área táctil mínima en mobile */
+@media (pointer: coarse) {
+  button, a, input[type="checkbox"], input[type="radio"] {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+```
+
+---
+
+## 10. Anti-patrones UX Comunes
+
+| Anti-patrón | Efecto en usuario | Solución |
+|-------------|------------------|----------|
+| Dark pattern: pre-marcar checkboxes de suscripción | Suscripciones no deseadas | Checkboxes desmarcados por defecto |
+| Confirmar con "OK" y "Cancelar" sin contexto | Usuario hace clic en el incorrecto | "Eliminar expediente" y "Cancelar" |
+| Formulario pierde datos al navegar atrás | Frustración, trabajo perdido | Guardar borrador automáticamente |
+| Paginación sin indicar cuántos resultados hay | Usuario no sabe cuánto falta | "Mostrando 1-20 de 347 expedientes" |
+| Spinner que gira indefinidamente | Usuario no sabe si hay error | Timeout + mensaje de error |
+| Botón de submit duplicado | Doble envío de formulario | Deshabilitar tras primer clic |
+| Menú desplegable para 2-3 opciones | Fricción innecesaria | Radio buttons o tabs visibles |
+| Placeholder como label (desaparece al escribir) | Usuario olvida qué debe ir ahí | Label real + placeholder como ejemplo |