Frontend Slides
Des présentations HTML animées, zéro dépendance, en un seul fichier autonome, avec une porte rigide d'ajustement au viewport.
- Quoi
- Des présentations HTML animées, zéro dépendance, en un seul fichier autonome, avec une porte rigide d'ajustement au viewport.
- Coût
- Gratuit
- Prérequis
- Utilisez « frontend-slides » avec un agent IA disposant d'outils de fichiers (Read, Write), comme Claude Code.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor : un skill de présentation qui produit des decks HTML animés, zéro dépendance, tournant entièrement dans le navigateur depuis un seul fichier autonome. Le workflow détecte le mode (nouvelle présentation, conversion PPT/PPTX via python-pptx, ou amélioration de diapos HTML existantes), découvre le contenu avec un minimum de questions, puis découvre le style par exploration visuelle : il génère 3 aperçus d'une diapo et demande lequel garder ou quoi mixer, au lieu de questionnaires de style abstraits. La discipline signature : une porte rigide d'ajustement au viewport. Chaque diapo doit tenir dans un viewport sans défilement interne, la typo et l'espacement passent par clamp(), le contenu qui ne tient pas est scindé, jamais rétréci sous la taille lisible. Le livrable inclut navigation clavier, molette et tactile, animations d'apparition, respect de reduced-motion, structure sémantique et limites de densité par type de diapo. Le design distinctif est obligatoire : les decks génériques en dégradé violet façon gabarit sont un anti-pattern explicite. Par @affaan-m, listé ici avec crédit à son créateur (approche visuelle inspirée de zarazhangrui, crédité dans le dépôt). Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : la conversion PPT exige python-pptx installé ; l'automatisation navigateur aide à vérifier qu'aucune diapo ne déborde mais reste optionnelle ; un seul fichier HTML veut dire pas d'édition native PowerPoint ensuite. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans MuseCréation de la communauté. Skill Harbor ne vérifie pas le code — examinez la source avant de l'installer.
Utilisez « frontend-slides » avec un agent IA disposant d'outils de fichiers (Read, Write), comme Claude Code. Prérequis : un navigateur pour prévisualiser le deck. Pour la conversion PPT/PPTX : Python 3 avec `pip install python-pptx`. Aucune clé API, aucun service payant. 1. Ouvrez le skill : https://github.com/affaan-m/ECC/blob/main/skills/frontend-slides/SKILL.md et copiez le texte complet du SKILL.md, plus STYLE_PRESETS.md, html-template.md, animation-patterns.md et viewport-base.css du même dossier. 2. Collez-les dans un chat avec votre agent et ajoutez : « Construis un deck [pitch/talk/atelier] sur [sujet]. Longueur : [court/moyen/long]. Contenu : [collez vos notes ou votre brouillon]. » 3. Quand il montre les 3 aperçus de style d'une diapo, choisissez-en un ou dites quoi mixer. Il construira ensuite le deck complet et validera l'ajustement au viewport. Astuce : pour une conversion, dites « Convertis ce PPTX : [fichier] » et confirmez d'abord que python-pptx est disponible. Ouvrez le fichier HTML résultant dans un navigateur pour vérifier vous-même animations et navigation. Sécurité : un skill est du texte d'instructions ; il n'exécute rien tout seul. N'y collez jamais de secrets ni de clés API, et relisez tout ce que l'agent propose avant qu'il n'agisse.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.