iuriimedvedev-dev/interactive-infographic-report

Sistema de Diseño Interactive Infographic & Agentic Judge

Visión General y Filosofía

Este skill proporciona un sistema de diseño de alta libertad, un catálogo de componentes CSS/JS y plantillas HTML listas para copiar y personalizar. No es un serializador rígido de datos a HTML. Los agentes de IA y los LLMs de Agentic Judge crean HTML directamente utilizando los bloques de construcción del Nord Design System. Tienes plena libertad creativa para construir topologías SVG personalizadas, calculadoras interactivas, steppers de ciclo de vida a medida, modales de inmersión profunda y paneles de evaluación específicos del dominio. Todos los artefactos permanecen 100% autónomos, sin dependencias y utilizables sin conexión.

Plantillas y Recursos Principales

• assets/template-infographic.html: Plantilla completa de infografía interactiva y narrativa técnica con temas claro/oscuro, barra lateral TOC plegable, flujo de datos SVG animado, stepper de ciclo de vida interactivo de 10 fases, paneles de diagrama, tablas de comparación codificadas por color, mini-tarjetas de colores y modales accesibles por teclado.
• assets/template-judge-report.html: Plantilla de informe de evaluación Agentic Judge con CSP-sandbox, que incluye resumen de decisión, puntuación general, grid de 3 KPIs, barras de progreso por fase, tabla de comparación de evidencia, hallazgos de múltiples puntos como mini-tarjetas Nord de colores y llamadas de diagnóstico.
• assets/nord-design-system.css: Hoja de estilo completa y autónoma del sistema de diseño Nord con propiedades personalizadas CSS para claro/oscuro, cuadrículas responsivas, componentes de diagrama, tablas, mini-tarjetas y píldoras de estado.
• references/design-system.md: Especificaciones detalladas de tokens, relaciones de contraste y pautas de diseño.
• lint.py: Utilidad de verificación que valida los 4 invariantes de diseño duros y las heurísticas de seguridad.

Estructura Narrativa Recomendada

Al crear un informe interactivo, organiza el contenido en una jerarquía visual convincente:

1. Grid de 3 KPIs Tipo Héroe: Presenta el tema con un subtítulo introductorio, un encabezado prominente, una narrativa introductoria, botones de acción principal y un grid de 3 métricas (.metric-grid o .card-grid).
2. Barra Lateral TOC Plegable: Proporciona navegación instantánea a través de <nav id="tocSidebar"> que contiene <div class="toc-list"> y anclas .toc-link, respaldado por un IntersectionObserver para scroll-spy y soporte para cajón móvil.
3. Flujo de Arquitectura SVG Animado: Ilustra el movimiento entre componentes con .diagram-flow, que incluye SVG incrustados (.flow-svg) e indicadores de pulso animados (.flow-pulse) a lo largo de rutas horizontales o verticales.
4. Stepper / Calculadora de Ciclo de Vida Interactivo de 10 Fases: Divide procesos o algoritmos de múltiples etapas en pasos discretos usando .lifecycle, .lc-steps y botones .lc-step, con navegación por teclado (flechas) y una tarjeta activa .lc-detail.
5. Grids de .nord-mini-card de Colores: Presenta listas de múltiples puntos, recomendaciones o notas de arquitectura como mini-tarjetas de colores (.nord-mini-card con modificadores de borde) organizadas en .nord-card-grid o .card-mini-stack.
6. Matrices .compare-table Codificadas por Color: Detalla compensaciones, resultados de escenarios o benchmarks de modelos con table.compare-table, aplicando .row-selected, .row-evaluated o .row-rejected para una distinción visual clara.
7. Modales de Inmersión Profunda: Ofrece contexto técnico complementario o detalles de procedencia a través de .modal-layer y .modal, preservando el enfoque atrapado y el cierre con Escape para accesibilidad.

Bloques de Construcción y Recetas de Componentes

1. Grid de 3 KPIs Tipo Héroe

Usa .metric-grid, .interactive-grid o .nord-card-grid con tres columnas iguales en escritorio. Las tarjetas se estiran para igualar la altura de la fila, y cualquier tarjeta sobrante ocupa el ancho completo:

<div class="card-grid metric-grid" aria-label="Indicadores clave">
  <article class="hero-card">
    <span class="card-label">Latencia</span>
    <strong>180ms</strong>
    <p>Tiempo de respuesta promedio de ida y vuelta.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">Fiabilidad</span>
    <strong>99.98%</strong>
    <p>Tasa de éxito en 10,000 ejecuciones.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">Cobertura</span>
    <strong>24 / 24</strong>
    <p>Todos los escenarios de benchmark verificados.</p>
  </article>
</div>

2. Barra Lateral TOC Plegable (Sin Listas <ul>)

En las barras laterales de navegación, renderiza los enlaces dentro de <div class="toc-list"> sin etiquetas <ul> o <li>:

<nav class="sidebar" id="tocSidebar" aria-label="Tabla de contenidos">
  <p class="sidebar-title">En esta página</p>
  <div class="toc-list">
    <a class="toc-link" href="#overview"><span>01</span> Resumen</a>
    <a class="toc-link" href="#architecture"><span>02</span> Arquitectura</a>
    <a class="toc-link" href="#evaluation"><span>03</span> Evaluación</a>
  </div>
</nav>

3. Flujo de Arquitectura SVG Animado

Representa pipelines de datos con rutas SVG y pulsos animados:

<div class="diagram">
  <div class="diagram-header">
    <strong>Pipeline de Ejecución</strong>
    <span class="diagram-caption">Señal a veredicto</span>
  </div>
  <div class="diagram-flow" aria-label="Etapas del 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>Ingesta</strong><small>Normalizar entradas</small></div>
    <div class="flow-node"><strong>Analizar</strong><small>Verificar aserciones</small></div>
    <div class="flow-node"><strong>Puntuar</strong><small>Emitir veredicto</small></div>
  </div>
</div>

4. Mini-Tarjetas Nord de Colores (Reemplazo de Listas con Viñetas)

Las listas con viñetas (<ul><li>...</li></ul>) están estrictamente prohibidas en tarjetas, secciones y modales. Renderiza los hallazgos de múltiples puntos como mini-tarjetas Nord de colores:

<div class="card-mini-stack">
  <div class="nord-mini-card border-green">
    <p><strong>Corrección Verificada:</strong> Las comprobaciones deterministas pasaron en todos los casos de prueba.</p>
  </div>
  <div class="nord-mini-card border-blue">
    <p><strong>Eficiencia de Contexto:</strong> La utilización de tokens se mantuvo dentro de los límites óptimos.</p>
  </div>
  <div class="nord-mini-card border-yellow">
    <p><strong>Variabilidad de Latencia:</strong> La ruta de conmutación por error requirió un mayor tiempo de negociación.</p>
  </div>
  <div class="nord-mini-card border-red">
    <p><strong>Limitación Conocida:</strong> La recursión profunda requiere compuertas de aprobación manual.</p>
  </div>
</div>

Modificadores de color de borde disponibles:

• .border-green: Éxito, comprobaciones pasadas, fortalezas confirmadas (#a3be8c).
• .border-blue: Puntos informativos principales, observaciones neutrales (#88c0d0).
• .border-yellow: Advertencias, resultados parciales, avisos de precaución (#ebcb8b).
• .border-purple: Notas estructurales secundarias, pistas del ciclo de vida (#b48ead).
• .border-orange: Anomalías moderadas, precauciones de rendimiento (#d08770).
• .border-red: Fallos, defectos detectados, riesgos críticos (#bf616a).

5. Matrices de Comparación Codificadas por Color

Estructura benchmarks comparativos y resultados de casos con .compare-table:

<div class="table-wrap" role="region" aria-label="Comparación de opciones" tabindex="0">
  <table class="compare-table">
    <thead>
      <tr>
        <th scope="col">Candidato</th>
        <th scope="col">Estado</th>
        <th scope="col">Evaluación</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">Seleccionado</span></td>
        <td>Alta precisión, menor latencia, cero violaciones de políticas.</td>
      </tr>
      <tr class="row-evaluated">
        <td><span class="cell-title">Modelo B</span><span class="cell-sub">Respaldo</span></td>
        <td><span class="status-pill pill-warn">Evaluado</span></td>
        <td>Precisión aceptable, pero mayor costo de inferencia.</td>
      </tr>
      <tr class="row-rejected">
        <td><span class="cell-title">Modelo C</span><span class="cell-sub">Descalificado</span></td>
        <td><span class="status-pill pill-bad">Rechazado</span></td>
        <td>Excedió el tiempo de espera de ejecución permitido durante las pruebas de estrés.</td>
      </tr>
    </tbody>
  </table>
</div>

Emisión de Veredictos HTML de Agentic Judge

Cuando un LLM de Agentic Judge genera un veredicto de evaluación final:

1. Basa el veredicto en assets/template-judge-report.html.
2. Mantén la etiqueta meta estricta de Política de Seguridad de Contenido: <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:">.
3. No ejecutes ningún script dentro del documento del juez; renderiza todas las puntuaciones, barras de progreso y matrices directamente como HTML estático.
4. Estructura el informe con Resumen de Decisión (.summary.panel), Indicadores Clave (.kpi-grid), Progreso de Cobertura (.progress-panel), Evidencia (.compare-table), Hallazgos (.nord-mini-card) y Diagnósticos (.callout).
5. Asegúrate de que se respeten los 4 invariantes de diseño.

Los 4 Invariantes de Diseño Duros

Antes de entregar cualquier informe HTML creado, verifica estos 4 invariantes duros:

1. Cero listas <ul>: Las etiquetas <ul><li>...</li></ul> están prohibidas en todo el contenido, navegación y modales. Usa componentes .nord-mini-card de colores o navegación <div class="toc-list">.
2. Cero emojis: Los emojis están prohibidos en texto, encabezados y etiquetas. Usa iconos SVG monocromáticos limpios (como símbolos SVG incrustados) o etiquetas de texto concisas.
3. Cero dibujos ASCII en .code-block: Los caracteres de dibujo de cajas (┌─┐, │, └─┘) están prohibidos en paneles de código. Usa .diagram-flow, .diagram-panels o SVG incrustados.
4. Clases CSS .compare-table y .nord-mini-card válidas: Asegúrate de que el documento incluya o enlace la hoja de estilo del Nord Design System con reglas válidas para tablas de comparación y mini-tarjetas.

Verificación con lint.py

Ejecuta el linter independiente incluido desde Python:

python3 lint.py <ruta-al-reporte.html>

El linter sale con código 0 si todas las invariantes y comprobaciones de seguridad pasan, o sale con código 1 e imprime hallazgos específicos a nivel de línea en stderr. También puedes ejecutar pruebas unitarias automatizadas en todo el repositorio:

python3 -m unittest discover -s tests -v