How the show-me Skill Explains Topics with Different Visualizations

The show-me skill maps user requests to hard-coded visual templates defined in SKILL.md, selecting from pseudocode, call-trees, component trees, file-trees, Mermaid diagrams, diffs, code blocks, or HTML artifacts based on the specific information need.

The show-me skill in the humanlayer/skills repository transforms textual explanations into context-specific visual aids. By analyzing the user's intent, it selects the most appropriate diagram type from a curated set of templates to explain topics clearly without unnecessary detail.

How the show-me Skill Selects Visualizations

The decision logic resides in the expandSkill function within the CLI entry point. This function parses the user's request, identifies the intent (such as "explain-algorithm" or "show-interaction"), and maps it to a specific template stored in plugins/show-me/skills/show-me/SKILL.md. The skill then injects dynamic values—such as file names, component names, or participant identifiers—before returning the formatted visualization block.

A guidance section in SKILL.md (lines 124‑128) instructs the engine to keep every visualization concise and context-specific, ensuring that the output matches the granularity of the current question rather than providing generic documentation.

The Eight Visualization Templates in SKILL.md

The SKILL.md file contains hard-coded snippets covering eight distinct diagram types. Each template targets a specific category of information.

Pseudocode for Algorithmic Logic

When users ask "how does X work?" or "what's the flow?", the skill returns pseudocode blocks (lines 8‑16). This template illustrates algorithmic logic without syntactic noise, making it ideal for explaining operations like save handlers or validation flows.

Call-Trees for Runtime Flow

For questions about hierarchy or execution order, the skill selects the call-tree template (lines 18‑26). This visualization displays nested function calls and their relationships, helping developers trace runtime control flow through complex operations like submitForm.

Component Trees for UI Structure

React and similar framework users receive component tree diagrams (lines 28‑35). These hierarchical TSX snippets map parent-child relationships in the UI, such as <SessionPage> containing <Form> elements, clarifying the structural composition of interfaces.

File-Trees for Project Layout

When users need an overview of repository organization, the file-tree template (lines 37‑44) renders directory structures with annotated responsibilities. This helps newcomers understand which folders contain domain logic versus configuration or tests.

Mermaid Diagrams for Interactions

For scenarios involving multiple actors—such as user, UI, and background daemon interactions—the skill employs Mermaid sequence diagrams (lines 46‑56). These diagrams visualize the chronological flow of messages between system components, making async processes and API call sequences explicit.

Diff Blocks for Change Visualization

When explaining "what changed" in code, file layouts, or call stacks, the skill renders diff blocks (lines 60‑95). These before/after comparisons highlight additions and removals, supporting both code reviews and refactoring explanations.

Full Code Blocks for Implementation Details

If the user requires a copy-pasteable implementation rather than a conceptual overview, the skill outputs full code blocks (lines 108‑115). These complete TypeScript or JavaScript snippets provide working functions that developers can immediately integrate into their codebase.

HTML Artifacts for Complex Concepts

For dense information requiring rich styling or interactive elements, the skill generates HTML artifacts (lines 117‑122). These standalone files open in the browser and support infographics, slide decks, or styled documentation pages that exceed the formatting constraints of markdown.

Calling the show-me Skill Programmatically

You can invoke the visualization engine directly using the runSkill function, passing an intent that triggers the template selection logic in expandSkill.

To request pseudocode for an algorithm:

await runSkill('show-me', {
  intent: 'explain-algorithm',
  topic: 'save operation',
});
// Returns pseudocode block from lines 8-16

To generate a Mermaid sequence diagram:

await runSkill('show-me', {
  intent: 'show-interaction',
  participants: ['User', 'UI', 'Daemon'],
});
// Returns Mermaid diagram from lines 46-56

To visualize structural changes as a diff:

await runSkill('show-me', {
  intent: 'show-diff',
  diffType: 'file-tree',
});
// Returns diff snippet from lines 71-82

Summary

• The show-me skill selects visualizations by matching user intent to hard-coded templates in plugins/show-me/skills/show-me/SKILL.md.
• Eight template types cover distinct needs: pseudocode, call-trees, component trees, file-trees, Mermaid diagrams, diff blocks, full code blocks, and HTML artifacts.
• The expandSkill function handles template selection and dynamic value injection at runtime.
• Visualization guidelines (lines 124‑128) enforce brevity and context-specificity in all outputs.

Frequently Asked Questions

How does the show-me skill determine which visualization to generate?

The skill's expandSkill function analyzes the intent parameter in the user request—such as explain-algorithm or show-diff—and maps it to a specific template range in SKILL.md. Each intent corresponds to a predefined visualization type optimized for that category of information.

Where are the visualization templates stored in the humanlayer/skills repository?

All templates reside in plugins/show-me/skills/show-me/SKILL.md. This markdown file contains the raw snippets for all eight visualization types, spanning lines 8‑122, plus guidance instructions at lines 124‑128.

Can I customize the visualizations provided by the show-me skill?

According to the source analysis, the templates are hard-coded in SKILL.md. To modify available visualizations, you would edit the specific code blocks within that file (e.g., updating the Mermaid syntax at lines 46‑56 or the component tree at lines 28‑35), as there is no external configuration file for template definitions.

What is the difference between the call-tree and component tree visualizations?

The call-tree template (lines 18‑26) visualizes runtime function execution hierarchies, showing which methods invoke which subroutines. The component tree template (lines 28‑35) displays static UI hierarchies, such as React component nesting, regardless of runtime execution order.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}