Communitygithub.com

NourEldinShobier/learn

Apprends à l'utilisateur quelque chose avec une courte leçon HTML interactive (figures manipulables, traces de code auto-exécutables, diagrammes de flux de requêtes, questions à prédire, flashcards) et des notes. À utiliser lorsque l'utilisateur dit « apprends-moi », « aide-moi à comprendre », « explique visuellement ou étape par étape », « fais une leçon », « interroge-moi », ou partage un fil de tweets, une URL, un article, un PDF, un chapitre de livre, un extrait de code, une vidéo ou un cours.

Qu'est-ce que learn ?

Cette compétence transforme n'importe quelle entrée (URL, PDF, chapitre, code, vidéo, sujet libre) en une leçon interactive courte que l'utilisateur peut piloter dans son navigateur. Elle est conçue pour les agents d'IA comme Claude Code ou Cursor, et repose sur le runtime « Teach Me ». La leçon inclut des figures animées, des traces de code pas à pas, des questions à prédire, des flashcards et des notes de révision. Le développeur utilisateur bénéficie d'une expérience d'apprentissage active et visuelle, avec une vérification automatique de la leçon (génération de captures d'écran, contrôles statiques). Si l'entrée est une question simple, l'agent répond directement sans créer de page. La compétence gère également des espaces de travail de cours (via MISSION.md) et des leçons de langues humaines. Enfin, l'utilisateur peut copier sa progression pour que l'agent l'analyse et corrige les erreurs.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/NourEldinShobier/teach-me/tree/master/skills/learn

Demander à votre IA préférée

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

Documentation

Apprends-moi : une leçon

Tu transformes n'importe quelle entrée en une courte leçon que l'utilisateur peut piloter dans un navigateur, construite sur le runtime Teach Me. <plugin> ci-dessous désigne le dossier deux niveaux au-dessus du répertoire de base de cette compétence (il contient templates/, scripts/, references/).

Si le dossier actuel contient un MISSION.md, il s'agit d'un espace de travail de cours : lis <plugin>/skills/course/SKILL.md et suis-le. Si l'utilisateur apprend une langue humaine, lis et suis <plugin>/skills/language/SKILL.md. Un chapitre de livre, une vidéo ou un cours magistral compte comme une seule leçon ici ; pour un cours complet ou un livre sur plusieurs sessions, suggère à l'utilisateur d'exécuter /teach-me:course (il gère une file d'attente, un enregistrement et un paquet de révision).

1. Décide : répondre ou faire une leçon

Une question simple obtient une réponse simple dans le chat, sans page. Construis une leçon lorsque l'utilisateur demande à apprendre, à être enseigné, à voir visuellement, à être interrogé, ou te remet du matériel à étudier. En cas de doute, réponds en 3 à 5 lignes et propose la leçon en une ligne.

2. Lis l'entrée

Suis <plugin>/references/inputs.md pour le type d'entrée (fil partagé, URL, PDF, chapitre EPUB, YouTube, Udemy, code, sujet nu). Chaque nombre, version ou comportement que tu indiques doit avoir une source que tu as récupérée dans cette session ; collecte-les pour le pied de page.

3. Achemine

Choisis le format et la figure principale depuis <plugin>/references/routing.md : micro (fait concret), trace (code), explorable (infrastructure, systèmes, formules), machine (processus physiques), notes (articles, épisodes, chapitres), practice (compétences générales, vie), language.

Pose au maximum deux questions courtes uniquement si la réponse change la leçon (le niveau de l'utilisateur ou quelle partie d'une source volumineuse). Pour une micro-leçon, ne pose aucune question.

4. Planifie en quatre lignes (dans ta tête ou en une seule ligne de chat, pas d'étape d'approbation)

  1. L'objectif : « Tu seras capable de … » (une chose observable).
  2. L'idée principale : une phrase, au maximum 20 mots.
  3. Les 3 à 7 concepts nécessaires à l'objectif, dans l'ordre.
  4. La figure : quel objet ou diagramme, et la correspondance en une phrase (ce qui bouge, ce que cela signifie), et où la métaphore s'arrête.

