skills.rest
MichielDean
MichielDeanCOMMUNITY
Explore all skills by this author →
GitHub

visual-explainer

Generate self-contained HTML diagrams and pages for complex technical concepts.

Updated Apr 27, 2026
Search Tags:#design#templates#html#mermaid#visualization#diagrams#data-tables
One-click install
npx skills add https://github.com/MichielDean/LLMem --skill visual-explainer-michieldean
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/MichielDean/LLMem/tree/main/skills/visual-explainer
Command: npx skills add https://github.com/MichielDean/LLMem --skill visual-explainer-michieldean

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data, enabling clear understanding without relying on static text alone.

Core Features & Use Cases

  • Create diagrams (architecture, diffs, plan reviews, project recaps) and data tables as standalone HTML pages.
  • Support multiple visual formats (Mermaid diagrams, HTML tables, KPI dashboards, image illustrations) with browser-friendly styling.
  • Provide an opinionated design workflow that ensures consistent palettes, typography, and accessibility across outputs.

Quick Start

Provide a visual explainer page for a topic by supplying a complete self-contained HTML document.

Frequently Asked Questions about visual-explainer

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

FAQPage Schema
How do I generate an HTML diagram to visualize software architecture?▼

To generate an HTML diagram for software architecture, provide your system details to produce a self-contained, browser-friendly HTML document. This output relies on CDN-hosted assets to render Mermaid visualizations and styled components for clear understanding.

What is the best way to create a visual review of code diffs?▼

Creating a visual review of code diffs involves converting changes into a standalone HTML page. This approach transforms complex textual differences into accessible visual representations, enabling clear understanding without relying on static text alone.

Can I use Mermaid diagrams and data tables in a single HTML page?▼

Yes, you can use Mermaid diagrams and HTML data tables in a single self-contained page. The output supports multiple visual formats, including KPI dashboards and image illustrations, ensuring browser-friendly styling across all components.

Do I need external libraries to view the generated visualization pages?▼

You do not need to install external libraries to view the generated visualization pages. The self-contained HTML documents rely on CDN-hosted assets for fonts and optional libraries, rendering directly in any standard browser.

How do I ensure consistent design and accessibility across multiple HTML visualizations?▼

To ensure consistent design and accessibility across HTML visualizations, the generation process applies an opinionated design workflow. This enforces consistent palettes and typography across all outputs, including project recaps and architecture overviews.

Can I build a KPI dashboard as a standalone HTML page?▼

Yes, you can build a KPI dashboard as a standalone HTML page. By supplying your metrics, you receive a browser-friendly document that formats data tables and visual representations using consistent styling and CDN-hosted assets.

Related Skills

Explore More Design & Creative Skills→
richardnguyen0715richardnguyen0715

architecture-diagram

Construct dark-themed SVG architecture diagrams in an HTML file.

Community
Intermediate
AJBcodingAJBcoding
4

d3-viz

Create custom interactive D3.js visualizations with data binding and responsive sizing.

Community
Intermediate
sandmark78sandmark78

data-analyst

Analyze raw data with SQL and Python to generate business insights.

Community
Advanced
pascallammerspascallammers
1

artifacts-builder

Generate interactive, self-contained HTML/JavaScript artifacts for embedding or standalone use.

Community
Basic