coastdigitalgroup/coastai-skills

Sistema de UI para Tableros Kanban

Propósito

El Sistema de UI para Tableros Kanban proporciona un marco de diseño estandarizado, de alta densidad y accesible para gestionar columnas de estado de flujo de trabajo, elementos de tareas basados en tarjetas y pipelines de procesos. Los tableros Kanban son lienzos de interacción centrales en aplicaciones SaaS modernas, herramientas de gestión de proyectos, sistemas de seguimiento de candidatos (ATS) y pipelines de CRM de ventas.

Diseñar una interfaz Kanban efectiva requiere equilibrar la alta densidad visual, el desplazamiento independiente de columnas, una jerarquía espacial clara, retroalimentación en tiempo real de los límites de trabajo en progreso (WIP) y la capacidad de respuesta fluida en diferentes ventanas gráficas. Además, las implementaciones tradicionales de arrastrar y soltar solo con puntero crean con frecuencia barreras de accesibilidad graves. Este skill cierra la brecha entre el diseño y la ejecución técnica, estableciendo reglas espaciales para la contención de columnas, la anatomía de las tarjetas de tareas, los objetivos táctiles y los flujos de trabajo de reordenación con teclado y lector de pantalla, cumpliendo con los estándares WCAG AA.

Casos de Uso

• Sistemas de Gestión de Proyectos y Tareas: Estructurar tableros de sprint, columnas de backlog (ej., Backlog, En Progreso, Revisión de Código, Hecho) y tableros de seguimiento de incidencias.
• Sistemas de Seguimiento de Candidatos (ATS): Visualizar etapas de reclutamiento de candidatos (ej., Aplicado, Preselección, Entrevista, Oferta, Contratado).
• Pipelines de Ventas y CRM: Gestionar etapas de leads de ventas con valores de negocios agregados y probabilidades de etapa por columna.
• Calendarios Editoriales de Contenido: Rastrear flujos de trabajo de producción de artículos y medios desde la ideación hasta el borrador, revisión y publicación.
• Espacios de Trabajo de Cumplimiento de Pedidos: Monitorear el procesamiento de pedidos de varios pasos en interfaces de logística o cocina.

Cuándo NO Usar

• Cuadrículas de Datos y Listas Financieras Tabulares: Para datos de filas densas de múltiples columnas que requieren ordenación, filtrado y edición masiva de celdas, usa sistema-de-ui-de-tabla-de-datos.
• Árboles de Archivos Jerárquicos o Documentación: Para estructuras de archivos profundamente anidadas y esquemas de documentos, usa sistema-de-navegacion-de-vista-de-arbol.
• Diseños de Shell de SaaS Bloqueados por Ventana Gráfica: Para la carcasa general de la aplicación (barras de navegación, barras superiores, paneles plegables), usa sistema-de-diseno-de-panel-de-control.
• Flujos de Actividad de Una Sola Columna: Para feeds de flujo cronológico o listas de tareas verticales simples, usa sistema-de-actividad-de-linea-de-tiempo o sistema-de-ui-de-tarjetas.

Entradas

1. Etapas del Flujo de Trabajo y Taxonomía de Columnas: La lista ordenada de estados de flujo de trabajo (ej., Por Hacer, En Progreso, Revisión, Hecho) y sus metadatos de columna (límites WIP, colores de acento de estado, totales de negocios).
2. Matriz de Densidad de Datos de Tarjetas: Atributos a mostrar por tarjeta de tarea (ej., ID de Tarea, Título, Etiqueta de Prioridad, Fecha de Vencimiento, Avatares de Asignados, Progreso de Subtareas, Recuentos de Archivos Adjuntos).
3. Contexto de la Ventana Gráfica y del Shell: Límites de diseño proporcionados por el shell de la aplicación padre (de sistema-de-diseno-de-panel-de-control).
4. Tokens de Diseño: Paletas de colores, superficies de elevación, escalas de espaciado y tokens de tipografía (de sistema-de-color-accesible, sistema-de-elevacion-y-profundidad y sistema-de-espaciado-fluido).

Salidas

