Skills
.Work. You
Rest

bee:visual-explainer

Community

Generate beautiful HTML diagrams and tables.

Software Engineering#html#mermaid#visualization#diagram#data table#code diff
Authorluanrodrigues
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of visually appealing, self-contained HTML pages for explaining complex systems, code changes, plans, and data, eliminating the need for manual diagramming or messy ASCII art.

Core Features & Use Cases

  • Diagram Generation: Create architecture diagrams, flowcharts, sequence diagrams, ER diagrams, state machines, and mind maps using Mermaid or CSS Grid.
  • Data Table Visualization: Render complex data tables as styled HTML pages, improving readability and usability over ASCII tables.
  • Code Diff Reviews: Generate HTML pages to visually compare code changes with detailed diffs and syntax highlighting.
  • Use Case: When asked to explain a system architecture, use this Skill to generate an interactive HTML diagram instead of a static image or text description. When about to render a large ASCII table, proactively convert it to an HTML table.

Quick Start

Use the bee:visual-explainer skill to generate an HTML diagram explaining the system architecture from the provided documentation.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: bee:visual-explainer
Download link: https://github.com/luanrodrigues/ia-frmwrk/archive/main.zip#bee-visual-explainer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.