83.3K+Télécharger
Aller au guide d’utilisation
frontend-slidespar Zara Zhang

Frontend Slides Skill.

Un skill Claude Code et Codex pour PPT et présentations : crée des présentations HTML riches en animations à partir de zéro ou converties depuis des fichiers PowerPoint.

  • Presentations
  • Slides HTML
Télécharger OpenDesignVoir le guide d'utilisation
zarazhangrui/frontend-slides · SKILL.mdSKILL.md
--- name: frontend-slides description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- ## Core Principles ## Design Aesthetics ## Fixed Stage Rules ## Phase 0: Detect Mode ## Phase 1: Content Discovery (New Presentations) ## Phase 2: Style Discovery
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 28 057 caractères au total

01 Ce qu'il fait

Ce que fait le skill frontend-slides dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Frontend Slides crée des présentations HTML sans dépendance, riches en animations, qui s'exécutent entièrement dans le navigateur, soit créées de zéro, soit converties à partir d'un fichier .pptx. Il est conçu pour les non-designers qui découvrent leur esthétique en regardant plutôt qu'en choisissant à partir de descriptions abstraites : il génère trois aperçus de style sur une seule diapositive (un preset sûr, au moins un template audacieux, et une carte joker) et laisse l'utilisateur réagir visuellement.

La quantité de texte que porte un deck est déterminée par un choix de densité entre faible densité axée sur l'oral et haute densité axée sur la lecture. Chaque deck est rédigé dans une scène fixe de 1920x1080 mise à l'échelle uniformément selon la fenêtre d'affichage, et la livraison peut se conclure par une URL Vercel active ou un export PDF.

Ce qu'il produit

  • Une présentation HTML autonome avec tout le style et le script en ligne.
  • Trois fichiers d'aperçu de style temporaires (style-a.html, style-b.html, style-c.html) qui sont supprimés au moment de la livraison.
  • Éventuellement une URL active sur Vercel pour partager le deck par texte, Slack ou e-mail, consultable sur n'importe quel appareil.
  • Éventuellement un PDF pour e-mail, Slack ou impression, produit en capturant chaque diapositive puis en les combinant.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Détecter le mode

    Le skill décide d'abord si la tâche consiste à créer un nouveau deck de zéro, à convertir un .pptx, ou à améliorer une présentation HTML existante, et applique le chemin de phase correspondant.

  2. 02
    Poser les questions de découverte en une seule fois

    L'objectif, la longueur, la préparation du contenu et la densité sont demandés ensemble, à l'aide d'une interface de questions structurées native lorsque l'environnement en dispose d'une, afin que l'utilisateur remplisse tout en une fois.

  3. 03
    Générer trois aperçus de style

    Plutôt que de demander à l'utilisateur de nommer un style, le skill affiche trois aperçus de titre sur une seule diapositive, les ouvre automatiquement, et demande lequel il préfère (ou de mélanger des éléments).

  4. 04
    Générer le deck en fichier unique

    La présentation complète est rédigée comme un seul fichier HTML qui intègre l'intégralité du viewport-base.css obligatoire ainsi que des commentaires section par section, en utilisant le choix de densité et la recette de style sélectionnée.

  5. 05
    Convertir un fichier PowerPoint

    Pour une source .pptx, le script Python fourni extrait le contenu, l'utilisateur confirme les titres, résumés et nombres d'images, et ce n'est qu'ensuite que la découverte de style et la génération HTML ont lieu.

  6. 06
    Livrer, Puis Proposer le Partage

    Les fichiers de prévisualisation sont supprimés, le deck est ouvert dans le navigateur, et l'utilisateur est informé sur la navigation, les variables CSS, les polices, la classe .reveal et l'édition inline avant qu'on lui propose le déploiement ou l'export PDF.

02 Trouvez celui qui vous convient

Quand utiliser le skill frontend-slides

Utilisez le skill frontend-slides dans Claude Code ou Codex lorsque le travail concerne des présentations PPT et slides de ce type. Les critères d'adéquation et les limites ci-dessous sont tirés du propre fichier du skill.

