iuriimedvedev-dev/interactive-infographic-report

Sistema de Design de Infográfico Interativo & Agentic Judge

Visão Geral e Filosofia

Este skill fornece um Sistema de Design de alta liberdade, catálogo de componentes CSS/JS e modelos HTML copiáveis e personalizáveis. Não é um serializador rígido de dados para HTML em Python. Agentes de IA e LLMs Agentic Judge criam HTML personalizado diretamente usando os blocos de construção do Sistema de Design Nord. Você tem total liberdade criativa para construir topologias SVG personalizadas, calculadoras interativas, steppers de ciclo de vida personalizados, modais interativos e dashboards de avaliação específicos para domínio. Todos os artefatos permanecem 100% autocontidos, sem dependências e utilizáveis offline.

Modelos e Recursos Principais

• assets/template-infographic.html: Modelo completo de infográfico interativo e narrativa técnica com temas claro/escuro, barra lateral TOC recolhível, fluxo de dados SVG animado, stepper de ciclo de vida interativo de 10 fases, painéis de diagrama, tabelas de comparação codificadas por cores, mini-cartões coloridos e modais acessíveis por teclado.
• assets/template-judge-report.html: Modelo de relatório de avaliação Agentic Judge isolado por CSP com resumo da decisão, pontuação geral, grade de 3 KPIs, barras de progresso por fase, tabela de comparação de evidências, descobertas multiponto como mini-cartões Nord coloridos e observações diagnósticas.
• assets/nord-design-system.css: Folha de estilo completa e autônoma do Sistema de Design Nord com propriedades personalizadas CSS para claro/escuro, grids responsivos, componentes de diagrama, tabelas, mini-cartões e indicadores de status.
• references/design-system.md: Especificações detalhadas de tokens, taxas de contraste e diretrizes de design.
• lint.py: Utilitário de verificação que valida os 4 invariantes de design rígidos e heurísticas de segurança.

Estrutura de Narrativa Recomendada

Ao criar um relatório interativo, organize o conteúdo em uma hierarquia visual convincente:

1. Grade Hero de 3 Cartões KPI: Apresente o assunto com um subtítulo de destaque, um título proeminente, narrativa introdutória, botões de ação primários e uma grade de 3 cartões de métricas (.metric-grid ou .card-grid).
2. Barra Lateral TOC Recolhível à Esquerda: Forneça navegação instantânea através de <nav id="tocSidebar"> contendo <div class="toc-list"> e âncoras .toc-link, suportada por um IntersectionObserver para rolagem-espia e suporte a gaveta móvel.
3. Fluxo de Arquitetura SVG Animado: Ilustre o movimento entre componentes com .diagram-flow, apresentando SVGs incorporados (.flow-svg) e indicadores de pulso animados (.flow-pulse) ao longo de caminhos horizontais ou verticais.
4. Stepper de Ciclo de Vida Interativo de 10 Fases / Calculadora: Divida processos de múltiplos estágios ou algoritmos em etapas discretas usando .lifecycle, .lc-steps e botões .lc-step, com navegação por setas do teclado e um cartão .lc-detail ativo.
5. Grades de .nord-mini-card Coloridos: Apresente listas de múltiplos pontos, recomendações ou notas de arquitetura como mini-cartões coloridos (.nord-mini-card com modificadores de borda) organizados em .nord-card-grid ou .card-mini-stack.
6. Matrizes .compare-table Codificadas por Cores: Detalhe trade-offs, resultados de cenários ou benchmarks de modelos com table.compare-table, aplicando .row-selected, .row-evaluated ou .row-rejected para distinção visual clara.
7. Modais Interativos de Mergulho Profundo: Ofereça contexto técnico suplementar ou detalhes de proveniência através de .modal-layer e .modal, preservando o aprisionamento de foco e acessibilidade para fechar com Escape.

Blocos de Construção e Receitas de Componentes

1. Grade Hero de 3 Cartões KPI

Use .metric-grid, .interactive-grid ou .nord-card-grid com três colunas iguais no desktop. Os cartões esticam para igualar a altura da linha, e qualquer cartão solitário restante ocupa a largura total:

<div class="card-grid metric-grid" aria-label="Indicadores-chave">
  <article class="hero-card">
    <span class="card-label">Latência</span>
    <strong>180ms</strong>
    <p>Tempo médio de resposta de ida e volta.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">Confiabilidade</span>
    <strong>99,98%</strong>
    <p>Taxa de sucesso em 10.000 execuções.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">Cobertura</span>
    <strong>24 / 24</strong>
    <p>Todos os cenários de benchmark verificados.</p>
  </article>
</div>

2. Barra Lateral TOC Recolhível (Zero Listas <ul>)

Em barras laterais de navegação, renderize links dentro de <div class="toc-list"> sem tags <ul> ou <li>:

<nav class="sidebar" id="tocSidebar" aria-label="Índice">
  <p class="sidebar-title">Nesta página</p>
  <div class="toc-list">
    <a class="toc-link" href="#overview"><span>01</span> Visão Geral</a>
    <a class="toc-link" href="#architecture"><span>02</span> Arquitetura</a>
    <a class="toc-link" href="#evaluation"><span>03</span> Avaliação</a>
  </div>
</nav>

3. Fluxo de Arquitetura SVG Animado

Represente pipelines de dados com caminhos SVG e pulsos animados:

<div class="diagram">
  <div class="diagram-header">
    <strong>Pipeline de Execução</strong>
    <span class="diagram-caption">Sinal para veredito</span>
  </div>
  <div class="diagram-flow" aria-label="Estágios do pipeline">
    <svg class="flow-svg flow-horizontal" viewBox="0 0 600 54" preserveAspectRatio="none" aria-hidden="true">
      <path class="flow-line" d="M 0 27 H 600"/>
      <circle class="flow-pulse" cx="0" cy="27" r="5"/>
    </svg>
    <div class="flow-node"><strong>Ingerir</strong><small>Normalizar entradas</small></div>
    <div class="flow-node"><strong>Analisar</strong><small>Verificar asserções</small></div>
    <div class="flow-node"><strong>Pontuar</strong><small>Produzir veredito</small></div>
  </div>
</div>

4. Mini-Cartões Nord Coloridos (Substituição de Lista de Marcadores)

Listas de marcadores (<ul><li>...</li></ul>) são estritamente proibidas em cartões, seções e modais. Renderize descobertas de múltiplos pontos como mini-cartões Nord coloridos:

<div class="card-mini-stack">
  <div class="nord-mini-card border-green">
    <p><strong>Correção Verificada:</strong> Verificações determinísticas passaram em todos os casos de teste.</p>
  </div>
  <div class="nord-mini-card border-blue">
    <p><strong>Eficiência de Contexto:</strong> A utilização de tokens permaneceu dentro dos limites ideais.</p>
  </div>
  <div class="nord-mini-card border-yellow">
    <p><strong>Variância de Latência:</strong> O caminho de failover exigiu maior tempo de negociação.</p>
  </div>
  <div class="nord-mini-card border-red">
    <p><strong>Limitação Conhecida:</strong> Recursão profunda requer portões de aprovação manual.</p>
  </div>
</div>

Modificadores de cor de borda disponíveis:

• .border-green: Sucesso, verificações passadas, pontos fortes confirmados (#a3be8c).
• .border-blue: Pontos informacionais primários, observações neutras (#88c0d0).
• .border-yellow: Avisos, resultados parciais, notificações de cautela (#ebcb8b).
• .border-purple: Notas estruturais secundárias, dicas de ciclo de vida (#b48ead).
• .border-orange: Anomalias moderadas, cuidados de desempenho (#d08770).
• .border-red: Falhas, defeitos detectados, riscos críticos (#bf616a).

5. Matrizes de Comparação Codificadas por Cores

Estruture benchmarks comparativos e resultados de casos com .compare-table:

<div class="table-wrap" role="region" aria-label="Comparação de opções" tabindex="0">
  <table class="compare-table">
    <thead>
      <tr>
        <th scope="col">Candidato</th>
        <th scope="col">Status</th>
        <th scope="col">Avaliação</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row-selected">
        <td><span class="cell-title">Modelo A</span><span class="cell-sub">Recomendado</span></td>
        <td><span class="status-pill pill-good">Selecionado</span></td>
        <td>Alta precisão, menor latência, zero violações de política.</td>
      </tr>
      <tr class="row-evaluated">
        <td><span class="cell-title">Modelo B</span><span class="cell-sub">Alternativa</span></td>
        <td><span class="status-pill pill-warn">Avaliado</span></td>
        <td>Precisão aceitável, mas custo de inferência maior.</td>
      </tr>
      <tr class="row-rejected">
        <td><span class="cell-title">Modelo C</span><span class="cell-sub">Desclassificado</span></td>
        <td><span class="status-pill pill-bad">Rejeitado</span></td>
        <td>Excedeu o tempo limite de execução permitido durante testes de estresse.</td>
      </tr>
    </tbody>
  </table>
</div>

Emissão de Vereditos HTML Agentic Judge

Quando um LLM Agentic Judge gera um veredito de avaliação final:

1. Baseie o veredito em assets/template-judge-report.html.
2. Mantenha a meta tag estrita de Política de Segurança de Conteúdo: <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:">.
3. Não execute scripts dentro do documento do juiz; renderize todas as pontuações, barras de progresso e matrizes diretamente como HTML estático.
4. Estruture o relatório com Resumo da Decisão (.summary.panel), Indicadores-Chave (.kpi-grid), Progresso de Cobertura (.progress-panel), Evidências (.compare-table), Descobertas (.nord-mini-card) e Diagnósticos (.callout).
5. Garanta que todos os 4 invariantes de design sejam respeitados.

Os 4 Invariantes de Design Rígidos

Antes de entregar qualquer relatório HTML criado, verifique estes 4 invariantes rígidos:

1. Zero listas <ul>: Tags <ul><li>...</li></ul> são proibidas em todo conteúdo, navegação e modais. Use componentes .nord-mini-card coloridos ou navegação <div class="toc-list">.
2. Zero emojis: Emojis são proibidos em texto, títulos e rótulos. Use ícones SVG monocromáticos limpos (como símbolos SVG incorporados) ou rótulos de texto concisos.
3. Zero desenho de caixa ASCII em .code-block: Caracteres de desenho de caixa (┌─┐, │, └─┘) são proibidos em painéis de código. Use .diagram-flow, .diagram-panels gráficos ou SVGs incorporados.
4. Classes CSS .compare-table e .nord-mini-card válidas: Garanta que o documento inclua ou vincule a folha de estilo do Sistema de Design Nord com regras válidas para tabelas de comparação e mini-cartões.

Verificação com lint.py

Execute o linter autônomo incluído a partir do Python:

python3 lint.py <caminho-para-relatorio.html>

O linter sai com código 0 se todos os invariantes e verificações de segurança passarem, ou sai com código 1 e imprime descobertas específicas por linha no stderr. Você também pode executar testes unitários automatizados em todo o repositório:

python3 -m unittest discover -s tests -v