namgung9406/visualize

Que fait visualize ?

Transformez n'importe quelle idée, donnée ou contenu en une superbe visualisation HTML en un seul fichier.

Après la création d'un fichier

Effectuez TOUJOURS ces deux actions après avoir écrit le fichier HTML :

1. Ouverture automatique dans le navigateur : Utilisez l'outil d'ouverture de navigateur de l'IDE lorsqu'il est disponible. Sinon, exécutez Invoke-Item <filename>.html sous Windows, open <filename>.html sous macOS, ou xdg-open <filename>.html sous Linux.
2. Retourner un lien de fichier cliquable : Dans les réponses VS Code, utilisez un lien Markdown vers le fichier généré dans l'espace de travail. Utilisez une URL file:// uniquement lorsque la sortie se trouve en dehors de l'espace de travail et que le client la prend en charge.

Exemple de réponse après la création :

Visualisation créée ! Ouverture dans le navigateur...
[my-dashboard.html](my-dashboard.html)

Exigences critiques (NON NÉGOCIABLES)

⚠️ ÉCHEC DE L'ÉVALUATION GARANTI SANS CES 8 ÉLÉMENTS ⚠️

Chaque fichier DOIT commencer par le modèle squelette dans references/skeleton.md — copiez l'INTÉGRALITÉ du modèle, puis ajoutez votre contenu.

