skills.rest
mintuz
mintuzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

show-me

Generates concise diagrams, code-shape sketches, and HTML artifacts to explain topics visually.

3|Updated Nov 8, 2014
Search Tags:#html#mermaid#visualization#code explanation#diagrams#component tree#call tree
One-click install
npx skills add https://github.com/mintuz/.dotfiles --skill show-me-mintuz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: show-me
Source: https://github.com/mintuz/.dotfiles/tree/main/agents/.agents/skills/show-me
Command: npx skills add https://github.com/mintuz/.dotfiles --skill show-me-mintuz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Dense technical explanations in plain prose are hard to follow. This Skill turns the current topic of conversation into compact visuals—pseudocode, call trees, component trees, file trees, Mermaid diagrams, diffs, or focused HTML pages—so the key point lands quickly. ## Core Features & Use Cases - Multiple visual formats: Renders logic as pseudocode, runtime flow as call trees, UI as component trees, refactors as file trees, interactions as Mermaid diagrams, and changes as diffs. - Focused HTML artifacts: For layouts, state comparisons, or concepts too dense for Mermaid, writes a single styled HTML file and opens it for the user. - Use Case: While discussing how a form submission flows through your app, ask for a visual and get a call tree showing submitForm calling createSession, persistPrompt, and navigateToSession, placed next to a brief explanation. ## Quick Start Ask the assistant to show you visually how the current feature or code flow works using the show-me skill.

Frequently Asked Questions about show-me

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize code flow or architecture in a conversation?▼

Ask for a visual explanation of the current topic and the skill picks the smallest fitting format: call trees for runtime flow, component trees for UI structure, file trees for refactors, or Mermaid diagrams for interactions and data flow.

What diagram types can this skill generate?▼

It produces pseudocode blocks, call trees, component trees with state annotations, shallow file trees, Mermaid sequence and flow diagrams, diffs for changes, and single-file HTML artifacts for layouts or dense concepts.

When does it create an HTML file instead of a diagram?▼

An HTML artifact is created for visual UI, layouts, state comparisons, or concepts too dense for Mermaid. The file matches the product's colors, type, and spacing, supports desktop and mobile, and is opened automatically.

Can I use Mermaid diagrams to show component interaction?▼

Yes, Mermaid is used for component interaction, control flow, and data flow, such as sequence diagrams showing messages between a user, UI, and daemon. Simpler topics use plain text trees instead.

When should I use a diff instead of a full diagram?▼

Use a diff when the point is what changes and the surrounding structure already exists, such as adding a component to a tree or a step to a call flow. Show the whole block only when most of it is new or context is needed.

Related Skills

Explore More Software Engineering Skills→
multiplex-aimultiplex-ai
2

deep-research

Coordinate firecrawl and exa searches to generate cited research reports.

Official
Advanced
richardmbaileyrichardmbailey

rb-explain-diff

Generate interactive HTML walkthroughs for code changes with validation.

Community
Advanced
stark-ai-destark-ai-de
4

repo-map-zoom-out

Map unfamiliar code areas by identifying entry points, callers, data flow, and ownership boundaries.

Official
Advanced
xpert-aixpert-ai
8

index

Convert Mermaid drafts into editable draw.io diagrams with version tracking.

Official
Intermediate