skills.rest
tyler-dot-earth
tyler-dot-earthCOMMUNITY
Explore all skills by this author →
Website𝕏@tyler_dot_earthGitHub

visual-explainer

Generate self-contained HTML pages explaining systems, code changes, plans, and data.

1|Updated Apr 13, 2015
Search Tags:#architecture#html#mermaid#visualization#diagrams#tables
One-click install
npx skills add https://github.com/tyler-dot-earth/.dotfiles --skill visual-explainer-tyler-dot-earth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-explainer
Source: https://github.com/tyler-dot-earth/.dotfiles/tree/main/agents/skills/visual-explainer
Command: npx skills add https://github.com/tyler-dot-earth/.dotfiles --skill visual-explainer-tyler-dot-earth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.

Core Features & Use Cases

  • Visual diagrams for architecture, data flows, and system relationships.
  • Self-contained HTML pages for diagrams, plans, and diffs.
  • Proactive rendering of large ASCII tables as styled HTML.
  • Supports diagrams, architecture overviews, diff reviews, plan reviews, project recaps, comparison tables, and other technical visual explanations.

Quick Start

Provide the content you want to visualize, and the skill will generate a self-contained HTML page ready to view in a browser.

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 from architecture or code changes?▼

You can generate self-contained HTML visual explanations by providing your architecture, code changes, or plan content. The skill produces browser-viewable HTML pages with optional Mermaid diagrams to visually explain systems and diffs.

Can I convert large ASCII tables into a styled HTML page?▼

Yes, large ASCII tables with four or more rows or three or more columns are proactively rendered as styled HTML pages instead of plain text. This ensures complex data tables are viewed as formatted visual explanations in a browser.

What is the best way to create a visual project recap or plan review?▼

Creating a visual project recap or plan review involves generating a self-contained HTML page that summarizes your plans and data. This approach turns complex technical concepts into browser-viewable visual explanations with optional diagrams.

Does this visualization approach support Mermaid diagrams within the HTML output?▼

Yes, Mermaid diagrams are supported as optional elements within the generated self-contained HTML pages. This allows you to visualize data flows, system relationships, and architecture overviews directly in the browser output.

Do I need any external dependencies to view the generated HTML visualizations?▼

No external dependencies are required to view the generated visualizations, as the skill produces self-contained HTML pages. Image generation via surf-cli is supported optionally when available, but the core HTML output functions independently.

Related Skills

Explore More Design & Creative Skills→
leonanpereirapintoleonanpereirapinto
1

visual-explainer

Generate self-contained HTML visual pages from Markdown content.

Community
Advanced
mateusdias96csmateusdias96cs

visual-explainer

Generate interactive HTML diagrams, tables, and slide decks for complex concepts.

Community
Advanced
regispswregispsw

visual-explainer

Generate self-contained HTML files from text-based diagram specifications using Mermaid.

Community
Advanced
ysoftmanysoftman
9

html-diagram

Render diagrams as self-contained HTML files with inline SVG and dark theme.

Community
Advanced