skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

visual-explainer

Generate self-contained HTML pages explaining systems, diffs, and data tables.

Updated Aug 23, 2026
Search Tags:#html#mermaid#visualization#code-review#diagram#data-table#surf-cli
One-click install
npx skills add https://github.com/leonardoacosta/central-claude --skill visual-explainer-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/leonardoacosta/central-claude/tree/main/skills/visual-explainer
Command: npx skills add https://github.com/leonardoacosta/central-claude --skill visual-explainer-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Long, complex technical explanations, diffs, and tables are hard to read in plain text or ASCII art. This Skill removes that friction by producing self-contained, styled HTML pages that make architecture, plans, diffs, and data tables instantly understandable and shareable.

Core Features & Use Cases

  • Self-contained HTML output for architecture diagrams, flowcharts, sequence/state diagrams, data tables, timelines, and dashboards.
  • Mermaid and Chart.js integration for automatic layout and charts with required zoom and pan controls for readability.
  • Proactive table rendering: automatically render tables with 4+ rows or 3+ columns as HTML pages instead of ASCII tables.
  • Templates and CSS patterns for varied aesthetics (editorial, blueprint, neon dashboard, hand-drawn) and accessibility-ready color/theme handling.
  • Optional AI image embedding when surf-cli is available to create illustrative hero banners or inline concept art.
  • Output and workflow guidance: write artifacts to docs/diagrams/, perform quality checks, and report the resulting file path.

Quick Start

Generate a standalone HTML explainer for a code diff and save the file to docs/diagrams/filename.html.

Frequently Asked Questions about visual-explainer

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

FAQPage Schema
How do I convert a code diff into a visual HTML page for review?▼

To convert a code diff into a visual HTML page, this Skill generates a self-contained, styled HTML file with inline CSS and optional Mermaid diagrams. It produces an accessible standalone explainer that makes complex changes instantly readable and shareable in a browser.

What is the best way to visualize architecture diagrams without ASCII art?▼

The best way to visualize architecture diagrams without ASCII art is generating standalone HTML pages. This Skill integrates Mermaid for automatic layout and includes zoom and pan controls, ensuring complex systems and flowcharts are instantly understandable.

How do I render large data tables as HTML instead of plain text?▼

To render large data tables as HTML, this Skill proactively converts tabular data with four or more rows or three or more columns into standalone HTML pages. It outputs styled, accessible files instead of plain text or ASCII tables for better readability.

Can I use Chart.js and Mermaid together in a self-contained HTML file?▼

Yes, you can use Chart.js and Mermaid together in a self-contained HTML file. This Skill embeds both libraries via CDN, adding required zoom and pan controls for Mermaid diagrams, to produce rich visual explainers with inline CSS.

Do I need any external dependencies to generate visual HTML explainers?▼

You do not need any external dependencies to generate visual HTML explainers. The Skill produces self-contained HTML files with inline CSS and CDN-hosted Mermaid or Chart.js, although optional surf-cli integration can embed AI images if available.

Where are generated HTML diagram files saved during a project recap?▼

Generated HTML diagram files are saved to the docs/diagrams/ directory during a project recap. The Skill performs quality checks on the standalone visual explainers and reports the resulting clear file path for easy access and sharing.

Related Skills

Explore More Software Engineering Skills→
luanrodriguesluanrodrigues
2

bee:visual-explainer

Generate self-contained HTML pages for visual explanations using Mermaid and CSS templates.

Community
Advanced
53able53able

visual-explainer

Generate standalone HTML pages from terminal output with Mermaid.js diagrams.

Community
Advanced
diegopetruccidiegopetrucci
21

visual-explainer

Generate self-contained HTML visual explanations for systems and code changes.

Community
Intermediate
ObservatoriodomosObservatoriodomos

visual-explainer

Generate self-contained HTML pages that visually explain complex technical information.

Community
Advanced