skills.rest
staticaland
staticalandCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

show-me

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

4|Updated Jan 29, 2026
Search Tags:#mermaid#visualization#diff#code explanation#html artifact#diagrams#call tree
One-click install
npx skills add https://github.com/staticaland/skills --skill show-me-staticaland
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: show-me
Source: https://github.com/staticaland/skills/tree/main/plugins/show-me/skills/show-me
Command: npx skills add https://github.com/staticaland/skills --skill show-me-staticaland

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Dense technical explanations in plain prose are hard to scan. This Skill turns the current topic of conversation into compact visuals so the key point lands immediately. ## Core Features & Use Cases - Multiple visual formats: Renders logic as pseudocode, runtime flow as call trees, UI as component trees, file responsibility as file trees, and interactions as Mermaid diagrams. - Diff-based change views: Shows what changes in a component, file layout, call tree, or control flow using diff notation when surrounding shape already exists. - Focused HTML artifacts: Writes a single diagram, infographic, or short slide deck matching the product's colors and components for concepts too dense for Mermaid, then opens it. - Use Case: While discussing how a slash command expands into a skill invocation, ask for a visual and get a call tree or sequence diagram showing exactly which functions run and in what order. ## Quick Start Ask the assistant to show you visually how the current feature or 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 architecture or control flow in a conversation?▼

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

What diagram formats does this visual explanation skill support?▼

It supports pseudocode blocks, call trees, TSX component trees, file trees, Mermaid diagrams such as sequence diagrams, diff-style change views, and single-file HTML artifacts like infographics or short slide decks.

When should I use an HTML artifact instead of a Mermaid diagram?▼

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

Can it show what changed in a refactor instead of the full structure?▼

Yes. When the surrounding shape already exists, it uses diff notation to show only what changes in a component tree, file layout, call tree, or control flow, keeping the focus on the delta.

Does this skill require any external tools or dependencies?▼

No external dependencies are required. Visuals are rendered as Markdown code blocks and Mermaid inline; only the optional HTML artifact uses a shell open command to display the generated file.

Related Skills

Explore More Software Engineering Skills→
dennisccydennisccy

iterative-retrieval

Orchestrate a 4-phase iterative retrieval loop to refine subagent codebase context.

Community
Advanced
erfanzarerfanzar
27

architecture-diagram

Generate standalone HTML diagrams with inline SVG from textual system descriptions.

Community
Advanced
AO-HySAO-HyS

show-me

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

Official
Intermediate
xpert-aixpert-ai
8

index

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

Official
Intermediate