# How the show-me Skill Explains Topics with Different Visualizations

> Discover how the show-me skill explains topics with varied visualizations. It maps requests to templates like pseudocode, call-trees, and Mermaid diagrams for clear understanding.

- Repository: [HumanLayer/skills](https://github.com/humanlayer/skills)
- Tags: how-to-guide
- Published: 2026-09-12

---

**The show-me skill maps user requests to hard-coded visual templates defined in [`SKILL.md`](https://github.com/humanlayer/skills/blob/main/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`](https://github.com/humanlayer/skills/blob/main/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`](https://github.com/humanlayer/skills/blob/main/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`](https://github.com/humanlayer/skills/blob/main/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:

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

```

To generate a Mermaid sequence diagram:

```typescript
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:

```typescript
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`](https://github.com/humanlayer/skills/blob/main/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`](https://github.com/humanlayer/skills/blob/main/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`](https://github.com/humanlayer/skills/blob/main/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`](https://github.com/humanlayer/skills/blob/main/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.