Générateur de Présentation Sentry

Créez des diapositives de présentation interactives et pilotées par les données en utilisant React + Vite + Recharts, stylisées avec le système de conception Sentry et construites sous la forme d'un seul fichier HTML distribuable.

Étape 1 : Recueillir les exigences

Demandez à l'utilisateur :

Quel est le sujet de la présentation ?
Combien de diapositives (généralement 5-8) ?
Quelles données/graphiques sont nécessaires ? (séries chronologiques, comparaisons, diagrammes, graphiques de zones)
Quel est l'arc narratif ? (problème → solution, avant → après, plongée technique approfondie)

Évaluation des données (CRITIQUE)

Avant de concevoir des diapositives, évaluez si le contenu source contient des données quantitatives réelles (nombres, pourcentages, mesures, séries chronologiques, coûts, métriques). Créez des visualisations Recharts uniquement pour les diapositives où des données réelles existent. N'INVENTEZ PAS, n'estimez pas et ne générez pas de données pour remplir les graphiques.

Possède des données réelles → utiliser un graphique Recharts (barres, zones, lignes, etc.)
Pas de données → utiliser des mises en page basées sur du texte : cartes, tableaux, colonnes de puces, diagrammes ou blocs de citations. N'CRÉEZ PAS un graphique avec des nombres inventés.

Si le contenu source est purement qualitatif (récit, opinions, stratégie, descriptions de processus), la présentation ne doit contenir aucun graphique. Recharts et Charts.jsx ne doivent être inclus dans le projet que si au moins une diapositive a des données réelles à visualiser.

Étape 2 : Structurer le projet

Créez la structure du projet :

<nom-projet>/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── Charts.jsx

index.html

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet" />
    <title>TITRE</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

package.json

{
  "name": "NOM_PROJET",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "recharts": "^2.15.3" },
  "devDependencies": { "@vitejs/plugin-react": "^4.3.4", "vite": "^6.0.0", "vite-plugin-singlefile": "^2.3.0" }
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({ plugins: [react(), viteSingleFile()] })

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './App.css'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

Étape 3 : Construire le système de diapositives

Lisez ${CLAUDE_SKILL_ROOT}/references/design-system.md pour la palette de couleurs Sentry complète, la typographie, les variables CSS, les utilitaires de mise en page et le système d'animation.

Structure App.jsx

Définissez les diapositives comme un tableau de fonctions renvoyant du JSX :

const SLIDES = [
  () => ( /* Diapositive 0 : Titre */ ),
  () => ( /* Diapositive 1 : Contexte */ ),
  // ...
];

Chaque fonction de diapositive renvoie un <div className="slide-content"> avec :

Un titre <h2>
Un paragraphe sous-titre optionnel
Contenu principal (graphiques, cartes, diagrammes, tableaux)
Classes d'animation : .anim, .d1, .d2, .d3 pour apparition progressive en cascade

N'AJOUTEZ PAS de badges/pastilles de catégories au-dessus des titres (par exemple, « CONTEXTE », « EXPÉRIENCES »). Ils ont l'air génériques et n'ajoutent aucune valeur. Laissez le titre parler de lui-même.

Navigation

Implémentez la navigation au clavier (Flèche droite/Espace = suivant, Flèche gauche = précédent) et une superposition de navigation inférieure avec des boutons précédent/suivant, des indicateurs de points et le numéro de diapositive. La navigation n'a pas de bordure ni de fond — elle flotte de manière transparente. Un petit glyphe Sentry de faible contraste se trouve en haut à gauche de chaque diapositive.

function App() {
  const [cur, setCur] = useState(0);
  const go = useCallback((d) => setCur(c => Math.max(0, Math.min(SLIDES.length - 1, c + d))), []);

  useEffect(() => {
    const h = (e) => {
      if (e.target.tagName === 'INPUT') return;
      if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); go(1); }
      if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [go]);

  return (
    <>
      {cur > 0 && <div className="glyph-watermark"><SentryGlyph size={50} /><span className="watermark-title">TITRE</span></div>}
      <div className="progress" style={{ width: `${((cur + 1) / SLIDES.length) * 100}%` }} />
      {SLIDES.map((S, i) => (
        <div key={i} className={`slide ${i === cur ? 'active' : ''}`}>
          <div className={`slide-content${i === cur ? ' anim' : ''}`}>
            <S />
          </div>
        </div>
      ))}
      <Nav cur={cur} total={SLIDES.length} go={go} setCur={setCur} />
    </>
  );
}

