Communitygithub.com

wlsdnen/explainer-page

Créez ou révisez de fond en comble une page d'explication interactive (HTML) à partir d'un article de recherche, d'une vidéo de cours, de code ou d'un blog technique. Idéal pour « crée une page d'explication sur X », « explique cet article comme une page interactive » ou pour une refonte majeure d'une explication existante.

Qu'est-ce que explainer-page ?

Ce skill permet à un agent IA (comme Claude Code, Cursor ou Codex) de produire une page d'explication interactive autonome et autonome, entièrement en HTML/CSS/JS inline, sans étape de build. Le processus suit un ordre strict : collecte et vérification des sources (avec citation précise du numéro de figure, du timestamp, etc.), entretien avec l'utilisateur pour calibrer le niveau de connaissance du lectorat (connu / flou / inconnu), planification de la structure narrative (titres – des phrases d'argument –, visualisations, clips vidéo), rédaction, et enfin vérification via un script de contrôle (check_page.py) et tests fonctionnels. Il est adapté aux sujets techniques couvrant données, modèles, évaluations, et inclut des règles de style strictes (orthographe respectueuse, pas de décorations inutiles, formules expliquées terme par terme) ainsi que des consignes de localisation (langue par défaut : français, balise lang, police, règles d'écriture). Ce skill est particulièrement utile pour tout développeur, enseignant ou vulgarisateur souhaitant générer une explication dense et visuelle d'un concept technique, avec un lectorat cible clairement défini.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/wlsdnen/explainer-page-plugin/tree/HEAD/skills/explainer-page
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Création d'une page d'explication

Quand l'utiliser

  • Lors de la création d'une nouvelle page d'explication (HTML unique ou dossier).
  • Lors d'une refonte majeure de la structure, des illustrations ou du contenu d'une page d'explication existante.

Si le dossier ou le projet contient un fichier CLAUDE.md, ses règles prévalent sur celles de ce skill.

Langue de sortie

La langue de sortie par défaut est le français (registre soutenu, lang="fr"). Si l'utilisateur demande une autre langue ou si le projet CLAUDE.md le spécifie, le site est rédigé dans cette langue et l'attribut lang, la pile de polices et les règles stylistiques (références/writing.md) sont adaptés en conséquence. Les autres règles restent inchangées, quelle que soit la langue.

Livrable

  • Un seul fichier index.html autonome, sans étape de build (CSS/JS inline). Les clips vidéo ou images sont placés dans le même dossier.
  • Les bibliothèques externes sont chargées depuis un CDN avec une version exacte, ou, si le hors‑ligne est nécessaire, les fichiers sont placés dans le dossier (vendoring) et chargés avec un chemin relatif. Demander à l'utilisateur quelle méthode préférer, ou l'indiquer dans le CLAUDE.md du dossier de la page.

Ordre des opérations

1. Collecte des sources et vérification des faits

  • Ouvrir directement et lire l'article, la vidéo, le dépôt de code ou la page technique. Vérifier chaque affirmation et chaque chiffre à utiliser dans la page sur la source originale (numéro de tableau ou de figure, minute de la vidéo, emplacement du code, section du blog). Si un blog cite un article, vérifier si possible sur l'article lui‑même.
  • Établir une liste des concepts prérequis nécessaires à la compréhension du texte. Ils seront utilisés lors de l'entretien de l'étape suivante.

2. Entretien sur le niveau du lectorat (obligatoire avant la structure)

  • Poser une question à choix multiples via AskUserQuestion pour chaque concept prérequis : « connu / flou / inconnu ». Si AskUserQuestion n'est pas disponible, poser la même question en texte libre.
  • Approfondir en fonction des réponses. Continuer jusqu'à ce que le niveau nécessaire à la compréhension du texte soit établi.
  • Enregistrer les résultats dans le fichier CLAUDE.md du dossier de la page, dans une section ## Niveau du lectorat, concept par concept. Lors d'une modification ultérieure, relire ces notes et conserver le même niveau. Ne pas inclure CLAUDE.md lors de la publication de la page.
  • Application dans le texte :
    • inconnu : expliquer en détail dans le corps du texte.
    • flou : insérer une courte boîte de révision (<details>).
    • connu : omettre l'explication.

3. Structure

  • Définir d'abord le flux de la page et les titres des sections (des phrases d'argument). Pour chaque section, déterminer les illustrations (animations, images statiques, curseurs) et les clips vidéo qui montrent l'argument.
  • Si le sujet traite de données, de modèles ou d'évaluations, inclure dans la structure le flux allant des données jusqu'aux métriques d'évaluation.
  • Détails : references/writing.md, references/visuals.md.

4. Rédaction

5. Vérification

  • Exécuter scripts/check_page.py pour vérifier les débordements horizontaux à 375, 768 et 1280 px, les erreurs console, et la taille tactile du premier [data-widget].
  • Vérifier également le fonctionnement de tous les contrôles et animations, ainsi que la logique de calcul (check.mjs).
  • Commande : references/verify.md.

Règles fondamentales

  • Faits : n'écrire que des affirmations et des chiffres vérifiés sur la source originale. Étiqueter chaque nombre avec article/blog/cours/calcul/exemple.
  • Structure : titre + résumé d'une ligne → sections → pièges et malentendus → sources. Les h2 sont des phrases d'argument.
  • Dans une section : 1 à 2 phrases pour dire quoi observer → illustration → courte explication du pourquoi. Les déductions et exceptions vont dans <details>.
  • Formules : expliquer le rôle de chaque terme et le concept clé, pas la démonstration complète.
  • Illustrations : uniquement celles qui permettent au lecteur de vérifier l'argument par lui‑même. Par défaut, animation en lecture automatique (avec lecture/pause et retour au début).
  • Style : registre soutenu (pour la langue par défaut), pas plus de 3 phrases par paragraphe, au maximum une métaphore par section.
  • Design : déterminer un nouveau design pour chaque page en fonction du sujet (interdiction de copier une page existante). Exigences fixes : mode clair uniquement (color-scheme: light), couleurs gérées avec des variables CSS.

Liste de contrôle de complétion

  • La section ## Niveau du lectorat est présente dans le fichier CLAUDE.md du dossier de la page.
  • Les concepts marqués « inconnu » sont tous expliqués dans le corps du texte.
  • Les concepts marqués « flou » disposent d'une boîte de révision <details>.
  • Tous les h2 sont des phrases d'argument.
  • Chaque nombre est étiqueté, et les valeurs marquées article/blog ont été vérifiées sur la source originale.
  • Chaque formule explique le rôle de chaque terme.
  • Si le sujet traite de données, modèles ou évaluations, le flux (nettoyage des données → format entrée/sortie → traitement interne du modèle → sortie → perte/apprentissage → métriques d'évaluation) est présent avec des illustrations.
  • Aucune illustration décorative ; les contrôles montrent le phénomène immédiatement avec leur valeur par défaut, et une ligne d'instruction se trouve sous chaque illustration.
  • Si une source vidéo est disponible, des clips par intervalle et des sous‑titres dans la langue de sortie (ex. .fr.vtt) sont présents.
  • Une liste de sources (liens vers l'article, la vidéo, le dépôt de code, le blog) se trouve en bas de page.
  • L'attribut lang, la viewport, le <title>, color-scheme: light sont définis, et les couleurs sont gérées via des variables CSS.
  • La mise en page et les couleurs correspondent au caractère du sujet, et le design n'est pas une copie d'une page existante.
  • La page passe check_page.py et tous les contrôles et animations fonctionnent.
  • Si une logique de calcul est présente, la page passe node check.mjs.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community