Skill de Painel FlowAI
Produza um painel de gerenciamento de equipe em tela única, com várias abas, inspirado na estética FlowAI. A saída é um arquivo HTML autossuficiente (sem dependências externas de runtime) com interações integradas: alternância de abas, um gráfico de barras animado, dicas de ferramentas ao passar o mouse nos gráficos, painéis com zoom ao clicar, 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 # seed de referência usado como estrutura inicial
├── references/
│ └── checklist.md # portões de qualidade P0/P1/P2
└── example.html # amostra completa construída manualmente (visualização da galeria)
Fluxo de trabalho
- 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. - Comece a partir de
assets/template.html; nunca gere o shell do zero. - Mantenha três abas:
Membros da Equipe,Detalhes da Equipe,Registro de Atividades. As abas devem realmente alternar e apenas uma visualização deve estar visível por vez. - Gere dados de amostra plausíveis e específicos (nomes, IDs, funções, departamentos, datas, porcentagens com aparência real). Sem placeholders do tipo
Membro A / Métrica B. - Interações necessárias:
- alternância de abas com sincronização de hash (
#members | #details | #activity) - gráfico de barras de funções anima com easing na primeira exibição da aba de detalhes
- dicas de ferramentas nos gráficos com rótulo + valor precisos
- clique em qualquer painel/cartão para ampliar; clique novamente ou pressione Esc para restaurar
- alternância de modo escuro que redefine as cores dos gráficos a partir das variáveis CSS
- botão "Exportar CSV" que exporta cada linha atualmente na tabela de equipe, incluindo a coluna
Workflow
- alternância de abas com sincronização de hash (
- Execute a
references/checklist.mdantes da saída final.
Contrato de saída
Emita uma frase curta de orientação e, em seguida, o artefato:
<artifact identifier="flowai-team-dashboard" type="text/html" title="Painel da Equipe FlowAI">
<!doctype html>
<html>...</html>
</artifact>
O artefato deve renderizar corretamente quando aberto diretamente do disco, sem etapa de build e sem acesso à rede.