Dashboard de Habilidades FlowAI

Produza um dashboard de gerenciamento de equipe em tela única e com várias abas, inspirado na estética do FlowAI. A saída é um arquivo HTML autônomo (sem dependências de tempo de execução externas) com interações integradas: troca de abas, um gráfico de barras animado, dicas de ferramentas ao passar o mouse sobre os gráficos, painéis com clique para zoom, alternância de modo escuro e exportação CSV da tabela de equipe visível.

Mapa de Recursos

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # reference seed used as the starting structure
├── references/
│   └── checklist.md           # P0/P1/P2 quality gates
└── example.html               # complete hand-built sample (gallery preview)

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Mapeie tokens de cor, tipografia, espaçamento e estilo de componentes para as variáveis CSS usadas por assets/template.html. Não invente novos tokens.
2. Comece a partir de assets/template.html; nunca gere a estrutura em branco.
3. Mantenha três abas: Team Members, Team Details, Activity Log. As abas devem realmente alternar e apenas uma visualização deve estar visível por vez.
4. Gere dados de amostra plausíveis e específicos (nomes, IDs, cargos, departamentos, datas, porcentagens com aparência real). Sem placeholders Member A / Metric B.
5. Interações necessárias:
   • troca de abas com sincronização de hash (#members | #details | #activity)
   • gráfico de barras de cargo anima com suavização na primeira exibição da aba de detalhes
   • dicas de ferramentas ao passar o mouse sobre o gráfico com rótulo + valor precisos
   • clique em qualquer painel/cartão para dar zoom; clique novamente ou pressione Esc para restaurar
   • alternância de modo escuro que rederiva as cores do gráfico a partir das variáveis CSS
   • botão "Exportar CSV" que exporta todas as linhas atualmente na tabela de equipe, incluindo a coluna Workflow
6. Execute através de references/checklist.md antes da saída final.

Contrato de Saída

Emita uma frase curta de orientação, em seguida, o artefato:

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

O artefato deve renderizar corretamente ao ser aberto diretamente do disco, sem etapa de compilação e sem acesso à rede.