amphi-html-deck : une skill Claude Code pour générer des présentations Amphi

Ce que vous allez apprendre

• Pourquoi packager un workflow récurrent en skill Claude Code plutôt que de le redonner à chaque conversation

• Le contrat technique d'Amphi (1 seul HTML, slides 1280×720, CSS partagé) et comment la skill le respecte automatiquement

• Comment installer et utiliser amphi-html-deck en pratique pour générer un deck à partir d'un brief

• Le complément naturel avec amphi-mcp pour boucler la chaîne génération → publication

Quand on génère beaucoup de présentations, on finit toujours par tomber sur la même friction : Claude est très bon pour produire du HTML, mais Amphi a un format très spécifique. Si on ne lui rappelle pas le contrat à chaque fois, on récupère un fichier qui s'affiche en une seule slide, ou qui se rogne, ou qui charge des polices relatives qui ne marchent jamais. La skill amphi-html-deck capture cette recette une bonne fois pour toutes — voici comment, et pourquoi c'est utile pour quiconque a un format de sortie répétitif à produire.

Pour le contexte de l'outil lui-même, voir l'article où je présentais le projet : Amphi : présentation live avec quiz et transcription IA.

Le contexte : Amphi a un format très spécifique

Amphi importe une présentation sous forme d'un seul fichier HTML qu'il découpe automatiquement en slides. Chaque slide est ensuite rendue dans une <iframe> sandboxée, à une taille fixe, mise à l'échelle pour tenir dans le cadre.

Ce mécanisme impose six règles non négociables :

• Un seul fichier HTML autonome — tout le CSS dans des balises <style>, pas de feuille externe.

• Une slide = un élément class="slide" (section ou div). Amphi découpe en priorité sur cette classe.

• CSS partagé — tous les <style> du document sont concaténés et appliqués à chaque slide. Un seul système de styles pour tout le deck.

• .slide est forcé en display:flex par Amphi. Chaque slide doit être conçue comme un conteneur flex.

• Canvas fixe 1280×720 (16:9). La slide est mise à l'échelle pour tenir dans la zone visible — il faut donc voir grand sur les tailles de texte.

• Ressources externes en URL absolue https:// (images, Google Fonts). L'iframe n'a pas d'URL de base et tourne en sandbox.

Aucune de ces règles n'est compliquée prise isolément. Mais oublier une seule fait planter le rendu — et les agents IA, par défaut, vont presque toujours en oublier au moins une. D'où l'intérêt d'une skill.

Pourquoi pas un simple prompt ?

On pourrait copier-coller le contrat dans chaque conversation, ou le mettre dans un CLAUDE.md. Deux problèmes avec ça.

D'abord, ça pollue le contexte. Si on bosse sur un projet qui n'est pas un deck Amphi, on n'a aucune envie d'avoir les instructions de génération de slides dans le system prompt par défaut. Une skill ne se charge que quand Claude détecte qu'on en a besoin.

Ensuite, ça ne se versionne pas proprement. Un prompt collé dans une conversation est unique à cette conversation. Une skill est un dossier de fichiers qu'on installe, versionne, partage, met à jour. Le savoir-faire devient un artefact réutilisable plutôt qu'une recette à recopier.

C'est exactement le même argument que pour les serveurs MCP côté outils : on transforme un comportement répétitif en composant logiciel qui se diffuse. Les skills jouent ce rôle côté instructions ; les MCP le jouent côté actions.

Ce que fait la skill amphi-html-deck

La skill est un dossier avec un SKILL.md qui contient trois choses :

• Le contrat technique d'Amphi — les six règles ci-dessus, exprimées de manière condensée mais sans omission.

• Une section design qui rappelle les tailles de typo, contrastes et espacements pour qu'une slide reste lisible une fois mise à l'échelle.

• Un exemple complet d'un deck minimal valide — Claude n'a pas à inventer la structure, il a un point de départ correct.

Et un frontmatter qui dit explicitement quand utiliser la skill : « À utiliser quand on crée, génère ou prépare une présentation ou un deck HTML destiné à Amphi ». C'est ce frontmatter que Claude lit pour décider d'activer la skill au moment opportun, sans qu'on ait à l'invoquer manuellement.

