HTML Explainer
Construit des explications web soignées, basées sur des sources, jouables en une seule page ou en diaporama, avec une véritable boucle de qualité.
Testé · Fonctionne
Ce que fait
Une compétence de processus lourd (entretien de cadrage, limite de recherche, système de conception visuelle anti-slop, micro-démos jouables obligatoires, boucle de qualité capture d'écran et critique) pour transformer un sujet en un explicateur HTML interactif autonome. Se déclenche sur les demandes de construction d'un explicateur interactif, d'un guide, d'une visite guidée ou d'une page unique, ou pour transformer du matériel en une page web visuelle que les gens peuvent explorer.
Rapport de test
Vrai A/B, rendu dans le navigateur : la construction de la compétence a produit une démo de toile à effet Doppler réellement jouable avec des fronts d'onde compressés/étirés codés par couleur, une typographie éditoriale serif/sans, et une superposition de révision injectée par assemble.mjs, contre une base de référence qui était exactement le modèle emoji-hero/gradient-text/bento-card contre lequel la checklist anti-slop de la compétence elle-même met en garde.
Testé le: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/ds-vibe/html-explainer mkdir -p ~/.claude/skills cp -r html-explainer ~/.claude/skills/html-explainer
Commandes et exemples de prompts
/html-explainerConstruit des explications web soignées, basées sur des sources, jouables en une seule page ou en diaporama, avec une véritable boucle de qualité.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Build a small interactive one-pager explaining the Doppler effectTurn this topic into a playable web guide people can click throughMake a self-contained explainer page with a working micro-demo on it