skills.rest
AO-HyS
AO-HySOFFICIAL
Explore all skills by this author →
WebsiteGitHub

show-me

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

Updated Jun 28, 2026
Search Tags:#mermaid#visualization#diff#code explanation#html artifact#diagrams#call tree
One-click install
npx skills add https://github.com/AO-HyS/aohys.com --skill show-me-ao-hys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: show-me
Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/show-me
Command: npx skills add https://github.com/AO-HyS/aohys.com --skill show-me-ao-hys

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 the smallest visual that makes the key point clear, whether that is pseudocode, a call tree, a component tree, a Mermaid diagram, a diff, or a focused HTML artifact. ## Core Features & Use Cases - Multiple visual formats: Renders logic as pseudocode, runtime flow as call trees, UI structure as component trees, file responsibility as shallow file trees, and interactions as Mermaid sequence diagrams. - Change-focused diffs: Shows component, file-layout, call-tree, and control-flow changes as diffs when the point is what changed. - Focused HTML artifacts: Produces a single diagram, infographic, or short slide deck matching the product's colors, type, and spacing for concepts too dense for Mermaid, then opens it for the user. - Use Case: While reviewing a refactor, ask for a visual of the new session flow and receive a call tree plus a diff showing exactly which calls were added or removed. ## Quick Start Ask the assistant to show you the current topic visually, for example by requesting a diagram of the session submission flow.

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 topic and the Skill picks the smallest fitting format: component trees for UI structure, shallow file trees for module responsibility, or call trees for runtime control flow. Each visual is placed next to the short text it supports.

How to show what changed in a refactor visually?▼

Use diff-shaped visuals when the point is what changed. The Skill supports diffs for component trees, file layouts, call trees, and control flow, highlighting added and removed lines while keeping surrounding context.

When should I use Mermaid versus an HTML diagram?▼

Use Mermaid for component interaction, control flow, or data flow such as sequence diagrams. Use a single focused HTML file when the concept is too dense for Mermaid, such as visual UI layouts, state comparisons, or infographics.

Can the HTML artifact match my product's design?▼

Yes. HTML artifacts are expected to match the product's colors, typography, spacing, and components, use real labels and data, and support both desktop and mobile viewports before being opened for the user.

What are the limitations of text-based diagrams?▼

Pseudocode, call trees, and file trees work best for small, focused slices of logic. They lose clarity for dense visual layouts or large state comparisons, which is when a Mermaid diagram or a dedicated HTML artifact is the better choice.

Related Skills

Explore More Software Engineering Skills→
OrinksOrinks
24

analyze

Analyze repository code to produce ranked, evidence-based interpretations with file references.

Community
Advanced
Avishai-TsabariAvishai-Tsabari

pr-report

Generate maintainer-level HTML or Markdown PR review reports.

Community
Advanced
amirbironamirbiron

pairing

Builds work in reviewable pieces, pausing for feedback before starting each next piece.

Community
Advanced
partme-aipartme-ai
610

drawio-architecture

Create draw.io architecture diagrams with shapes, templates, and collaboration guidance.

Official
Basic