Étape 4 : Créer des graphiques (uniquement quand les données existent)

IMPORTANT : Créez des graphiques uniquement pour les diapositives soutenues par des données réelles et concrètes du contenu source. Si le contenu d'une diapositive est qualitatif (stratégies, apprentissages, descriptions de processus, opinions), utilisez plutôt des mises en page basées sur du texte (cartes, tableaux, listes à puces, colonnes). N'inventez jamais de nombres, ne fabriquez pas de pourcentages et ne générez pas de données synthétiques pour remplir un graphique. Si vous n'êtes pas sûr que les données soient réelles ou déduites, N'CRÉEZ PAS de graphique.

Si AUCUNE diapositive ne nécessite de graphiques, ignorez complètement cette étape — ne créez pas Charts.jsx et n'importez pas Recharts.

Quand des données réelles SONT disponibles, lisez ${CLAUDE_SKILL_ROOT}/references/chart-patterns.md pour les modèles de composants Recharts incluant la configuration des axes, les constantes de couleur, les types de graphiques et les techniques de génération de données.

Mettez tous les composants de graphique dans Charts.jsx. Modèles clés :

Utilisez ResponsiveContainer avec hauteur explicite
Enveloppez dans un div .chart-wrap avec max-width 920px
Utilisez useMemo pour la génération de données
Règle de couleur : Utilisez la palette catégorique inspirée de Tableau (CAT[]) pour distinguer les séries de données et les groupes. N'utilisez les couleurs sémantiques (SEM_GREEN, SEM_RED, SEM_AMBER) que lorsque la couleur elle-même a une signification (bon/mauvais, succès/échec, avertissement).
Graphiques courants : ComposedChart avec Area/Line empilées, BarChart, diagrammes SVG personnalisés
Chaque point de données dans un graphique doit provenir du contenu source. Ne pas interpoler, extrapoler ou arrondir les nombres pour améliorer l'apparence des graphiques.

Étape 5 : Styliser avec le système de conception Sentry

Appliquez le CSS complet de la référence du système de conception. Éléments clés :

Police : Rubik de Google Fonts
Couleurs : Variables CSS pour le chrome UI (--purple, --dark, --muted). Variables CSS sémantiques (--semantic-green, --semantic-red, --semantic-amber) uniquement où la couleur a une signification. Palette catégorique (CAT[]) pour toute autre visualisation de données.
Diapositives : Positionnées absolument, transitions d'opacité
Animations : Keyframe fadeUp avec délais échelonnés
Mise en page : Rangées flex .cols, grille .cards, conteneurs .chart-wrap
Tags : .tag-purple, .tag-red, .tag-green, .tag-amber pour les étiquettes de diapositive
Logo : Lisez le SVG officiel depuis ${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg (marque complète) ou sentry-glyph.svg (glyphe uniquement). N'APPROXIMEZ PAS — utilisez toujours les chemins SVG exacts de ces fichiers.

Étape 6 : Modèles de diapositives courants

Diapositive de titre

Logo (depuis ${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg ou sentry-glyph.svg) + h1 + sous-titre + informations d'auteur/date.

Diapositive de problème/contexte

Tag + titre + grille de cartes à 2 colonnes avec en-têtes iconographiques.

Diapositive de comparaison de données

Tag + titre + graphiques côte à côte ou tableau de comparaison avant/après.

Diapositive de plongée technique approfondie

Tag + titre + graphique pleine largeur + puces d'annotation ci-dessous.

Diapositive de résumé/décision

Tag + titre + mise en page à 3 colonnes avec en-têtes de catégories et listes à puces.

Étape 7 : Itérer et affiner

Après l'échafaudage initial :

Exécutez npm install && npm run dev pour démarrer le serveur de développement
Itérez sur les modèles de données de graphique et la conception visuelle
Ajustez les animations, les couleurs et l'espacement de la mise en page
Construisez la sortie finale : npm run build produit un seul fichier HTML dans dist/

Attentes de sortie

Un projet React + Vite fonctionnel qui :

S'affiche comme un diaporama navigable au clavier
Utilise la marque Sentry (couleurs, polices, icônes)
Contient des visualisations Recharts uniquement pour les diapositives avec des données quantitatives réelles du contenu source — pas de données fabriquées
Omet Charts.jsx et la dépendance Recharts entièrement si aucune diapositive n'a de données réelles
Se construit en un seul fichier HTML distribuable
A des animations en fondu progressif sur les transitions de diapositives