1. Especificación del Lienzo de Columna Horizontal: Definiciones de diseño espacial para contenedores de desplazamiento horizontal bloqueados por ventana gráfica, anchos de columna fijos y espacios de separación.
2. Anatomía del Encabezado de Columna y Límite WIP: Diseños visuales para encabezados de columna, insignias de contador, umbrales de advertencia de límite WIP (normal, acercándose, excedido) y activadores de acción rápida.
3. Especificaciones del Componente de Tarjeta de Tarea: Planos de diseño estructurados para tarjetas de tarea estándar, compactas y expandidas, incluidos objetivos de manejador de arrastre, cuadrículas de metadatos y estados de interacción hover, focus y agarre.
4. Modelo Accesible de Teclado y Arrastrar y Soltar: Asignaciones de roles ARIA (role="region", role="list", role="listitem"), rutas de gestión de foco, atajos de teclado para reordenar y patrones de anuncio aria-live.
5. Estrategia de Pivote Móvil Responsiva: Guías de adaptación de diseño que cambian diseños horizontales de múltiples columnas a vistas de pestañas segmentadas o paneles de acordeón apilados en pantallas pequeñas.

---

Flujo de Trabajo

1. Establecer la Estructura del Lienzo de Columna Horizontal

Estructura el espacio de trabajo principal del tablero dentro de un shell bloqueado por ventana gráfica (sistema-de-diseno-de-panel-de-control):

• Dimensionamiento del Contenedor: Establece el contenedor del tablero a display: flex; flex-direction: row; height: 100%; overflow-x: auto; overflow-y: hidden; para permitir el desplazamiento horizontal a través de las columnas mientras se mantiene fijo el encabezado del tablero.
• Dimensiones de la Columna: Define anchos de columna fijos o que se encogen de forma flexible (min-width: 280px; max-width: 340px; width: 300px;). Evita que las columnas se reduzcan por debajo de 280px para evitar la truncación de texto y objetivos táctiles pequeños.
• Espacios de Separación y Relleno: Establece un espacio entre columnas consistente (ej., gap: var(--space-m, 16px)) y un relleno horizontal (ej., padding: 16px 24px).
• Carcasa del Contenedor de Columna: Dale estilo a cada columna como un contenedor flex independiente (display: flex; flex-direction: column; max-height: 100%; background: var(--surface-neutral-subtle); border-radius: 8px; border: 1px solid var(--border-subtle);).

2. Diseñar el Encabezado de la Columna y la Señalización WIP

Cada encabezado de columna actúa como una barra de control pegajosa en la parte superior de la pila de columnas:

• Encabezado de Columna Pegajoso: Posiciona el encabezado en la parte superior de la pila flex de la columna (flex-shrink: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;).
• Elementos del Encabezado:
  1. Indicador de Acento de Estado: Una píldora de color de 10x10px o un borde izquierdo correspondiente a la etapa (ej., Azul = En Progreso, Púrpura = Revisión, Verde = Hecho).
  2. Título de la Columna: Texto truncado (font-weight: 600; font-size: 0.9375rem; color: var(--text-primary)).
  3. Contador de Tarjetas e Insignia de Límite WIP: Muestra el recuento de elementos junto con el límite WIP (ej., "3/5").
  4. Menú de Acciones de Columna: Un botón de icono de 32x32px (...) que proporciona acceso a la configuración de columna, ordenación u opciones de colapso.
• Estados Visuales del Límite WIP:
  • Normal (Por debajo del límite): Fondo de insignia neutro sutil (background: var(--surface-neutral-muted); color: var(--text-secondary)).
  • Advertencia (En el límite): Fondo de insignia ámbar (background: var(--surface-warning-subtle); color: var(--text-warning-bold)).
  • Excedido (Por encima del límite): Insignia roja sólida o borde de encabezado resaltado (background: var(--surface-danger-subtle); border-color: var(--border-danger); color: var(--text-danger)), con un icono de advertencia accesible y un tooltip que explica el cuello de botella del flujo de trabajo.

3. Construir la Región de Desplazamiento de Columna Independiente

Evita que todo el tablero o la página se desplacen verticalmente al inspeccionar una larga lista de tarjetas en una sola columna:

• Contenedor de Lista de Tarjetas: Aplica flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px 12px; display: flex; flex-direction: column; gap: 8px; al contenedor de la lista (role="list").
• Inercia y Desplazamiento Suave: Habilita -webkit-overflow-scrolling: touch; y barras de desplazamiento personalizadas (barras de desplazamiento sutiles de 6px) para que las columnas individuales se desplacen suavemente sin desencadenar el movimiento global de la página.
• Contenedor de Estado Vacío: Si una columna contiene 0 tarjetas, muestra un contorno de zona de colocación discontinua (border: 2px dashed var(--border-muted); border-radius: 6px; padding: 24px; text-align: center;) con una etiqueta sutil ("No hay tareas en esta etapa") y un botón rápido "Añadir Tarjeta".

