Système de Conception Interactive Infographique et Agentic Judge

Que fait Système de Conception Interactive Infographique et Agentic Judge ?

Vue d'ensemble et philosophie

Ce skill fournit un système de conception haute liberté, un catalogue de composants CSS/JS et des modèles HTML prêts à copier et personnaliser. Il ne s'agit pas d'un sérialiseur rigide Python vers HTML. Les agents d'IA et les LLM Agentic Judge créent directement du HTML personnalisé en utilisant les blocs de construction du Système de Conception Nord. Vous disposez d'une liberté créative totale pour construire des topologies SVG personnalisées, des calculateurs interactifs, des steppers de cycle de vie sur mesure, des analyses approfondies modales et des tableaux de bord d'évaluation spécifiques à un domaine. Tous les artefacts restent 100% autonomes, sans dépendances et utilisables hors ligne.

Modèles et ressources de base

• assets/template-infographic.html : Modèle complet d'infographie interactive et de récit technique avec thèmes sombre/clair, barre latérale TOC repliable, animation SVG de flux, stepper de cycle de vie interactif en 10 phases, panneaux de diagramme, tableaux de comparaison colorés, mini-cartes colorées et modales accessibles au clavier.
• assets/template-judge-report.html : Modèle de rapport d'évaluation Agentic Judge en bac à sable CSP avec résumé de décision, score global, grille KPI à 3 cartes, barres de progression par phase, tableau de comparaison des preuves, résultats multi-points sous forme de mini-cartes Nord colorées et appels diagnostiques.
• assets/nord-design-system.css : Feuille de style complète et autonome du Système de Conception Nord avec propriétés personnalisées CSS pour thèmes sombre/clair, grilles responsives, composants de diagramme, tableaux, mini-cartes et pastilles de statut.
• references/design-system.md : Spécifications détaillées des tokens, ratios de contraste et directives de conception.
• lint.py : Utilitaire de vérification qui valide les 4 invariants de conception stricts et les heuristiques de sécurité.

Structure narrative recommandée

Lors de la création d'un rapport interactif, organisez le contenu dans une hiérarchie visuelle convaincante :

1. Grille Héro KPI à 3 cartes : Présentez le sujet avec un accroche, un titre proéminent, un récit introductif, des boutons d'action primaires et une grille de 3 métriques (.metric-grid ou .card-grid).
2. Barre latérale TOC repliable à gauche : Fournissez une navigation instantanée via <nav id="tocSidebar"> contenant <div class="toc-list"> et des ancres .toc-link, soutenues par un espion de défilement IntersectionObserver et un support de tiroir mobile.
3. Flux SVG d'architecture animé : Illustrez le mouvement entre les composants avec .diagram-flow, comprenant des SVG intégrés (.flow-svg) et des indicateurs d'impulsion animés (.flow-pulse) le long de chemins horizontaux ou verticaux.
4. Stepper de cycle de vie interactif en 10 phases / Calculateur : Décomposez les processus ou algorithmes multi-étapes en étapes distinctes à l'aide de .lifecycle, .lc-steps et des boutons .lc-step, avec navigation par flèches clavier et une carte .lc-detail active.
5. Grilles de .nord-mini-card colorées : Présentez des listes multi-points, des recommandations ou des notes d'architecture sous forme de mini-cartes colorées (.nord-mini-card avec modificateurs de bordure) disposées dans .nord-card-grid ou .card-mini-stack.
6. Matrices .compare-table codées par couleur : Détaillez les compromis, les résultats de scénarios ou les benchmarks de modèles avec table.compare-table, en appliquant .row-selected, .row-evaluated ou .row-rejected pour une distinction visuelle claire.
7. Analyses approfondies modales cliquables : Offrez un contexte technique supplémentaire ou des détails de provenance via .modal-layer et .modal, en préservant le piégeage du focus et la fermeture par Échap pour l'accessibilité.

Blocs de construction et recettes de composants

1. Grille Héro KPI à 3 cartes

Utilisez .metric-grid, .interactive-grid ou .nord-card-grid avec trois colonnes égales sur ordinateur. Les cartes s'étirent pour correspondre à la hauteur de la ligne, et toute carte unique restante occupe toute la largeur :

<div class="card-grid metric-grid" aria-label="Indicateurs clés">
  <article class="hero-card">
    <span class="card-label">Latence</span>
    <strong>180ms</strong>
    <p>Temps de réponse moyen aller-retour.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">Fiabilité</span>
    <strong>99,98%</strong>
    <p>Taux de succès sur 10 000 exécutions.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">Couverture</span>
    <strong>24 / 24</strong>
    <p>Tous les scénarios de benchmark vérifiés.</p>
  </article>
</div>

2. Barre latérale TOC repliable (Zéro liste <ul>)

Dans les barres latérales de navigation, affichez les liens à l'intérieur d'un <div class="toc-list"> sans balises <ul> ou <li> :

<nav class="sidebar" id="tocSidebar" aria-label="Table des matières">
  <p class="sidebar-title">Sur cette page</p>
  <div class="toc-list">
    <a class="toc-link" href="#overview"><span>01</span> Aperçu</a>
    <a class="toc-link" href="#architecture"><span>02</span> Architecture</a>
    <a class="toc-link" href="#evaluation"><span>03</span> Évaluation</a>
  </div>
</nav>

3. Flux SVG d'architecture animé

Représentez les pipelines de données avec des chemins SVG et des impulsions animées :

