frontend-slides

Frontend Slides

Créez des présentations HTML autonomes et riches en animations qui s'exécutent entièrement dans le navigateur.

Inspiré par l'approche d'exploration visuelle présentée dans les travaux de zarazhangrui (crédit : @zarazhangrui).

Quand l'activer

• Création d'un deck de conférence, d'un pitch, d'un atelier ou d'une présentation interne
• Conversion de diapositives .ppt ou .pptx en présentation HTML
• Amélioration d'une présentation HTML existante (mise en page, animations, typographie)
• Exploration de styles de présentation avec un utilisateur qui ne connaît pas encore ses préférences de design

Non-négociables

1. Zéro dépendance : par défaut, un seul fichier HTML autonome avec CSS et JS en ligne.
2. Ajustement au viewport obligatoire : chaque diapositive doit tenir dans un seul viewport, sans défilement interne.
3. Montrer, ne pas dire : utiliser des aperçus visuels plutôt que des questionnaires de style abstraits.
4. Design distinctif : éviter les decks génériques à dégradé violet, Inter sur fond blanc, ou ressemblant à des templates.
5. Qualité professionnelle : code commenté, accessible, responsive et performant.

Avant de générer, lisez STYLE_PRESETS.md pour la base CSS adaptée au viewport, les limites de densité, le catalogue de préréglages et les pièges CSS.

Workflow

1. Détecter le mode

Choisissez un chemin :

• Nouvelle présentation : l'utilisateur a un sujet, des notes ou un brouillon complet
• Conversion PPT : l'utilisateur a un fichier .ppt ou .pptx
• Amélioration : l'utilisateur a déjà des diapositives HTML et souhaite les améliorer

2. Découvrir le contenu

Ne demander que le strict minimum :

• objectif : pitch, enseignement, conférence, update interne
• longueur : court (5-10), moyen (10-20), long (20+)
• état du contenu : texte final, notes brutes, sujet uniquement

Si l'utilisateur a du contenu, lui demander de le coller avant le stylisme.

3. Découvrir le style

Par défaut, exploration visuelle.

Si l'utilisateur connaît déjà le préréglage souhaité, passer les aperçus et l'utiliser directement.

Sinon :

1. Demander quelle sensation le deck doit créer : impressionné, énergisé, concentré, inspiré.
2. Générer 3 fichiers d'aperçu d'une seule diapositive dans .ecc-design/slide-previews/.
3. Chaque aperçu doit être autonome, montrer clairement la typographie/couleur/animations, et rester sous environ 100 lignes de contenu de diapositive.
4. Demander à l'utilisateur quel aperçu garder ou quels éléments mélanger.

Utiliser le guide de préréglages dans STYLE_PRESETS.md pour associer l'ambiance au style.

4. Construire la présentation

Produire soit :

• presentation.html
• [nom-de-la-présentation].html

Utiliser un dossier assets/ uniquement lorsque le deck contient des images extraites ou fournies par l'utilisateur.

Structure requise :

• sections sémantiques pour les diapositives
• une base CSS adaptée au viewport depuis STYLE_PRESETS.md
• des propriétés personnalisées CSS pour les valeurs thématiques
• une classe de contrôleur de présentation pour la navigation clavier, molette et tactile
• un Intersection Observer pour les animations de révélation
• un support pour prefers-reduced-motion

5. Appliquer l'ajustement au viewport

Considérer cela comme une règle stricte.

Règles :

• chaque .slide doit utiliser height: 100vh; height: 100dvh; overflow: hidden;
• toute la typographie et les espacements doivent être mis à l'échelle avec clamp()
• lorsque le contenu ne tient pas, diviser en plusieurs diapositives
• ne jamais résoudre le débordement en réduisant la taille du texte en dessous de tailles lisibles
• ne jamais permettre les barres de défilement à l'intérieur d'une diapositive

Utiliser les limites de densité et le bloc CSS obligatoire dans STYLE_PRESETS.md.

6. Valider

Vérifier le deck final aux tailles suivantes :

• 1920x1080
• 1280x720
• 768x1024
• 375x667
• 667x375

Si l'automatisation du navigateur est disponible, l'utiliser pour vérifier qu'aucune diapositive ne déborde et que la navigation clavier fonctionne.

7. Livrer

Lors de la remise :

• supprimer les fichiers d'aperçu temporaires sauf si l'utilisateur souhaite les conserver
• ouvrir le deck avec l'ouvreur adapté à la plateforme, quand cela est utile
• résumer le chemin du fichier, le préréglage utilisé, le nombre de diapositives et les points de personnalisation faciles du thème

Utiliser l'ouvreur correct pour le système d'exploitation actuel :

• macOS : open fichier.html
• Linux : xdg-open fichier.html
• Windows : start "" fichier.html

Conversion PPT / PPTX

Pour la conversion PowerPoint :

1. Privilégier python3 avec python-pptx pour extraire le texte, les images et les notes.
2. Si python-pptx n'est pas disponible, demander s'il faut l'installer ou passer à un workflow manuel/basé sur l'export.
3. Conserver l'ordre des diapositives, les notes du présentateur et les ressources extraites.
4. Après extraction, exécuter le même workflow de sélection de style que pour une nouvelle présentation.

Garder la conversion multiplateforme. Ne pas se reposer sur des outils uniquement macOS quand Python peut faire le travail.

Exigences d'implémentation

HTML / CSS

• Utiliser du CSS et JS en ligne sauf si l'utilisateur demande explicitement un projet multi-fichiers.
• Les polices peuvent provenir de Google Fonts ou Fontshare.
• Privilégier les arrière-plans atmosphériques, une forte hiérarchie typographique et une direction visuelle claire.
• Utiliser des formes abstraites, dégradés, grilles, bruit et géométrie plutôt que des illustrations.

JavaScript

Inclure :

• navigation clavier
• navigation tactile / glissement
• navigation à la molette
• indicateur de progression ou index de diapositive
• déclencheurs d'animation au défilement (reveal-on-enter)

Accessibilité

• utiliser une structure sémantique (main, section, nav)
• garder un contraste lisible
• prendre en charge la navigation uniquement au clavier
• respecter prefers-reduced-motion

Limites de densité du contenu

Utiliser ces maxima sauf si l'utilisateur demande explicitement des diapositives plus denses et que la lisibilité est maintenue :

Type de diapositive	Limite
Titre	1 titre + 1 sous-titre + slogan optionnel
Contenu	1 titre + 4 à 6 puces ou 2 courts paragraphes
Grille de fonctionnalités	6 cartes max
Code	8 à 10 lignes max
Citation	1 citation + attribution
Image	1 image contrainte par le viewport

Anti-patrons

• dégradés de startup génériques sans identité visuelle
• decks en polices système sauf intention éditoriale délibérée
• longs murs de puces
• blocs de code nécessitant un défilement
• boîtes de contenu à hauteur fixe qui cassent sur les écrans courts
• fonctions CSS annulées invalides comme -clamp(...)

Compétences ECC associées

• frontend-patterns pour les patrons de composants et d'interactions autour du deck
• liquid-glass-design lorsqu'une présentation emprunte intentionnellement l'esthétique Apple glass
• e2e-testing si une vérification automatisée du navigateur est nécessaire pour le deck final

Liste de vérification du livrable

• la présentation s'exécute à partir d'un fichier local dans un navigateur
• chaque diapositive tient dans le viewport sans défilement
• le style est distinctif et intentionnel
• l'animation est pertinente, pas bruyante
• le mouvement réduit est respecté
• les chemins de fichiers et les points de personnalisation sont expliqués lors de la remise