Visual Explainer

Overview

Visual Explainer transforms technical information into publication-ready HTML pages. Whether explaining system architecture, code changes, metrics, or project plans, it generates visuals with keyboard navigation, focus states, and automatic dark-mode support—no external dependencies needed.

Highlights

• Renders Mermaid flowcharts, sequence diagrams, ER schemas, C4 models, and state machines with zoom and pan controls
• Produces fully self-contained HTML output with semantic markup
• Enforces keyboard accessibility, focus indicators, and reduced-motion support
• Supports slide decks and comparison layouts for presentations and reviews
• Optional Quick mode for lightweight JSON specifications with separate validation

Who should use it

Use this skill whenever technical output is inherently visual and ASCII art falls short. It clarifies architecture reviews, explains code diffs, summarizes data, and lays out strategic plans—turning complexity into accessible visuals that stakeholders can understand at a glance.