4. Construir la Jerarquía del Componente de Tarjeta de Tarea

Diseña las tarjetas de tarea con un orden de escaneo visual claro usando sistema-de-jerarquia-visual:

• Estructura Base de la Tarjeta: Renderiza cada tarjeta como un elemento de lista distinto (role="listitem" / article) con background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: grab;.
• Desglose de la Región de la Tarjeta:
  1. Fila Superior (Etiquetas y Acciones): Insignia de prioridad (ej., "Alta", "Urgente" en píldoras de alto contraste) y ID de referencia de la tarea (ej., "PROJ-1042"). Incluye un botón de manejador de arrastre de 24x24px (aria-label="Reorder card PROJ-1042").
  2. Región Media (Título y Descripción): Título principal de la tarea (font-weight: 600; font-size: 0.875rem; line-clamp: 2; margin-bottom: 8px;). Resumen de texto atenuado opcional de 1 línea.
  3. Fila Inferior de Metadatos (Progreso y Asignados): El lado izquierdo muestra el indicador de fecha de vencimiento (resaltado en rojo si está vencido) y el progreso de la lista de verificación de subtareas (ej., "3/5 ✓"). El lado derecho muestra avatares de asignados apilados (sistema-de-avatar-de-usuario).
• Estados de Interacción de la Tarjeta:
  • Hover: Ligero aumento de la sombra de elevación (box-shadow: var(--shadow-md); border-color: var(--border-hover)).
  • Focus: Anillo de foco descentrado de 2px altamente visible (outline: 2px solid var(--focus-ring); outline-offset: 2px).
  • Arrastrando / Estado de agarre: opacity: 0.6; transform: scale(1.02) rotate(1deg); cursor: grabbing; box-shadow: var(--shadow-xl); z-index: 1000;.
  • Señal de Objetivo de Colocación: Al pasar el ratón sobre una tarjeta sobre una zona de colocación de columna, muestra un espacio de marcador de inserción animado (height: 60px; border: 2px dashed var(--brand-primary); border-radius: 6px; background: var(--brand-subtle);).

5. Implementar Arrastrar y Soltar Accesible con Teclado y Lector de Pantalla

Los marcos de arrastrar y soltar estándar (API de arrastrar y soltar de HTML5) son con frecuencia inaccesibles para usuarios de solo teclado y lectores de pantalla. Implementa un modo de navegación de teclado alternativo explícito:

• Desencadenante de Reordenación por Teclado: Permite a los usuarios enfocar el manejador de arrastre o la tarjeta y presionar Espacio o Enter para entrar en "Modo Mover".
• Foco y Anuncio en la Selección: Cuando se activa el Modo Mover, establece aria-grabbed="true" (o aria-pressed="true" en el desencadenante de movimiento), muestra un halo visual "Agarrada" alrededor de la tarjeta y anuncia a través de una región invisible aria-live="polite": "Tarjeta PROJ-1042 agarrada. Actualmente en la columna 'En Progreso', posición 2 de 5. Usa las teclas de flecha o Alt+Flecha para mover, Espacio para soltar, Escape para cancelar."
• Moviéndose a Través y Dentro de las Columnas:
  • Teclas de Flecha Arriba / Abajo: Reordena la tarjeta dentro de la lista de la columna actual.
  • Teclas de Flecha Izquierda / Derecha: Mueve la tarjeta a la columna adyacente izquierda o derecha, añadiéndola al final de la lista de esa columna.
• Confirmación de Colocación y Cancelación:
  • Espacio / Enter: Confirma la colocación. Actualiza la posición en el DOM, libera el estado de agarre, establece el foco en la tarjeta colocada y anuncia: "Tarjeta PROJ-1042 colocada en la columna 'Revisión', posición 1 de 3."
  • Escape: Cancela el movimiento. Devuelve la tarjeta a su posición original y anuncia: "Movimiento cancelado. Tarjeta devuelta a 'En Progreso', posición 2."

6. Adaptación a la Ventana Gráfica Móvil

El desplazamiento horizontal de varias columnas en pantallas móviles pequeñas (<768px) provoca una fatiga de deslizamiento horizontal severa y una colocación incómoda de tarjetas. Implementa una estrategia de transformación responsiva:

• Pestañas de Columna Segmentadas (Patrón Móvil Recomendado): En pantallas de menos de 768px, oculta el lienzo de desplazamiento horizontal. Renderiza un control de pestañas segmentadas pegajoso en la parte superior del tablero (sistema-de-control-segmentado), mostrando títulos de columna con insignias de recuento de elementos (ej., [ Por Hacer (4) ] [ En Progreso (3) ] [ Hecho (8) ]).
• Vista Activa de Una Sola Columna: Muestra solo la lista de la columna activa en ancho completo (width: 100%).
• Modal / Hoja de Acción "Mover a" Contextual: Cuando se toca una tarjeta en móvil, proporciona un botón explícito "Mover a..." en el menú de la tarjeta. Al tocarlo, se abre una hoja inferior (implementacion-de-hoja-inferior-accesible) que enumera las columnas de destino para la reubicación con un solo toque, eliminando por completo los gestos de arrastre táctil en pantallas móviles.

---

Reglas de Decisión

Estrategia de Diseño de Columna Móvil

Ancho de Ventana Gráfica	Patrón de UI Recomendado	Mecánicas de Interacción
Escritorio (>1024px)	Lienzo de Cuadrícula Horizontal de Múltiples Columnas	Columnas visibles concurrentes, arrastrar y soltar con puntero + Modo Mover con teclado.
Tableta (768px - 1023px)	Tablero de Columna Compacta (Desplazamiento Horizontal)	Columnas más estrechas (260px), desplazamiento táctil suave con ajuste horizontal.
Móvil (<768px)	Pestañas de Columna Segmentadas + Columna Activa Única	Pestañas de estado superiores, tarjetas de ancho completo de una sola columna, hoja inferior "Mover a".

Estrategia de Ancho de Columna

• Ancho de Columna Fijo (300px): Mejor para tableros estándar con 3-6 columnas. Las columnas mantienen anchos predecibles y las columnas adicionales se desbordan limpiamente en el desbordamiento horizontal.
• Columnas Flex Fluidas (flex: 1; min-width: 280px): Mejor para tableros con exactamente 3 columnas (ej., Por Hacer, En Progreso, Hecho) en pantallas anchas, permitiendo que las columnas llenen uniformemente todo el ancho de la ventana gráfica sin espacio en blanco sobrante en el lado derecho.

Manejo de Límite WIP Excedido

• Límite WIP Suave (Solo Advertencia): Resalta el encabezado de la columna en ámbar/rojo con una insignia de superación del límite, pero permite a los usuarios mover tarjetas a la columna. Recomendado para flujos de trabajo creativos y de equipos ágiles donde ocurren cuellos de botella temporales.
• Límite WIP Duro (Bloqueo): Evita colocar tarjetas en la columna cuando se alcanza el límite, mostrando una alerta modal o en línea: "Límite WIP alcanzado (5/5). Resuelve las tareas existentes antes de añadir más." Deshabilita el movimiento del teclado hacia esa columna. Recomendado para flujos de trabajo operativos estrictamente regulados.

---

Restricciones

• Accesibilidad (WCAG 2.1 AA):
  • SC 2.1.1 Teclado: Cada función de la tarjeta (editar, reordenar, eliminar, mover) debe ser alcanzable y operable usando solo un teclado.
  • SC 2.4.7 Foco Visible: Las tarjetas enfocadas y los manejadores de arrastre deben tener un anillo de foco no recortado con una relación de contraste mínima de 3:1 contra el fondo.
  • SC 4.1.3 Mensajes de Estado: Las acciones de mover tarjetas, las advertencias de WIP y los resultados de filtro deben anunciarse a través de una región aria-live="polite".
  • SC 2.5.8 Tamaño del Objetivo: Los manejadores de arrastre, los desencadenantes de menú de tarjeta (...) y los botones de añadir rápido deben proporcionar un objetivo táctil mínimo de 24x24px (44x44px preferido en dispositivos táctiles).
• Contención de Diseño y CLS: Los contenedores de listas de columnas deben especificar overflow-y: auto con encabezados fijos para evitar el colapso del diseño o saltos a nivel de página cuando ocurren actualizaciones dinámicas de tarjetas.
• Rendimiento: Renderiza las listas de tarjetas de manera eficiente. Para tableros que contengan más de 200 tarjetas en total, implementa el desplazamiento de lista virtual (implementacion-de-lista-virtual) por columna para mantener 60fps de renderizado durante las operaciones de arrastre.

---

...

[truncated for translation]