Show-me: visual explanations - **name_fr:** Show-me : explications visuelles - **tl_en:** Explain the current topic visually with concise diagrams, sketches, and focused HTML artifacts - **tl_fr:** Expliquer le sujet en cours visuellement avec schémas concis, croquis et artefacts HTML ciblés - **creator:** @humanlayer - **type:** Agent skill - **url:** https://github.com/humanlayer/skills - **cat:** Productivity - **kws:** diagrams, visualization, mermaid, explanations, teaching, communication, call trees, diffs - **license:** MIT **Description EN:** Curated by Skill Harbor — @humanlayer's visual-explanation skill: when discussing a topic, skip the preamble and pick the smallest view that makes the key point clear — logic as pseudocode, control flow as a call tree, UI structure as a component tree, file responsibility as a shallow tree, interactions as Mermaid diagrams, changes as diffs (matched to the topic: component, file layout, call tree, state flow), the whole block when context matters, and for dense visual concepts a single focused HTML file (diagram, infographic, or short slide deck) matched to the product's styling. Honest caveats: guidance only — the HTML artifacts may need the agent to open them in a browser for the user; MIT-licensed. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — le skill d'explication visuelle de @humanlayer : quand on discute d'un sujet, sans préambule, choisir la vue la plus petite qui clarifie le point clé — la logique en pseudocode, le flux de contrôle en arbre d'appels, la structure d'UI en arbre de composants, les responsabilités de fichiers en arborescence, les interactions en diagrammes Mermaid, les changements en diffs (adaptés au sujet : composant, arborescence, arbre d'appels, flux d'état), le bloc entier quand le contexte compte, et pour les concepts visuels denses un seul fichier HTML ciblé (schéma, infographie ou courte présentation) accordé au style du produit. Bémols honnêtes : un guide uniquement — les artefacts HTML peuvent nécessiter que l'agent les ouvre dans un navigateur pour l'utilisateur ; licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: nothing — the skill is guidance only, no accounts, keys, or tools required Install "Show-me: visual explanations" for me. It teaches the agent to explain any topic visually with the smallest clear view: pseudocode, call trees, component trees, file trees, Mermaid diagrams, diffs, or a focused HTML artifact — by @humanlayer, MIT-licensed. Repository: https://github.com/humanlayer/skills/blob/main/plugins/show-me/skills/show-me/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "show-me". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. nothing — ask the agent to "show me" a topic whenever I want a visual explanation). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : rien — le skill est un guide, aucun compte, clé ou outil requis Installe-moi « Show-me : explications visuelles ». Il apprend à l'agent à expliquer n'importe quel sujet visuellement avec la vue la plus petite et la plus claire : pseudocode, arbres d'appels, arbres de composants, arborescences de fichiers, diagrammes Mermaid, diffs, ou un artefact HTML ciblé — par @humanlayer, licence MIT. Dépôt : https://github.com/humanlayer/skills/blob/main/plugins/show-me/skills/show-me/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « show-me ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — demander à l'agent « show me » un sujet quand je veux une explication visuelle). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---

Expliquer le sujet en cours visuellement avec schémas concis, croquis et artefacts HTML ciblés - **creator:** @humanlayer - **type:** Agent skill - **url:** https://github.com/humanlayer/skills - **cat:** Productivity - **kws:** diagrams, visualization, mermaid, explanations, teaching, communication, call trees, diffs - **license:** MIT **Description EN:** Curated by Skill Harbor — @humanlayer's visual-explanation skill: when discussing a topic, skip the preamble and pick the smallest view that makes the key point clear — logic as pseudocode, control flow as a call tree, UI structure as a component tree, file responsibility as a shallow tree, interactions as Mermaid diagrams, changes as diffs (matched to the topic: component, file layout, call tree, state flow), the whole block when context matters, and for dense visual concepts a single focused HTML file (diagram, infographic, or short slide deck) matched to the product's styling. Honest caveats: guidance only — the HTML artifacts may need the agent to open them in a browser for the user; MIT-licensed. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh. **Description FR:** Sélectionné par Skill Harbor — le skill d'explication visuelle de @humanlayer : quand on discute d'un sujet, sans préambule, choisir la vue la plus petite qui clarifie le point clé — la logique en pseudocode, le flux de contrôle en arbre d'appels, la structure d'UI en arbre de composants, les responsabilités de fichiers en arborescence, les interactions en diagrammes Mermaid, les changements en diffs (adaptés au sujet : composant, arborescence, arbre d'appels, flux d'état), le bloc entier quand le contexte compte, et pour les concepts visuels denses un seul fichier HTML ciblé (schéma, infographie ou courte présentation) accordé au style du produit. Bémols honnêtes : un guide uniquement — les artefacts HTML peuvent nécessiter que l'agent les ouvre dans un navigateur pour l'utilisateur ; licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh. **Install prompt EN:** ``` Prerequisites: nothing — the skill is guidance only, no accounts, keys, or tools required Install "Show-me: visual explanations" for me. It teaches the agent to explain any topic visually with the smallest clear view: pseudocode, call trees, component trees, file trees, Mermaid diagrams, diffs, or a focused HTML artifact — by @humanlayer, MIT-licensed. Repository: https://github.com/humanlayer/skills/blob/main/plugins/show-me/skills/show-me/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "show-me". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. nothing — ask the agent to "show me" a topic whenever I want a visual explanation). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : rien — le skill est un guide, aucun compte, clé ou outil requis Installe-moi « Show-me : explications visuelles ». Il apprend à l'agent à expliquer n'importe quel sujet visuellement avec la vue la plus petite et la plus claire : pseudocode, arbres d'appels, arbres de composants, arborescences de fichiers, diagrammes Mermaid, diffs, ou un artefact HTML ciblé — par @humanlayer, licence MIT. Dépôt : https://github.com/humanlayer/skills/blob/main/plugins/show-me/skills/show-me/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « show-me ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — demander à l'agent « show me » un sujet quand je veux une explication visuelle). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi. ``` --- ---

Version :