skills.rest
rockcookies
rockcookiesCOMMUNITY
Explore all skills by this author →
GitHub

show-me

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Long prose explanations of code structure, control flow, or UI layout are hard to follow. This Skill turns the current topic of conversation into compact visual explanations so the user grasps the key point quickly. ## Core Features & Use Cases - Multiple Visual Formats: Renders pseudocode blocks, call trees, component trees, file trees, Mermaid diagrams, and diffs depending on what best fits the topic. - Focused HTML Artifacts: For dense UI or concept explanations, writes a single focused HTML file (diagram, infographic, or slide deck) matching the product's styling and opens it for the user. - Use Case: While discussing a refactor, ask for a visual and receive a diff-shaped file tree showing which modules move, plus a Mermaid sequence diagram of the new request flow. ## Quick Start Ask the assistant to show you visually how the current feature's control 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 control flow in a conversation?▼

Ask for a visual explanation and the skill renders runtime control flow as a call tree or a Mermaid sequence diagram. It picks the smallest view that makes the key point clear, keeping prose brief.

What diagram types can show-me generate?▼

It produces pseudocode blocks, call trees, component trees with state annotations, shallow file trees, Mermaid diagrams, diffs for changes, and focused HTML artifacts such as infographics or short slide decks.

When should I use a Mermaid diagram versus an HTML file?▼

Use Mermaid for component interaction, control flow, or data flow that fits a standard diagram. Reserve a single HTML artifact for visual UI, layouts, state comparisons, or concepts too dense for Mermaid.

Can it show what changes in a refactor visually?▼

Yes, it uses diff-shaped visuals for component trees, file layouts, call trees, and state or control-flow changes, highlighting only the lines that change while preserving surrounding structure.

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

The skill instructs matching the product's colors, typography, spacing, and components, using real labels and data, and supporting both desktop and mobile before opening the file for the user.

Related Skills

Explore More Software Engineering Skills→
ormastesormastes

ui_design

Generate TUI and GUI mockups, component inventories, and interaction-flow diagrams.

Community
Intermediate
selrai-companyselrai-company

diagramming-expert

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

Official
Intermediate
byunghak-dablebyunghak-dable

github-pr-analyze

Analyze GitHub Pull Request changes and generate structural reports.

Community
Advanced
zaiyemeiyou404zaiyemeiyou404

excalidraw

Create JSON-based diagrams compatible with Excalidraw.

Community
Basic