Présentations Frontend

Que fait Présentations Frontend ?

Créez des présentations HTML riches en animations, sans dépendances, qui s'exécutent entièrement dans le navigateur.

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

Quand Activer

• Création d'un deck de talk, pitch, atelier ou présentation interne
• Conversion de diapositives .ppt ou .pptx en présentation HTML
• Amélioration d'une présentation HTML existante (disposition, mouvement, 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. Adaptation à la fenêtre obligatoire : chaque diapositive doit tenir dans un seul viewport sans défilement interne.
3. Montrer, ne pas dire : utilisez des aperçus visuels plutôt que des questionnaires de style abstraits.
4. Design distinctif : évitez les dégradés violets génériques, les decks Inter sur fond blanc et les modèles de présentation standard.
5. Qualité production : commentez le code, assurez l'accessibilité, la réactivité et les performances.

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.

Flux de Travail

1. Détecter le Mode

Choisissez une voie :

• 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 des améliorations

2. Découvrir le Contenu

Posez uniquement le minimum nécessaire :

• but : pitch, enseignement, talk de conférence, mise à jour interne
• longueur : courte (5-10), moyenne (10-20), longue (20+)
• état du contenu : texte final, notes approximatives, sujet uniquement

Si l'utilisateur a du contenu, demandez-lui de le coller avant d'appliquer le style.

3. Découvrir le Style

Par défaut, exploration visuelle.

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

Sinon :

1. Demandez quelle impression le deck doit créer : impressionné, énergisé, concentré, inspiré.
2. Générez 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/mouvement et rester sous environ 100 lignes de contenu de diapositive.
4. Demandez à l'utilisateur quel aperçu garder ou quels éléments mélanger.

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

4. Construire la Présentation

Générez soit :

• presentation.html
• [nom-presentation].html

Utilisez un dossier assets/ uniquement si 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 tirée de STYLE_PRESETS.md
• propriétés personnalisées CSS pour les valeurs du thème
• une classe de contrôleur de présentation pour la navigation clavier, molette et tactile
• Intersection Observer pour les animations de révélation
• prise en charge de prefers-reduced-motion

5. Appliquer l'Adaptation à la Fenêtre

Traitez cela comme une contrainte stricte.

Règles :

• chaque .slide doit utiliser height: 100vh; height: 100dvh; overflow: hidden;
• toute la typographie et l'espacement doivent être redimensionnés avec clamp()
• lorsque le contenu ne tient pas, divisez-le en plusieurs diapositives
• ne résolvez jamais le débordement en réduisant la taille du texte en dessous de tailles lisibles
• n'autorisez jamais de barres de défilement à l'intérieur d'une diapositive

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

6. Valider

Vérifiez le deck terminé aux tailles suivantes :

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

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

7. Livrer

À la remise :

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

Utilisez 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. Préférez python3 avec python-pptx pour extraire le texte, les images et les notes.
2. Si python-pptx n'est pas disponible, demandez s'il faut l'installer ou revenir à un flux manuel/basé sur l'exportation.
3. Préservez l'ordre des diapositives, les notes de l'orateur et les ressources extraites.
4. Après extraction, exécutez le même flux de sélection de style que pour une nouvelle présentation.

Gardez la conversion multiplateforme. Ne vous fiez pas aux outils uniquement macOS quand Python peut faire le travail.

Exigences d'Implémentation

HTML / CSS

• Utilisez 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égiez les arrière-plans atmosphériques, une hiérarchie typographique forte et une direction visuelle claire.
• Utilisez des formes abstraites, des dégradés, des grilles, du bruit et de la géométrie plutôt que des illustrations.

JavaScript

Incluez :

• navigation clavier
• navigation tactile / glissement
• navigation molette
• indicateur de progression ou index de diapositive
• déclencheurs d'animation à l'entrée

Accessibilité

• utilisez une structure sémantique (main, section, nav)
• maintenez un contraste lisible
• prenez en charge la navigation uniquement au clavier
• respectez prefers-reduced-motion

Limites de Densité de Contenu

Utilisez ces maxima sauf si l'utilisateur demande explicitement des diapositives plus denses et que la lisibilité reste assurée :

Type de diapositive	Limite
Titre	1 titre + 1 sous-titre + tagline optionnelle
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-Patterns

• dégradés de startup génériques sans identité visuelle
• decks avec polices système sauf si c'est intentionnellement éditorial
• 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 négatives invalides comme -clamp(...)

Compétences ECC Connexes

• frontend-patterns pour les motifs de composants et d'interaction autour du deck
• liquid-glass-design quand une présentation emprunte intentionnellement l'esthétique verre d'Apple
• e2e-testing si vous avez besoin d'une vérification automatisée du navigateur pour le deck final

Liste de Vérification de Livraison

• la présentation se lance à 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 significative, pas bruyante
• le mouvement réduit est respecté
• les chemins de fichiers et les points de personnalisation sont expliqués à la remise