skills.rest
shrik450
shrik450COMMUNITY
Explore all skills by this author →
𝕏@shrikanthupGitHub

show-me

Generates terminal-styled HTML pages with diagrams and code sketches explaining the current topic.

Updated Apr 3, 2021
Search Tags:#html#mermaid#visualization#terminal#diff#code explanation#diagrams
One-click install
npx skills add https://github.com/shrik450/dotfiles --skill show-me-shrik450
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: show-me
Source: https://github.com/shrik450/dotfiles/tree/main/dot_claude/skills/show-me
Command: npx skills add https://github.com/shrik450/dotfiles --skill show-me-shrik450

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Explaining code structure, control flow, or UI architecture in plain prose is hard to follow. This Skill turns the current conversation topic into a single visual HTML page with concise diagrams, so the user can see the answer instead of reading it. ## Core Features & Use Cases - Multiple View Types: Renders pseudocode, call trees, component trees, file trees, Mermaid diagrams, and diffs, picking the smallest view that makes the point. - Terminal-Styled HTML Output: Delivers one dark-themed, monospace HTML file with color-coded diffs and CDN-rendered Mermaid diagrams, then opens it automatically. - Rich HTML Fallback: For dense UI or layout topics, switches to real HTML infographics styled to match the product, guided by the dataviz skill. - Use Case: While discussing a refactor, ask for a visual and receive an HTML page showing the before/after file tree and the updated call tree side by side. ## Quick Start Ask the assistant to show you visually how the current feature or code 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 structure or control flow in a conversation?▼

Ask for a visual explanation of the current topic. The skill picks the smallest fitting view, such as a call tree, component tree, or Mermaid diagram, and delivers it as one terminal-styled HTML file that opens automatically.

What diagram types can this skill generate?▼

It generates pseudocode blocks, call trees, component trees, file trees, Mermaid diagrams, and color-coded diffs. For dense UI or layout topics, it can switch to real HTML infographics styled to match the product.

How are Mermaid diagrams rendered in the output?▼

Mermaid diagrams are rendered inside the HTML page using the Mermaid script loaded from a CDN with a dark theme, so they display alongside the monospace terminal blocks.

When does the skill use real HTML instead of terminal blocks?▼

Real HTML is used only for visual UI, layout, state comparisons, or concepts too dense for a Mermaid diagram. On that path it invokes the dataviz skill for color, layout, and labeling rules.

What are the limitations of the terminal-styled output?▼

The output is a single static HTML file with no toolbar, tabs, navigation, or animation. It is designed for reading one focused explanation, not for interactive exploration or multi-page documentation.

Related Skills

Explore More Software Engineering Skills→
yersonargotevyersonargotev
1

espera-que

Re-explains the last point in neutral Spanish with brief missing context.

Community
Basic
franzenjbfranzenjb

experience-builder-help-creator

Generate embeddable two-column HTML documentation for ArcGIS Experience Builder apps.

Community
Basic
nexu-ionexu-io
93.2k

html-ppt-taste-brutalist

Generate 16:9 HTML presentation decks using a tactical-telemetry and CRT-terminal aesthetic.

Official
Intermediate
love-lenalove-lena

visual-explainer

Create illustrated explanations using simple visuals, labels, and minimal text.

Community
Basic