Bon choix

  • Toute personne qui souhaite des diapositives conçues pour une présentation ou un pitch, ou transformer un PPT/PPTX existant en diapositives web.
  • Les non-designers qui ne peuvent pas exprimer une préférence visuelle mais peuvent réagir à deux ou trois options rendues.
  • Quelqu'un qui part d'un fichier PowerPoint nécessitant un nouveau style plutôt qu'une réécriture.
  • Améliorer un deck HTML qui existe déjà, où des ajouts de contenu risquent de casser l'ajustement à scène fixe.
  • Des decks qui seront consultés sur téléphone, où une scène 16:9 en letterbox est acceptable mais une mise en page spécifique au téléphone n'est pas souhaitée.

Connaître les limites

  • Des decks dont la mise en page doit s'adapter à l'appareil de visualisation ; le contenu des diapositives n'est jamais réagencé pour s'adapter à un écran.
  • S'attendre à ce qu'un export PDF conserve le mouvement ou l'interactivité ; c'est un instantané statique.
  • Exporter du HTML créé en externe dont les diapositives utilisent un nom de classe autre que .slide, ce qui fait que le script d'export ne trouve rien.

Quoi fournir

  • ObjectifL'occasion guide la correspondance de préréglages et le design wildcard ; les options proposées sont un pitch deck, un tutoriel pédagogique, une conférence ou une présentation interne.
  • LongueurLe nombre approximatif de diapositives, classé en court, moyen ou long, détermine combien de diapositives de section et de contenu le deck peut comporter.
  • Contenu existantL'utilisateur indique si tout le contenu est prêt, s'il n'y a que des notes brèves, ou seulement un sujet, et partage le matériel afin que le deck en soit construit.
  • Mode de densitéUn choix unique en amont entre densité faible orientée présentateur et densité élevée orientée lecture, mémorisé et appliqué au nombre de diapositives, à l'échelle typographique et à la mise en page tout au long.
  • Dossier d'images (optionnel)Les images sont évaluées une par une pour leur utilisabilité et leurs couleurs dominantes, et le plan est co-conçu autour d'elles plutôt que planifié en premier.

03 Dans le skill

Règles que le skill frontend-slides Donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Zéro Dépendance, Un Seul Fichier

    Les decks sont des fichiers HTML uniques avec CSS et JS inline, donc le skill ne doit recourir ni à npm, ni à un bundler, ni à aucun outil de build.

  2. Ne Jamais Réagencer pour l'Appareil

    La scène 1920x1080 s'adapte à l'échelle dans son ensemble et peut apparaître en letterbox sur téléphone ; les points de rupture responsive ne doivent pas être utilisés pour réorganiser le contenu des diapositives.

  3. Changer de Diapositive avec Visibility, Pas Display

    Le changement de diapositive utilise .active / .visible avec visibility, opacity et pointer-events ; display: none et display: block sont interdits car des classes de mise en page ultérieures peuvent les remplacer et révéler toutes les diapositives à la fois.

  4. Annuler les Fonctions CSS avec Calc

    La négation directe de clamp(), min() ou max() est ignorée silencieusement, donc le skill doit l'encapsuler sous la forme calc(-1 * clamp(...)).

  5. Polices provenant de Fontshare ou Google Fonts

    Les polices système ne sont jamais utilisées, et la section esthétique cite Inter, Roboto et Arial comme des familles surexploitées à éviter.

  6. Aucun nom de template sur la diapositive

    Les noms de templates et de slugs ne figurent que dans le message adressé à l'utilisateur, jamais affichés sur l'aperçu ou la diapositive elle-même, au même titre que les autres textes internes du workflow.

  7. Diviser plutôt que réduire

    Le défilement, le débordement, les panneaux qui se chevauchent et un texte inférieur à une taille de lecture confortable constituent des violations de base ; un contenu dépassant la limite de densité se transforme en diapositives supplémentaires.

  8. Lire preview.md avant design.md

    Les templates audacieux sont présélectionnés à partir de l'index de sélection et lus au niveau de preview.md ; le design.md complet d'un template n'est chargé qu'en phase 3, après que l'utilisateur l'a choisi.

