skills.rest
stamatim
stamatimCOMMUNITY
Explore all skills by this author →
GitHub

visual-explainer

Convert terminal outputs, diagrams, and data tables into standalone HTML pages.

Updated Aug 23, 2026
Search Tags:#documentation#html#mermaid#rendering#diagrams#diff-review#visual
One-click install
npx skills add https://github.com/stamatim/agent-skills --skill visual-explainer-stamatim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/stamatim/agent-skills/tree/main/.agents/skills/visual-explainer
Command: npx skills add https://github.com/stamatim/agent-skills --skill visual-explainer-stamatim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converts complex terminal outputs, diagrams, and data tables into self-contained, browser-ready HTML pages for easier reading and sharing.

Core Features & Use Cases

  • Automatically renders visuals for diagrams, diffs, architectures, and data tables as HTML
  • Proactively renders 4+ row or 3+ column tables into HTML to avoid ASCII tables in terminals
  • Generates self-contained HTML pages that can be opened in a browser and shared

Quick Start

Provide input and the skill will generate a browser-ready visual HTML page you can view immediately

Frequently Asked Questions about visual-explainer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert complex terminal outputs into readable HTML?▼

To convert complex terminal outputs into HTML, provide the output to the skill, which translates it into a self-contained, browser-ready HTML page for easier reading and sharing. The generated file is saved under ~/.agent/diagrams/.

What is the best way to render Mermaid diagrams as standalone HTML?▼

Rendering Mermaid diagrams as standalone HTML involves passing the diagram code to the skill, which generates a self-contained HTML page with repository-wide CSS patterns applied and opens it in a browser automatically.

How do I automatically render large data tables as HTML instead of ASCII?▼

Tables with 4+ rows or 3+ columns are automatically rendered as HTML instead of ASCII terminal tables to prevent misalignment and improve readability. The skill proactively enforces this rule during output generation.

Does the visual HTML output require external dependencies to open in a browser?▼

The visual HTML output does not require external dependencies to open in a browser because the skill generates self-contained pages. It enforces frontmatter-based metadata and repository-wide CSS patterns internally.

Can I use this for diff reviews and architecture diagrams?▼

Yes, you can use this for diff reviews and architecture diagrams. The skill applies visual explanations to various inputs, translating complex diffs and architectures into self-contained, browser-ready HTML pages.

Related Skills

Explore More Software Engineering Skills→
pixbpixb

mermaid-visualizer

Convert textual content into Mermaid diagrams for rendering in Obsidian, GitHub, or Mermaid Live Editor.

Community
Basic
phrazzldphrazzld
13

visualize

Generate self-contained HTML diagrams from system descriptions using Mermaid.

Community
Advanced
palucdevpalucdev
3

html-renderer

Convert Markdown content into a single HTML file with inline CSS.

Community
Basic
alexandereiseghohialexandereiseghohi

plantuml-ascii

Convert PlantUML definitions into ASCII art diagrams via command-line tools.

Community
Basic