How does Visual Explainer handle large data tables?

The skill automatically detects tables with more than 4 rows or 3 columns and renders them as a styled HTML page instead of terminal ASCII art for better readability.

Are there different visual styles available?

Yes, you can choose from several constrained aesthetics such as Blueprint, Editorial, Paper/Ink, and various IDE-inspired color schemes like Dracula or Nord.

Can I publish the generated visuals online?

Yes, by using the 'publish' argument, the skill performs a quality check and deploys the HTML file via a script to provide an external URL.

What diagramming formats are supported?

It primarily leverages Mermaid.js for flowcharts, sequence diagrams, and schemas, but also utilizes CSS Grid for architecture cards and custom layouts.

Do I need a browser to use this skill?

While the generation occurs within the Claude Code environment, a web browser is required to view the resulting self-contained HTML files.

Visual Explainer

Name: Visual Explainer
Author: lev-os

bylev-os

•

设计工具

Generates high-quality, self-contained HTML visualizations and diagrams to explain complex technical concepts, system architectures, and data comparisons.

Visual Explainer transforms abstract technical data, code changes, and architectural plans into beautiful, interactive HTML pages, moving beyond the limitations of terminal-based ASCII art. It provides a sophisticated suite of layout tools including Mermaid.js diagrams, comparison matrices, and visual diff reviews that help developers and stakeholders better understand system logic. The skill proactively replaces dense terminal tables with styled browser views and includes professional aesthetic themes like Blueprint and Editorial, making it an essential tool for project recaps, implementation planning, and technical documentation.

主要功能

01Multiple high-fidelity aesthetic themes including Blueprint, Editorial, and Monochrome Terminal

021 GitHub stars

03Proactive replacement of complex terminal ASCII tables with interactive HTML data views

04Seamless Mermaid.js integration for flowcharts, sequence diagrams, and state machines

05Built-in quality gate system for responsive testing, fact-checking, and one-click publishing

06Automated HTML generation for diagrams, architecture overviews, and system lifecycles

使用场景

01Reviewing complex code diffs and architectural plans in a visual, easy-to-read browser format

02Visualizing system lifecycles, database schemas, and state transitions during the design phase

03Generating professional slide decks and project recaps for stakeholders directly from the command line

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lev-os/agents visual-explainer

For use in Claude.ai and ChatGPT