This project provides an agent skill that transforms complex terminal output into rich, interactive HTML pages. It targets users of coding agents needing to visualize system architectures, review code diffs, audit plans, or analyze data tables, offering a significant improvement over unreadable ASCII art and box-drawing characters for clarity and shareability.

How It Works

The skill integrates with agent workflows, automatically generating HTML for complex data or via specific slash commands. It uses reference files (CSS, libraries) and HTML templates to create self-contained, styled pages. The system intelligently selects rendering approaches: Mermaid for diagrams, CSS Grid for architecture overviews, Chart.js for dashboards, and HTML tables for data. Output pages feature real typography, dual light/dark themes, and interactive elements like zoomable Mermaid diagrams. Templates are read fresh for each generation, enabling customization.

Quick Start & Requirements

Installation involves cloning the repository into an agent's skills directory (e.g., ~/.pi/agent/skills/visual-explainer) and copying prompt templates. A web browser is the sole non-default prerequisite. Optional image generation via Gemini Nano Banana Pro is available if surf-cli is installed.

Highlighted Details

• Generates self-contained HTML pages with real typography, dark/light themes, and interactive Mermaid diagrams (zoom/pan).
• Supports diverse visualization types: Mermaid, CSS Grid, Chart.js, and HTML tables.
• Includes five specialized prompt templates: /generate-web-diagram, /diff-review, /plan-review, /project-recap, and /fact-check.
• /diff-review offers comprehensive diff analysis including architecture, KPIs, code review, and decision logs.
• /plan-review validates implementation plans against the codebase, identifying risks and gaps.
• /project-recap provides context-switching aids via git activity analysis.

Maintenance & Community

No specific details regarding maintainers, community channels, or project roadmap were found in the provided README.

Licensing & Compatibility

The project is released under the MIT License, generally permitting broad use, modification, and distribution, including for commercial purposes.

Limitations & Caveats

Output requires a web browser for rendering; inline terminal display is not supported. Mermaid diagrams require a page refresh to update when switching OS themes. Visualization quality depends on the underlying AI model's capabilities.