04 Mettez-le en pratique

Installez frontend-slides dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajoutez frontend-slides à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

Forme générique de la CLI skills pour SKILL.md ; le dépôt peut documenter son propre chemin.

Donner à la skill une première tâche PPT et diaporamas

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
It's [a 20-minute conference talk] and all I have is rough notes in [talk-notes.md]. Build me a new HTML presentation, about 12 slides, low density and speaker-led so it's one idea per slide. Show me some style previews before you generate the deck.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Après toute modification, vérifiez que la scène reste en 16:9, qu'aucun texte ne dépasse de sa carte, qu'aucun panneau ne se chevauche, et que les captures d'écran ont un rendu correct en 1280x720 ainsi que sur une résolution de téléphone.
  • Évaluez le débordement et le chevauchement à partir de captures d'écran du navigateur rendues plutôt qu'à partir du code, car les panneaux de la grille peuvent visuellement se recouvrir.
  • Lisez le texte visible de chaque aperçu avant de l'ouvrir, et corrigez si des métadonnées internes ont fuité sur la diapositive.
  • Après le déploiement, ouvrez l'URL en ligne et vérifiez que chaque image référencée se charge effectivement.

Dans OpenDesign frontend-slides est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Zara Zhang
Repository
github.com/zarazhangrui/frontend-slides Branche main
Fichier du skill
SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 9906a34
License
MIT Depuis LICENSE.
Étoiles du dépôt
29 255 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt zarazhangrui/frontend-slides. Ce n'est pas une note ni un compteur d'utilisation pour frontend-slides.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Principes fondamentauxZéro dépendance, des aperçus qui montrent plutôt qu'expliquent, un design distinctif, une divulgation progressive et une scène fixe en 16:9 non négociable.
  2. Esthétique du designConseils sur la typographie, la couleur, le mouvement et l'arrière-plan visant à éviter la typographie et les palettes génériques typiques de l'IA.
  3. Règles de la scène fixeInvariants CSS : toile 1920x1080, bascule .active/.visible, clamp uniquement en dehors de la scène, prise en charge du mouvement réduit.
  4. Phase 0 : détection du modeClasse la demande en nouvelle présentation, conversion PPT ou amélioration, avec des règles de modification pour les fichiers existants.
  5. Phase 1 : découverte du contenu (nouvelles présentations)Interroge simultanément sur l'objectif, la longueur, la disponibilité du contenu et la densité, puis évalue tout dossier d'images fourni.
  6. Phase 2 : découverte du styleGénère trois aperçus à partir d'un préréglage sûr, d'un template audacieux et d'un choix aléatoire, selon des règles strictes d'authenticité des aperçus.
  7. Phase 3 : génération de la présentationApplique le choix de densité et la recette de style sélectionnée, lit les fichiers de support, produit un seul fichier HTML à scène fixe.
  8. Phase 4 : conversion PPTExtrait le contenu du .pptx avec un script Python, le confirme auprès de l'utilisateur, puis le convertit selon le style choisi.
  9. Phase 5 : livraisonSupprime les aperçus, ouvre la présentation, et résume les détails du fichier, la navigation, les points de personnalisation et l'édition en ligne.
  10. Phase 6 : partage & export (option
Description du skill lui-même
« Créez de superbes présentations HTML riches en animations à partir de zéro ou en convertissant des fichiers PowerPoint. À utiliser lorsque l'utilisateur souhaite créer une présentation, convertir un PPT/PPTX en web, ou créer des slides pour une conférence/pitch. Aide les non-designers à découvrir leur esthétique par l'exploration visuelle plutôt que par des choix abstraits. »

Description du front-matter depuis SKILL.md. Le fichier complet fait environ 28 057 caractères. Lire le fichier complet sur GitHub.

Frontend Slides

Exécutez frontend-slides sur une vraie tâche PPT et de jeux de diapositives.

Le skill frontend-slides est intégré dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides