Modelo Rastreador de Matriz de Mídias Sociais

Entregue um modelo de análise de mídia social premium e cinematográfico com alta densidade de dados e microinterações de nível de produção.

Mapa de Recursos

social-media-matrix-tracker-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Fluxo de Trabalho

1. Leia o DESIGN.md ativo primeiro, mapeie os tokens para variáveis CSS e, em seguida, adapte o assets/template.html.
2. Mantenha a arquitetura de informação estrutural intacta: herói + matriz de plataforma + faixa de KPIs + seções profundas com múltiplos gráficos.
3. Preserve a fidelidade da interação:
   • alternância de tema escuro/claro
   • dica de ferramenta ao passar o mouse sobre gráficos (ajusta automaticamente dentro da área de visualização)
   • clique para fixar ponto do gráfico
   • análise de intervalo de arrastar
   • Shift+arrastar para comparar múltiplos intervalos
   • atualizações ao vivo do painel de insights em cada gráfico (linha / empilhado / rosca / geográfico)
   • suporte a toque + teclas de seta do teclado para gráficos de linha (acessibilidade)
4. Garanta que o modelo permaneça autônomo (HTML único com CSS/JS inline, sem dependência de framework).
5. Mantenha os dados de exemplo padrão realistas e internamente consistentes entre cartões/gráficos.
6. Valide com references/checklist.md antes de emitir o artefato.

Adaptando os dados de exemplo com segurança

O assets/template.html vem com arrays de exemplo ajustados manualmente. Ao trocar por dados reais, siga este contrato para que os gráficos e insights permaneçam coerentes:

• Substitua arrays inteiros de uma vez, não índices individuais — gráficos de linha assumem que values[] e xLabels[] têm o mesmo comprimento e estão alinhados por índice.
• Combine a unidade + decimais existentes: hourChart (engajamentos / decimals: 0), slaChart (minutos / decimals: 0), roiChart (multiplicador x / decimals: 1), cohortChart (% / decimals: 0). Unidades incompatíveis quebram a dica de ferramenta + cópia de insight A/B.
• Mantenha todas as quatro séries de linha com o mesmo comprimento (padrão de 7 pontos). Comprimentos diferentes vazam para a comparação A/B, que espera índices compartilhados.
• Para mixChart, cada bars[i].stack deve permanecer um array de 3 elementos ([Video, Thread, Carousel]). Para sentimentChart, as porcentagens de arcs[] devem somar 100.
• Atualize as métricas da faixa de KPI + cartão de plataforma em sincronia — o insight "Visão geral em tempo real" do artefato deriva dos mesmos números.
• Conjuntos de dados de ponto único são protegidos (desenhados como um ponto rotulado), mas degradam a experiência do usuário; prefira ≥ 3 pontos por gráfico ao adaptar.

Contrato de Saída

Emita uma frase curta antes do artefato (por exemplo, "Rastreador de matriz de mídia social cinematográfico — tema escuro por padrão, todas as interações ao vivo.") e, em seguida, um único artefato HTML autônomo.

• O artefato deve usar o wrapper <artifact> exatamente como mostrado abaixo — o parser do daemon identifica o elemento wrapper.
• identifier="social-media-matrix-tracker" é o ID canônico (não adicione sufixo com o nome do projeto).
• type="text/html" e title são obrigatórios.
• Apenas CSS + JS inline. Sem framework externo / CDN. Sem importações de fontes externas além do que template.html já declara.
• O documento final é o template.html adaptado (com os tokens de DESIGN.md aplicados), não uma cópia literal e não um index.html separado. Não emita ambos.

<artifact identifier="social-media-matrix-tracker" type="text/html" title="Social Media Matrix Tracker">
<!doctype html>
<html>...</html>
</artifact>