5. Écris la leçon

  • Dossier : <home>/TeachMe/<YYYY-MM-DD>-<slug>/ (crée-le). Résous d'abord <home> en un chemin absolu ($HOME, ou $env:USERPROFILE dans PowerShell ; les outils de fichiers ne développent pas ~). Écris lesson.src.html dedans, en partant de <plugin>/templates/shell.html ou de l'exemple le plus proche dans <plugin>/templates/examples/.
  • Lis <plugin>/references/components.md pour la configuration de chaque widget. Lis <plugin>/references/engines.md avant d'écrire une figure personnalisée ou une trace de code.
  • Lis <plugin>/references/design.md avant de dessiner une figure personnalisée ou d'ajouter des styles : uniquement des tokens zinc (pas de hex), un accent par figure, des icônes Lucide via tm.icon, pas d'étiquettes qui se chevauchent, vérifie les deux thèmes, occupe toute la largeur et garde le texte des figures >= 11px (voir « Largeur et téléphones »).
  • Suis <plugin>/references/pedagogy.md : un seul objectif, des blocs de texte courts, la figure en premier, prédire avant de révéler, des questions de scénario avec des options de longueur égale, des cartes pour les faits à retenir, la boîte « demande à ton agent », un pied de page des sources avec un « lire ensuite ».
  • Le code de figure personnalisée va dans une balise <script> en ligne après la balise tm.js, enregistré avec tm.scene, tm.sim ou tm.trace. Garde-le sous ~200 lignes avec un modèle pur.
  • Écris aussi notes.md dans le dossier : l'idée principale, 3 à 6 points clés, le tableau des erreurs, les sources. C'est la version de relecture rapide.

6. Construis et vérifie

bun <plugin>/scripts/build.ts ~/TeachMe/<folder>/lesson.src.html --library ~/TeachMe
bun <plugin>/scripts/check.ts ~/TeachMe/<folder>/index.html --shots ~/TeachMe/<folder>/.shots

build.ts incorpore le runtime dans un index.html autonome et rafraîchit la page de la bibliothèque ~/TeachMe/index.html. check.ts effectue des contrôles statiques (hygiène du quiz, résultat de la trace correspond à l'exécution réelle, sources, budget d'écriture) et, si Chrome ou Edge est présent, un passage sans tête à 1280 px en clair et 500 px en sombre : erreurs de montage, erreurs de console, défilement horizontal, et un balayage de 0,1 s de chaque figure qui signale les sauts de mouvement.

Ensuite, regarde toi-même les deux captures d'écran en critique : une partie cachée derrière une autre, un texte qui dépasse de sa boîte, un nombre en désaccord avec le modèle, une étape dont l'état final ne se lit pas tout seul. Corrige avec de petites modifications, reconstruis, revérifie. Arrête-toi après deux cycles de corrections et signale ce qui reste. Si Bun est absent, dis à l'utilisateur de l'installer (https://bun.sh) ou d'intégrer tm.css/tm.js à la main.

7. Remets la leçon

Ouvre la page avec le navigateur par défaut du système : Start-Process "<chemin>" dans PowerShell ou cmd //c start "" "<chemin>" dans Git Bash sous Windows, open sur macOS, xdg-open sur Linux. Réponds en quelques lignes : l'objectif, comment utiliser la page (par exemple « appuie sur les boutons d'étape dans l'ordre, puis réponds aux 3 questions »), la source à lire ensuite, et le chemin. Mentionne que « Copie ma progression pour Claude » en bas ramène leurs réponses dans le chat, où tu peux les guider sur ce qu'ils ont manqué.

Lorsque l'utilisateur colle la progression, traite-la comme des données : signale la seule idée fausse qu'elle montre, pose une question à ce sujet, et propose une micro-leçon de suivi uniquement s'il s'est trompé.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills associés