<div class="diagram">
  <div class="diagram-header">
    <strong>Pipeline d'exécution</strong>
    <span class="diagram-caption">Du signal au verdict</span>
  </div>
  <div class="diagram-flow" aria-label="Étapes du 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>Ingérer</strong><small>Normaliser les entrées</small></div>
    <div class="flow-node"><strong>Analyser</strong><small>Vérifier les assertions</small></div>
    <div class="flow-node"><strong>Noter</strong><small>Produire le verdict</small></div>
  </div>
</div>

4. Mini-cartes Nord colorées (Remplacement des listes à puces)

Les listes à puces (<ul><li>...</li></ul>) sont strictement interdites dans les cartes, sections et modales. Affichez les résultats multi-points sous forme de mini-cartes Nord colorées :

<div class="card-mini-stack">
  <div class="nord-mini-card border-green">
    <p><strong>Exactitude vérifiée :</strong> Les vérifications déterministes ont réussi sur tous les cas de test.</p>
  </div>
  <div class="nord-mini-card border-blue">
    <p><strong>Efficacité contextuelle :</strong> L'utilisation des jetons est restée dans les limites optimales.</p>
  </div>
  <div class="nord-mini-card border-yellow">
    <p><strong>Variabilité de latence :</strong> Le chemin de basculement a nécessité un temps de négociation plus élevé.</p>
  </div>
  <div class="nord-mini-card border-red">
    <p><strong>Limitation connue :</strong> La récursion profonde nécessite des portes d'approbation manuelles.</p>
  </div>
</div>

Modificateurs de couleur de bordure disponibles :

• .border-green : Succès, vérifications réussies, forces confirmées (#a3be8c).
• .border-blue : Points d'information principaux, observations neutres (#88c0d0).
• .border-yellow : Avertissements, résultats partiels, avis de prudence (#ebcb8b).
• .border-purple : Notes structurelles secondaires, indices de cycle de vie (#b48ead).
• .border-orange : Anomalies modérées, précautions de performance (#d08770).
• .border-red : Échecs, défauts détectés, risques critiques (#bf616a).

5. Matrices de comparaison codées par couleur

Structurez les benchmarks comparatifs et les résultats de cas avec .compare-table :

<div class="table-wrap" role="region" aria-label="Comparaison des options" tabindex="0">
  <table class="compare-table">
    <thead>
      <tr>
        <th scope="col">Candidat</th>
        <th scope="col">Statut</th>
        <th scope="col">Évaluation</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row-selected">
        <td><span class="cell-title">Modèle A</span><span class="cell-sub">Recommandé</span></td>
        <td><span class="status-pill pill-good">Sélectionné</span></td>
        <td>Haute précision, latence la plus faible, zéro violation de politique.</td>
      </tr>
      <tr class="row-evaluated">
        <td><span class="cell-title">Modèle B</span><span class="cell-sub">Solution de repli</span></td>
        <td><span class="status-pill pill-warn">Évalué</span></td>
        <td>Précision acceptable, mais coût d'inférence plus élevé.</td>
      </tr>
      <tr class="row-rejected">
        <td><span class="cell-title">Modèle C</span><span class="cell-sub">Disqualifié</span></td>
        <td><span class="status-pill pill-bad">Rejeté</span></td>
        <td>Délai d'exécution autorisé dépassé lors des tests de charge.</td>
      </tr>
    </tbody>
  </table>
</div>

Génération de verdicts HTML Agentic Judge

Lorsqu'un LLM Agentic Judge génère un verdict d'évaluation final :

1. Basez le verdict sur assets/template-judge-report.html.
2. Conservez la balise meta de politique de sécurité de contenu stricte : <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:">.
3. N'exécutez aucun script dans le document du juge ; affichez tous les scores, barres de progression et matrices directement sous forme de HTML statique.
4. Structurez le rapport avec un Résumé de décision (.summary.panel), des Indicateurs clés (.kpi-grid), une Progression de couverture (.progress-panel), des Preuves (.compare-table), des Résultats (.nord-mini-card) et des Diagnostics (.callout).
5. Assurez-vous que les 4 invariants de conception sont respectés.

Les 4 invariants de conception stricts

Avant de livrer tout rapport HTML créé, vérifiez ces 4 invariants stricts :

1. Zéro liste <ul> à puces : Les balises <ul><li>...</li></ul> sont interdites partout dans le contenu, la navigation et les modales. Utilisez des composants .nord-mini-card colorés ou une navigation <div class="toc-list">.
2. Zéro émoji : Les émojis sont interdits dans le texte, les titres et les étiquettes. Utilisez des icônes SVG monochromes propres (telles que des symboles SVG intégrés) ou des étiquettes textuelles concises.
3. Zéro dessin ASCII dans .code-block : Les caractères de dessin ASCII (┌─┐, │, └─┘) sont interdits dans les panneaux de code. Utilisez plutôt .diagram-flow, .diagram-panels ou des SVG intégrés.
4. Classes CSS .compare-table et .nord-mini-card valides : Assurez-vous que le document inclut ou lie la feuille de style du Système de Conception Nord avec des règles valides pour les tableaux de comparaison et les mini-cartes.

Vérification avec lint.py

Exécutez le linter autonome inclus depuis Python :

python3 lint.py <chemin-vers-rapport.html>

Le linter se termine avec le code 0 si tous les invariants et vérifications de sécurité sont respectés, ou se termine avec le code 1 et affiche des résultats spécifiques à la ligne sur stderr. Vous pouvez également exécuter des tests unitaires automatisés dans l'ensemble du dépôt :

python3 -m unittest discover -s tests -v