FlowAI Dashboard – panel de gestión de equipos

Skill Dashboard FlowAI

Genera un panel de administración de equipos de una sola pantalla y múltiples pestañas, inspirado en la estética FlowAI. La salida es un archivo HTML autónomo (sin dependencias externas en tiempo de ejecución) con interacciones integradas: cambio de pestañas, un gráfico de barras animado, tooltips al pasar el ratón sobre los gráficos, paneles con zoom al hacer clic, modo oscuro y exportación CSV de la tabla de equipo visible.

Mapa de recursos

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # semilla de referencia usada como estructura inicial
├── references/
│   └── checklist.md           # puertas de calidad P0/P1/P2
└── example.html               # muestra completa construida a mano (vista previa de galería)

Flujo de trabajo

1. Lee el DESIGN.md activo (inyectado arriba). Asigna los tokens de color, tipografía, espaciado y estilo de componentes a las variables CSS que usa assets/template.html. No inventes nuevos tokens.
2. Parte de assets/template.html; nunca generes el esqueleto desde cero.
3. Mantén tres pestañas: Miembros del equipo, Detalles del equipo, Registro de actividad. Las pestañas deben cambiar realmente y solo una vista debe estar visible a la vez.
4. Genera datos de muestra plausibles y específicos (nombres, IDs, roles, departamentos, fechas, porcentajes que parezcan reales). Sin marcadores de posición "Miembro A / Métrica B".
5. Interacciones requeridas:
   • cambio de pestañas con sincronización de hash (#members | #details | #activity)
   • el gráfico de barras de roles se anima con easing al revelar por primera vez la pestaña de detalles
   • tooltips en gráficos con etiqueta y valor precisos
   • haz clic en cualquier panel/tarjeta para ampliarlo; vuelve a hacer clic o presiona Esc para restaurar
   • modo oscuro que recalcula los colores de los gráficos a partir de variables CSS
   • botón "Exportar CSV" que exporta todas las filas actualmente en la tabla de equipo, incluyendo la columna Workflow
6. Ejecuta la lista de comprobación en references/checklist.md antes de la salida final.

Contrato de salida

Emitir una oración de orientación corta, luego el artefacto:

<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>

El artefacto debe renderizarse correctamente al abrirse directamente desde el disco sin paso de compilación ni acceso a la red.