skills.rest
Yassimba
YassimbaCOMMUNITY
Explore all skills by this author →
GitHub

show-me

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

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

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 small, focused visuals so the user can grasp structure, behavior, and change at a glance. ## 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. - Change-focused diffs: Uses diff-shaped sketches to show exactly what changes in components, file layouts, call trees, or control flow. - Focused HTML artifacts: For visual UI, layouts, or concepts too dense for Mermaid, writes a single styled HTML diagram, infographic, or slide deck and opens it for the user. - Use Case: While discussing how a form submission flows through an app, ask for a visual and receive a Mermaid sequence diagram showing the user, UI, and daemon interaction. ## Quick Start Ask the agent 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 architecture in a chat with an AI agent?▼

Ask the agent to show the topic visually. The Skill picks the smallest fitting format, such as a Mermaid diagram for interactions, a component tree for UI structure, or a file tree for module responsibility, placed next to brief supporting text.

What diagram types can Mermaid render for software explanations?▼

Mermaid renders sequence diagrams, flowcharts, class relationships, and state or lifecycle diagrams. This Skill uses Mermaid for structure, behavior, and change, including data models, dependencies, and interactions.

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 Skill writes one focused HTML file matching the product's colors and components, then opens it for the user.

Can this Skill show what changed in a refactor visually?▼

Yes. It uses diff-shaped sketches to show changes in component trees, file layouts, call trees, and control flow, highlighting added and removed lines so the delta is the focus.

Does the show-me skill require any external tools or dependencies?▼

No external packages are required. It produces text-based diagrams and Mermaid blocks inline, and only uses a shell open command to display generated HTML files.

Related Skills

Explore More Software Engineering Skills→
wenermewenerme
7

slopus-happy-docs

Explain Happy Coder's internal documentation on protocol, encryption, and backend architecture.

Community
Basic
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
sjmyuansjmyuan
7

refactor-planner

Generate step-by-step TDD-based refactoring plans for code cleanup and architecture improvements.

Community
Intermediate
JaviMontanoJaviMontano

mermaid-diagramming

Generate syntactically valid Mermaid diagrams for architecture, flows, and technical documentation.

Community
Intermediate