skills.rest
xriu
xriuCOMMUNITY
Explore all skills by this author →
GitHub

show-me

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

2|2|Updated Dec 23, 2017
Search Tags:#html#mermaid#visualization#diff#code explanation#diagrams#component tree
One-click install
npx skills add https://github.com/xriu/dotfiles --skill show-me-xriu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: show-me
Source: https://github.com/xriu/dotfiles/tree/main/home/.skills/show-me
Command: npx skills add https://github.com/xriu/dotfiles --skill show-me-xriu

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 becomes clear at a glance. ## Core Features & Use Cases - Multiple visual formats: Renders logic as pseudocode, runtime flow as call trees, UI as component trees, structure 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 context already exists. - Focused HTML artifacts: Writes a single styled HTML diagram, infographic, or slide deck for visual UI or dense concepts, then opens it for the user. - Use Case: While discussing how a form submission flows through sessions and transport layers, ask for a visual and receive a Mermaid sequence diagram plus a shallow file tree showing module responsibilities. ## Quick Start Ask the assistant to show you the current topic visually, for example by requesting a diagram of how the save flow works.

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 conversation?▼

Ask for a visual of the current topic and the Skill picks the smallest fitting format: component trees for UI structure, file trees for module responsibilities, or call trees for runtime flow. Each visual sits next to brief supporting text.

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 views for changes, and standalone HTML artifacts for dense visual concepts.

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

Use a diff when the point is what changes and the surrounding structure already exists. Show the whole block when most of it is new, when omitted context would hide ownership or order, or when the user needs a copyable target shape.

Can it generate HTML infographics or slide decks?▼

Yes, for visual UI, layouts, state comparisons, or concepts too dense for Mermaid, it writes one focused HTML file matching the product's colors, type, and spacing, then opens it with the system open command.

Why does the visual output skip detailed prose explanations?▼

The Skill is designed to keep prose brief and place each visual next to the short text it supports. It includes only the calls, files, props, and states needed to answer the current question, avoiding overwhelming output.

Related Skills

Explore More Software Engineering Skills→
drimchanskydrimchansky

explain

Explain code, features, and architecture by reading code and tracing calls.

Community
Intermediate
selrai-companyselrai-company

diagramming-expert

Create ASCII and Unicode diagrams for systems, processes, and hierarchies.

Official
Intermediate
fagemxfagemx

plan-validate

Validate implementation plans against code, call chains, constraints, and test cases.

Community
Advanced
AnyGenIOAnyGenIO
66

anygen-diagram

Generate diagrams and flowcharts from prompts via AnyGen OpenAPI.

Official
Advanced