skills.rest
nuggocto
nuggoctoCOMMUNITY
Explore all skills by this author →
Website𝕏@nuggoctoGitHub

show-me

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

5|Updated Jan 31, 2026
Search Tags:#html#mermaid#visualization#diff#code explanation#diagrams#call tree
One-click install
npx skills add https://github.com/nuggocto/dotfiles --skill show-me-nuggocto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: show-me
Source: https://github.com/nuggocto/dotfiles/tree/main/opencode/skills/show-me
Command: npx skills add https://github.com/nuggocto/dotfiles --skill show-me-nuggocto

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 lands quickly. ## 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 sequence diagrams. - Diff-based change views: Shows what changes in a component, file layout, call tree, or control flow using minimal diff blocks. - Focused HTML artifacts: For layouts, state comparisons, or concepts too dense for Mermaid, writes a single styled HTML file matching the product's design and opens it for the user. - Use Case: While discussing a refactor, ask for a visual and receive a shallow file tree plus a diff showing exactly which modules move, placed next to a one-line explanation. ## Quick Start Ask the assistant to show you the current topic visually, for example by requesting a diagram of how the session submission 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 get a visual explanation of code during a chat?▼

Ask the assistant to show the topic visually and it will pick the smallest fitting format, such as pseudocode for logic, a call tree for runtime flow, or a Mermaid diagram for interactions. Prose is kept brief and each visual sits next to the text it supports.

What diagram types can this skill generate?▼

It produces pseudocode blocks, call trees, component trees with state and module boundaries, shallow file trees, Mermaid sequence diagrams, diff views of changes, and single-file HTML artifacts such as diagrams, infographics, or short slide decks.

When does it create an HTML file instead of a Mermaid diagram?▼

An HTML file is used for visual UI, layouts, state comparisons, or concepts too dense for Mermaid. The file matches the product's colors, type, spacing, and components, uses real labels and data, supports desktop and mobile, and is opened for the user.

How are code changes shown visually?▼

Changes are shown as diffs matched to the topic's shape: component trees for UI changes, file trees for layout changes, call trees for flow changes, and pseudocode for state or control-flow changes. Full blocks are shown only when most content is new or a copyable target is needed.

Does it require any scripts or external dependencies?▼

No. The skill is a pure instruction set in SKILL.md with no scripts, references, or assets directories. It relies on the assistant's built-in ability to render Markdown, Mermaid, diffs, and write HTML files.

Related Skills

Explore More Software Engineering Skills→
coreymaypraycoreymaypray
1

black-dating-convo

Generate culturally-grounded dating and relationship conversation content for the Black community.

Community
Advanced
Avishai-TsabariAvishai-Tsabari

pr-report

Generate maintainer-level HTML or Markdown PR review reports.

Community
Advanced
manuelbrandner85manuelbrandner85

diagramming-code

Generate Mermaid diagrams from Trailmark code graphs.

Community
Intermediate
openaeonopenaeon
87

excalidraw

Generate editable .excalidraw files from JSON element descriptions.

Community
Basic