Installation

La skill est publiée sur GitHub. Pour l'installer en local dans Claude Code :

1. Cloner ou télécharger le dépôt github.com/Oliviercreativ/amphi-skill.

2. Déposer le dossier amphi-html-deck/ dans ~/.claude/skills/.

3. Lancer une nouvelle session Claude Code. La skill devient disponible immédiatement.

Aucune configuration supplémentaire — pas de dépendances npm, pas de variables d'environnement. C'est uniquement un fichier d'instructions.

Utilisation : un exemple concret

Une session type ressemble à ça :

Vous : « Fais-moi un deck Amphi de 8 slides pour ma formation IA en PME : intro, état du marché, 3 cas d'usage, ROI, risques, CTA. Style sobre, palette beige/noir. »

Claude lit la skill, comprend le contrat, et génère un fichier HTML autonome avec 8 sections .slide, du CSS partagé, des tailles de typo adaptées à un canvas 1280×720, et des Google Fonts en URL absolue. Le fichier est prêt à être importé dans Amphi sans retouche manuelle.

Quand on enchaîne plusieurs decks dans la même journée — pour différents clients, différentes formations — le gain de temps cumulé est sensible. C'est exactement le genre de tâche qu'on rentabilise dès la deuxième ou troisième utilisation.

Aller plus loin : le MCP en complément

La skill couvre la génération du HTML. Pour boucler la chaîne et publier directement le deck dans Amphi sans avoir à uploader manuellement, il faut un MCP. C'est exactement le rôle d'amphi-mcp — j'en ai détaillé la conception et la publication dans amphi-mcp : j'ai publié un serveur MCP pour mon SaaS, voici pourquoi.

Combinés, on obtient un flux complet : « fais-moi un deck sur X » → la skill génère le HTML → le MCP le publie sur Amphi → Claude renvoie le lien de la session. Trois minutes au total, là où il fallait avant ouvrir Keynote, exporter en PDF, uploader, configurer.

Ce qu'il faut retenir

• Quand un agent doit produire un format de sortie répétitif et précis, une skill capture le contrat une fois pour toutes — moins d'erreurs, plus de portabilité, contexte propre

• Le contrat d'Amphi tient en six règles, mais en oublier une suffit à casser le rendu. La skill élimine ce risque.

• Installation triviale : un dossier dans ~/.claude/skills/, pas de dépendances

• Le couple skill + MCP ferme la boucle : génération côté skill, publication côté MCP, agent autonome de bout en bout

Questions fréquentes

Qu'est-ce qu'une skill Claude Code exactement ? Une skill est un dossier installé dans ~/.claude/skills/ contenant au minimum un SKILL.md avec frontmatter (nom, description, conditions d'usage) et un corps en markdown. Claude lit la description et active la skill quand elle correspond à la tâche en cours, sans qu'il faille l'invoquer explicitement.

Quelle différence avec un MCP ? Une skill ajoute des instructions au modèle (du savoir-faire textuel). Un MCP ajoute des outils exécutables (des actions qui appellent du code). Les deux sont complémentaires : la skill dit « voici comment faire », le MCP dit « voici ce que tu peux exécuter ». Pour Amphi on a les deux.

La skill marche-t-elle avec d'autres clients que Claude Code ? Le format SKILL.md est spécifique à l'écosystème Claude (Code, Desktop, agent SDK). On peut transcrire le contenu en system prompt pour Cursor, Continue ou un autre client, mais ce n'est plus la même mécanique d'activation contextuelle.

Le SKILL.md fait combien de lignes ? Environ 110 lignes pour amphi-html-deck — le contrat, les guidelines de design, un exemple complet de deck minimal valide. C'est assez court pour être lu rapidement, assez précis pour ne laisser aucune ambiguïté à l'agent.

Le code de la skill est disponible sur GitHub : github.com/Oliviercreativ/amphi-skill. Si vous voulez packager vos propres workflows répétitifs en skill, ou si vous cherchez à industrialiser la génération d'un format de sortie particulier dans vos équipes, vous pouvez me contacter ou réserver un appel.