nicobailon/visual-explainer

Agent skill that generates rich HTML pages or slide decks for diagrams, diff reviews, plan audits, data tables, and project recaps

What it solves

Coding agents often rely on ASCII art and text-based tables to explain complex concepts, which quickly become unreadable in a terminal. This project provides a skill that allows agents to generate styled HTML pages instead, making system architectures, diff reviews, and requirement comparisons much easier to read.

How it works

The tool converts agent output into self-contained HTML pages that open directly in the browser. It supports interactive Mermaid diagrams with zoom and pan capabilities, as well as dark and light themes. It can be integrated as a plugin or skill for various AI agents (such as Claude Code, Cursor, and Pi) or run as a local stdio MCP server to expose rendering tools and prompt templates.

Who it’s for

Developers using AI coding agents who need clear, visual representations of complex technical data, architecture diagrams, and code reviews without leaving their workflow.

Highlights

  • Broad Agent Support: Compatible with Claude Code, Cursor, Pi, Antigravity CLI, Codex CLI, and OpenCode.
  • Interactive Visuals: Uses Mermaid for diagrams that support zooming and panning.
  • MCP Integration: Offers a local MCP server for standardized tool exposure.
  • No Build Step: Standard use requires no build step and only a web browser.
  • PPTX Export: Includes a utility to convert simple HTML slide decks to PowerPoint presentations.

Related

  • Project
    plannotator/effective-html

    A collection of specialized agent skills that enable AI agents to create self-contained HTML artifacts like wireframes, prototypes, and diagrams for better visual communication.

  • Project
    imxv/Pretty-mermaid-skills

    A local rendering tool that converts Mermaid diagram source into SVG, PNG, and ASCII formats, specifically designed for integration with AI agents and terminal-based workflows.

  • Project
    lgazo/drawio-mcp-server

    An MCP server that enables AI agents to programmatically create and modify Draw.io diagrams, automating the creation of architectural diagrams and flowcharts.

  • Project
    OrRon/EpicInfographics

    A skill for AI agents that enables the creation of professional, studio-quality infographics and animations by replacing generic templates with scene-based design and mathematical accuracy.

  • Project
    GiMi-Xiaomi/gimi-illustration-skill

    An AI Agent Skill that converts text articles and scripts into conceptual illustrations using customizable styles and consistent character IPs.