1. Propriétés personnalisées CSS : Noms exacts requis : --bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning — AUCUN autre nom (pas --bg-primary, pas --text-primary). CRITIQUE : Ces noms de propriétés exacts sont requis pour la compatibilité du système d'évaluation.
2. Système de menu utilitaire (OBLIGATOIRE) : Élément .viz-menu complet avec le bouton .viz-menu-toggle, le conteneur .viz-menu-dropdown, le bouton de téléchargement PNG (onclick="downloadImage()"), le bouton d'impression (onclick="window.print()"), et le script CDN html-to-image (<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.js"></script>). CRITIQUE POUR L'ÉVALUATION : Le système de menu est vérifié automatiquement et PROVOQUERA DES ÉCHECS s'il est manquant.
3. Classes de thème (CRITIQUE POUR L'ÉVALUATION) : Doivent explicitement définir les classes .theme-light ET .theme-dark dans la feuille de style avec des définitions de propriétés personnalisées complètes. EXEMPLE REQUIS :

:root { /* propriétés de base */ }
.theme-light { --bg: #ffffff; --surface: #f8f9fa; --text: #1a1a1a; /* etc */ }
.theme-dark { --bg: #0a0a0a; --surface: #1a1a1a; --text: #ffffff; /* etc */ }

NE JAMAIS se fier uniquement à :root ou @media (prefers-color-scheme) — le système d'évaluation vérifie les thèmes basés sur les classes. 4. HTML sémantique : Élément <main id="main-content">, OBLIGATOIRE : Plusieurs éléments <section> pour les blocs de contenu principaux (en-tête, métriques, graphiques, etc.), lien d'accès direct au contenu. Chaque zone de contenu distincte doit être entourée de balises <section> sémantiques. 5. Exigences Chart.js (CRITIQUE POUR L'ÉVALUATION) : DOIT inclure <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> avant la fermeture de </head>. OBLIGATOIRE : IMMÉDIATEMENT après le script Chart.js, ajoutez <script>Chart.defaults.animation = false;</script> (empêche les problèmes d'animation et est vérifié automatiquement par le système d'évaluation). VALIDATION OBLIGATOIRE DES GRAPHIQUES : Chaque fonction de graphique DOIT commencer par if (typeof Chart === 'undefined') { console.error('Chart.js not loaded'); return; }. ACCESSIBILITÉ DES GRAPHIQUES : Chaque élément canvas DOIT avoir les attributs role="img" et aria-label descriptifs. CONFIGURATION CRITIQUE DES GRAPHIQUES : Définissez maintainAspectRatio: false, responsive: true, et plugins: { tooltip: { enabled: true } } pour l'accessibilité. NE JAMAIS désactiver les infobulles - le système d'évaluation vérifie que les infobulles sont activées. SYSTÈME DE FIABILITÉ DES GRAPHIQUES : Utilisez le modèle ChartManager dédié pour une intégration fiable :

var ChartManager = {
  charts: new Map(),
  safeInit: function(canvasId, config) {
    if (typeof Chart === 'undefined') {
      console.error('Chart.js library not loaded - check CDN inclusion');
      return null;
    }
    try {
      if (this.charts.has(canvasId)) {
        this.charts.get(canvasId).destroy();
        this.charts.delete(canvasId);
      }
      var ctx = document.getElementById(canvasId);
      if (!ctx) {
        console.error('Canvas element not found: ' + canvasId);
        return null;
      }
      // Ensure no conflicting chart instances
      if (ctx.chart) {
        ctx.chart.destroy();
        delete ctx.chart;
      }
      // Set accessibility attributes
      ctx.setAttribute('role', 'img');
      if (!ctx.getAttribute('aria-label')) {
        ctx.setAttribute('aria-label', 'Chart visualization');
      }
      // Initialize with enhanced error handling
      var chart = new Chart(ctx, config);
      this.charts.set(canvasId, chart);
      return chart;
    } catch (error) {
      console.error('Chart initialization failed for ' + canvasId + ':', error);
      return null;
    }
  },
  updateTheme: function() {
    if (typeof Chart === 'undefined') return;
    this.charts.forEach(function(chart, canvasId) {
      try {
        chart.update();
      } catch (error) {
        console.error('Chart theme update failed for ' + canvasId + ':', error);
      }
    });
  },
  destroyAll: function() {
    this.charts.forEach(function(chart) {
      try {
        chart.destroy();
      } catch (error) {
        console.error('Chart destruction failed:', error);
      }
    });
    this.charts.clear();
  }
};

Utilisez ChartManager.safeInit() au lieu de new Chart() brut. CONFIGURATION CRITIQUE DES GRAPHIQUES : Définissez maintainAspectRatio: false, responsive: true, et plugins: { tooltip: { enabled: true } } pour l'accessibilité. DIMENSIONS DU CONTENEUR DE GRAPHIQUES : Le conteneur doit avoir une height explicite >= 300px pour que les graphiques s'affichent correctement. Utilisez des couleurs adaptées au thème avec les propriétés personnalisées CSS, jamais de couleurs hexadécimales statiques. NE JAMAIS utiliser la syntaxe import/export avec le CDN Chart.js — utilisez uniquement des déclarations var standard.

DÉPANNAGE CHART.JS (CRITIQUE) : Si les graphiques apparaissent comme des espaces blancs vides :

• Vérifiez que le CDN Chart.js est inclus avant </head>
• Vérifiez que Chart.defaults.animation = false; se trouve immédiatement après le CDN
• Vérifiez que l'initialisation du graphique se trouve dans l'écouteur d'événement DOMContentLoaded
• Vérifiez qu'il n'y a pas de syntaxe d'import/export de module dans le fichier
• Vérifiez que le modèle ChartManager.safeInit() est utilisé correctement
• Vérifiez que le canvas a les attributs role="img" et aria-label

6. Conception réactive : Espacement des sections ≥48px, CRITIQUE : AUCUN débordement horizontal à 375px de largeur de fenêtre (OBLIGATOIRE : ajoutez @media (max-width: 375px) { body { overflow-x: hidden; } } pour éviter le défilement horizontal), HIÉRARCHIE DE TAILLE DE POLICE OBLIGATOIRE : h1 ≥ 2.5rem, h2 ≥ 2rem, h3 ≥ 1.5rem, corps = 1rem. EXIGENCES POUR LES DIAPORAMAS : Titre de la diapositive h1 ≥ 3rem, titres de contenu ≥ 2.5rem, distinction visuelle claire entre les niveaux de titres. ESPACEMENT DES SECTIONS DE DIAPOSITIVE : Les sections majeures dans les diapositives doivent avoir un espacement ≥48px (titre-contenu, contenu-graphiques, graphiques-navigation). Testez toutes les mises en page à 375px de largeur — les tableaux de bord sont particulièrement sujets au débordement du conteneur de graphiques. REQUÊTES DE CONTENEUR CSS : Pour une réactivité avancée, utilisez des requêtes basées sur les conteneurs :

.chart-container { container-type: inline-size; }
@container (max-width: 400px) { 
  .chart-legend { display: none; } 
  .chart-title { font-size: 1rem; }
}

Cela offre une vraie réactivité au niveau des composants, au-delà des requêtes média de la fenêtre. 7. Impression et accessibilité : Styles @media print, @media (prefers-reduced-motion: reduce) avec animations désactivées. 8. Animations d'entrée (OBLIGATOIRE) : Doivent inclure des animations d'entrée via les classes .animate, les attributs data-reveal, ou les @keyframes CSS. CRITIQUE POUR L'ÉVALUATION : La présence d'animations est détectée automatiquement et requise. 9. Fonctions JavaScript : cycleTheme(), toggleMenu(), les variables de niveau supérieur utilisent var et non let/const.

🔥 CRITIQUE : Copiez skeleton.md exactement → Remplacez "YOUR CONTENT HERE" par le contenu de la visualisation → Enregistrez le fichier

Principes fondamentaux

1. HTML en un seul fichier — un fichier .html avec CSS/JS en ligne. S'ouvre dans n'importe quel navigateur, fonctionne hors ligne, s'envoie facilement par email.
2. Thème clair optimisé — les designs modernes privilégient la qualité du mode clair. Le thème sombre est disponible via un bouton.
3. Beau par défaut — le premier rendu doit être professionnel sans aucune itération.
4. Le contenu d'abord — la visualisation sert le message. Ne sacrifiez jamais la clarté pour l'esthétique.
5. Réactif — fonctionne sur desktop, tablette et mobile, sauf dimensions explicitement fixes (ex : diapositives 16:9).
6. Retenue visuelle — Les designs professionnels évitent les éléments décoratifs qui ajoutent du bruit. Pas d'orbes dégradées flottantes, de bordures arc-en-ciel ou d'animations ornementales.

Philosophie

Le HTML n'est pas un "site web" — c'est un outil de visualisation. Le code coûte peu. Tout le monde devrait se sentir capable de visualiser n'importe quoi. Cette compétence transforme le contexte de la conversation, les URL, les articles, les données ou les idées brutes en quelque chose de visuel et digeste en quelques secondes.

Les utilisateurs l'invoquent en cours de conversation avec Claude Code. Utilisez tout le contexte de la conversation — tout ce dont ils ont discuté, les liens partagés, les données qu'ils ont collées — comme matériau source. Lorsqu'une URL est donnée, parcourez-la et extrayez le contenu à visualiser.

Règles de sortie

PREMIÈRE ÉTAPE OBLIGATOIRE : Copiez le squelette complet depuis references/skeleton.md — cela inclut tous les éléments requis (menu, système de thème, propriétés CSS, HTML sémantique, fonctions d'accessibilité). N'écrivez jamais de HTML à partir de zéro.

• Écrivez un fichier .html dans ~/Downloads/ (ou le chemin spécifié par l'utilisateur)
• Nom de fichier : kebab-case descriptif, ex : q4-revenue-dashboard.html, team-roadmap-deck.html
• Commencez par le modèle skeleton.md, ajoutez votre contenu à la section <!-- YOUR CONTENT HERE -->
• Tous les styles personnalisés dans <style> après les styles de base du squelette
• Les bibliothèques CDN sont encouragées — utilisez le meilleur outil pour le travail :
  • Tailwind CSS — https://cdn.tailwindcss.com (style utilitaire, utilisez-le librement)
  • Chart.js — https://cdn.jsdelivr.net/npm/chart.js (barres, lignes, secteurs, radar, donut)
  • D3.js — https://cdn.jsdelivr.net/npm/d3@7 (visualisation de données complexes/personnalisées, graphes de force)
  • Mermaid — https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js (organigrammes, diagrammes de séquence)
  • Three.js — 3D lorsque approprié
  • Reveal.js — moteur de diaporama complet lorsque nécessaire. CRITIQUE : Doit définir html, body { height: 100%; overflow: hidden; } et donner au conteneur .reveal une height: 100%. La configuration DOIT utiliser des dimensions numériques : Reveal.initialize({ width: 1280, height: 720, center: true, controls: false }) — NE JAMAIS utiliser de pourcentages de chaîne comme '100%' qui provoquent une fenêtre de hauteur nulle et des diapositives vierges. OBLIGATOIRE : Désactivez les contrôles par défaut de Reveal.js (controls: false) — les superpositions de flèches < > par défaut sont laides. Ajoutez plutôt une barre de navigation inférieure personnalisée minimale :

<nav class="slide-nav" aria-label="Navigation des diapositives">
  <button onclick="prevSlide()" aria-label="Diapositive précédente">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <span class="slide-counter" id="slideCounter">1 / 8</span>
  <button onclick="nextSlide()" aria-label="Diapositive suivante">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
  </button>
</nav>

.slide-nav { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 9998; }
.slide-nav button { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s; }
.slide-nav button:hover { opacity: 0.7; }
.slide-counter { font-size: 12px; color: var(--text-secondary); font-weight: 400; min-width: 40px; text-align: center; opacity: 0.35; }

• Leaflet — cartes et données géospatiales (https://unpkg.com/[email protected]/dist/leaflet.js + CSS). Requis pour les données géographiques — ne dessinez jamais à la main des formes de continents SVG. Utilisez les tuiles OpenStreetMap ou un fournisseur de tuiles minimal.
• SVG pour les icônes et graphiques simples — n'utilisez jamais d'URL d'images externes, sauf si l'utilisateur les fournit
• Préférez les animations CSS au JS lorsque possible

Voir references/libraries.md pour des liens CDN détaillés, des modèles et des astuces.

Système de conception

Appliquez ces valeurs par défaut. Elles sont subjectives et testées — ne les remplacez que lorsque l'utilisateur le demande.

Référence complète du système de conception : Voir references/design-system.md pour les spécifications complètes de typographie, couleur, espacement, animation, accessibilité et finition visuelle.

Points clés (consultez la référence pour plus de détails) :

Notes de conception

Système de thème (CRITIQUE) :

• Utilisez UNIQUEMENT le thème basé sur les classes — <html class="theme-dark"> ou <html class="theme-light">
• Le bouton de thème change la classe html : document.documentElement.className = 'theme-' + newTheme
• N'utilisez jamais d'attributs data-theme — le système d'évaluation attend des thèmes basés sur les classes
• Propriétés personnalisées CSS requises : --bg, --surface, --text, --accent, --border (ensemble minimum pour la compatibilité d'évaluation)

Typographie :

• Police Inter obligatoire — https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap
• HIÉRARCHIE DE POIDS DE POLICE OBLIGATOIRE : h1 ≥ 700, h2 ≥ 600, h3 ≥ 500, corps = 400 (exigence d'évaluation critique)
• Suivi de -0.03em sur les titres
• EXCELLENCE TYPOGRAPHIQUE CORÉENNE : Pour le contenu coréen, utilisez Noto Sans KR pour le corps du texte avec Inter pour les éléments d'interface. Appliquez line-height: 1.6 pour le coréen (contre 1.4 pour le latin). Le poids coréen Medium correspond au Western Regular (400). Incluez : https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap

Couleurs :

• Thème basé sur les classes UNIQUEMENT (PAS de @media prefers-color-scheme)
• Sombre : fond #0A0A0A, texte #EDEDED. Clair : fond #FAFAF9, texte #0f172a
• Voir référence pour les couleurs complètes (accent, surface, bordure, etc.)

Espacement :

• Système basé sur 8px : margin et padding en multiples de 8
• Section interne padding: 2rem (32px)
• Section externe margin-bottom: 3rem (48px)
• Petits espaces : gap: 0.5rem (8px)
• Contenu principal max-width: 1200px, centré avec margin: 0 auto

Animations :

• Animations d'entrée obligatoires (voir section 8 des exigences)
• Utilisez @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
• Appliquez avec animation: fadeSlideIn 0.6s ease-out both;
• Utilisez animation-delay pour des animations échelonnées (ex : cartes apparaissant séquentiellement)
• N'animez PAS les propriétés width, height, box-shadow (problèmes de performances)
• Utilisez transform et opacity pour des performances maximales (accélération matérielle)
• Respecter prefers-reduced-motion : enveloppez les animations dans @media (prefers-reduced-motion: no-preference)
• ACTIVER LES ANIMATIONS PAR DÉFAUT — ne faites pas de tous les visiteurs des testeurs A/B. Si l'utilisateur les désactive, il le sait.

Ombre :

• Élévation subtile : box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
• Élévation moyenne des cartes : box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
• Survol des cartes : box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

Bordures :

• Standard : 1px solid var(--border)
• Cartes : arrondi border-radius: 12px
• Boutons : arrondi border-radius: 8px
• Petits éléments (badges, puces) : arrondi border-radius: 6px
• Transitions : transition: all 0.2s ease (sauf width/height)

Accessibilité :

• Rapport de contraste minimum 4.5:1 pour tous les textes
• Styles :focus-visible avec outline de 2px
• Liens d'évitement pour la navigation au clavier
• aria-label sur tous les éléments interactifs sans texte visible
• Zones cliquables d'au moins 44×44px
• Cibler les éléments avec des événements JavaScript — NE JAMAIS lier de gestionnaire d'événement au body ou au document

Finition visuelle :

• Les images de fond/décorations sont facultatives mais encouragées lorsqu'elles améliorent le message
• Utilisez des dégradés subtils (background: linear-gradient(135deg, var(--bg), var(--surface)) au lieu de fonds unis)
• Les cartes avec border + border-radius + ombre donnent de la profondeur
• Les espacements cohérents donnent un aspect "coûteux" au design
• Les sections de diapositives doivent avoir des zones de contenu distinctes visuellement (couleurs de fond alternées, bordures subtiles, ou espacement généreux)

Gestion des polices :

• TOUJOURS inclure le swap d'affichage : &display=swap dans l'URL Google Fonts
• TOUJOURS ajouter une police de secours system-ui, -apple-system, sans-serif
• Exemple : font-family: 'Inter', system-ui, -apple-system, sans-serif;
• La performance est une fonctionnalité : évitez de charger plusieurs familles de polices

Utilisation

Cette compétence est conçue pour être invoquée par des requêtes naturelles telles que :

• "visualise ceci"
• "fais un deck"
• "crée une diapositive"
• "construis une infographie"
• "montre-moi un tableau de bord"
• "rends ceci visuel"
• "fais un organigramme"
• "crée une chronologie"
• "dessine un diagramme de flux"
• "crée une comparaison"

Lorsqu'elle est invoquée, l'agent analyse le contexte de la conversation (y compris les URL, les ensembles de données ou les descriptions fournies), choisit le type de visualisation approprié et génère un fichier HTML complet répondant à toutes les exigences ci-dessus.

Pour les données impliquant des emplacements géographiques, ajoutez automatiquement Leaflet. Pour les données temporelles, utilisez des chronologies ou des graphiques linéaires Chart.js. Pour les données hiérarchiques, utilisez des organigrammes ou des cartes mentales Mermaid. Pour les processus, utilisez des diagrammes de flux. Pour les métriques et les KPI, utilisez des cartes avec des indicateurs de tendance.

Dépendances et intégrations

Bibliothèques CDN autorisées et modèles d'utilisation :

• Tailwind CSS (https://cdn.tailwindcss.com) : Classes utilitaires pour un prototypage rapide. Utilisez-le pour les grilles, l'espacement et la typographie.
• Chart.js (https://cdn.jsdelivr.net/npm/chart.js) : Graphiques de données. Utilisez TOUJOURS Chart.defaults.animation = false; et le modèle ChartManager.safeInit().
• D3.js (https://cdn.jsdelivr.net/npm/d3@7) : Visualisations de données personnalisées avancées.
• Mermaid (https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js) : Diagrammes de flux, organigrammes, diagrammes de séquence, diagrammes de Gantt.
• Reveal.js (https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js) : Diaporamas complets. Configurez avec des dimensions numériques et des contrôles de navigation personnalisés.
• Leaflet (https://unpkg.com/[email protected]/dist/leaflet.js + CSS) : Cartes et données géospatiales.
• html-to-image (https://cdn.jsdelivr.net/npm/[email protected]/dist/html-to-image.js) : Fonctionnalité de téléchargement PNG dans le menu utilitaire.

AVERTISSEMENT : Vérifiez les conflits de version lors de l'utilisation de plusieurs bibliothèques. Initialisez les bibliothèques dans une fonction DOMContentLoaded pour garantir que le DOM est chargé avant l'accès.

Verrouillage du système de menu

Le système de menu .viz-menu est obligatoire et vérifié automatiquement. Il doit inclure :

<div class="viz-menu">
  <button class="viz-menu-toggle" onclick="toggleMenu()" aria-label="Menu" tabindex="0">☰</button>
  <div class="viz-menu-dropdown">
    <button onclick="downloadImage()">Télécharger le PNG</button>
    <button onclick="window.print()">Imprimer</button>
  </div>
</div>

Le menu doit être positionné en haut à droite de la fenêtre (utilisez position: fixed avec top: 16px; right: 16px;). Le style du menu déroulant doit avoir display: none par défaut et display: block lorsque la classe show est ajoutée via JavaScript.

Fonctions JavaScript universelles

Tous les fichiers HTML doivent inclure ces fonctions (telles que fournies par skeleton.md) :

• cycleTheme() : Bascule entre les thèmes clair et sombre
• toggleMenu() : Affiche/masque le menu déroulant utilitaire
• downloadImage() : Utilise html-to-image pour capturer et télécharger le contenu principal en PNG
• Fonctions de navigation pour Reveal.js (si applicable) : prevSlide(), nextSlide()

Toutes les fonctions de niveau supérieur DOIVENT utiliser function name() ou var name = function(). N'utilisez JAMAIS let ou const pour les fonctions de niveau supérieur — des vérificateurs automatisés peuvent échouer avec les déclarations de bloc.

Exemples de types de visualisation

Voici des modèles courants que cette compétence excelle à générer, avec les considérations techniques clés pour chacun :

Tableau de bord

• Sections multiples pour les métriques, les graphiques et les tableaux
• Utilisez une grille CSS (display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) pour une mise en page réactive
• Les graphiques Chart.js dans des cartes avec des largeurs égales

Diaporama (avec Reveal.js)

• Évitez les contrôles Reveal.js par défaut ; utilisez une navigation minimale personnalisée
• Les sections individuelles deviennent des diapositives horizontales
• Utilisez des polices grandes et audacieuses avec un minimum de texte par diapositive

Infographie

• Disposition verticale en colonne unique
• Forte hiérarchie visuelle avec icônes et jeux de couleurs
• Animations d'entrée pour chaque section

Organigramme / Carte mentale (avec Mermaid)

• Définissez le diagramme dans un bloc <pre class="mermaid">
• Initialisez Mermaid avec mermaid.initialize({ startOnLoad: true, theme: 'base', themeVariables: { ... } })
• Utilisez getComputedStyle(document.documentElement).getPropertyValue(...) pour les couleurs adaptées au thème

Chronologie

• Disposition verticale avec des éléments alternés à gauche/droite
• Points de jonction sur l'axe central
• Icônes ou badges pour chaque événement

Page de destination / Page unique

• Mise en page en défilement avec des sections pleine largeur
• Appels à l'action et incrustations de formulaires (si approprié)
• Images de fond et dégradés

Exigences de performance

• Limitez les animations coûteuses (évitez width, height, box-shadow, top, left dans les animations)
• Utilisez transform et opacity pour des animations accélérées par le matériel
• Les graphiques Chart.js doivent désactiver l'animation (Chart.defaults.animation = false;) pour la fiabilité des rendus et les performances dans les longs tableaux de bord
• Testez à 375px de largeur pour les mises en page de tableau de bord
• Utilisez loading="lazy" pour les polices et les images facultatives
• Évitez de charger plusieurs bibliothèques de graphiques ; choisissez-en une (généralement Chart.js)

Références rapides

• Squelette — fichier de départ obligatoire pour toutes les visualisations
• Bibliothèques — liens CDN et modèles d'utilisation pour Chart.js, D3.js, Mermaid, Reveal.js, Leaflet
• Système de conception — spécifications complètes de typographie, couleur, espacement, animation, accessibilité et finition
• Aide-mémoire Markdown (si pertinent pour la documentation incluse)

Ces fichiers de référence se trouvent dans le même répertoire que ci-dessous.