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

It replaces unreadable ASCII art and monospace tables in terminal-based AI agents with styled, self-contained HTML pages. This solves the problem of complex diagrams, architecture flows, and large data comparisons becoming unreadable when rendered as plain text in a console.

How it works

It acts as an agent skill that generates HTML output instead of text. It supports interactive Mermaid diagrams with zoom and pan, dark/light themes, and professional typography. The project can be integrated as a plugin for various AI harnesses (like Claude Code, Cursor, and Pi) or as a local stdio MCP (Model Context Protocol) server that exposes rendering tools to the agent.

Who it’s for

Developers using AI coding agents who need to visualize system architectures, review code diffs, or compare complex requirements without leaving their workflow.

Highlights

  • Multi-Harness 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: Provides a local MCP server for rendering HTML and quick JSON specs.
  • Zero Build Step: Basic skill usage requires no build process and only a web browser for viewing.

Related

  • Project
    lessweb/deepcode-cli

    Deep Code CLI is a Node‑based terminal assistant tuned for DeepSeek‑v4 models. Install via `npm i -g @vegamo/deepcode-cli`, configure it with `~/.deepcode/settings.json`, and use slash commands (e.g., `/new`, `/model`, `/skills`) to chat, run custom agent skills, handle images, connect to external services via MCP, and control permissions. It shares settings with a VS Code plugin and supports notifications, web‑search scripts, and any OpenAI‑compatible endpoint.

  • Project
    VigoZhao/AI-Visual-Prompt-Cookbook

    A curated library of 116 JSON‑based visual‑prompt templates for AI image generation. Each style defines a reusable prompt with placeholders, fidelity anchors, and negative prompts, plus preview images. Users copy the `style.json` into a multimodal LLM (ChatGPT‑4‑Vision, Gemini‑Pro‑Image, etc.), fill in variables, and generate consistent poster‑style images. Includes validation script, multilingual docs, and an online gallery.

  • Project
    NomaDamas/slides-grab

    slides‑grab is a Node‑based CLI and browser editor that lets AI agents generate, visually select, and rewrite HTML slide decks, then export them to PDF, experimental PPTX, or Figma formats. It bundles 95 design styles, supports image‑native slides via Codex/OpenAI/Gemini providers, and includes validation, video download, and tldraw‑to‑SVG utilities. Requires Node ≥ 20 and Playwright for validation; MIT‑licensed.

  • Project
    ConardLi/easy-agent

    Easy Agent is a terminal‑based, TypeScript‑written coding assistant that streams chat with Claude, OpenAI, Gemini, Ollama and other LLMs, lets the model read/write files, run shell commands, browse the web, and be extended via plugins and multi‑agent teams. It is at release‑candidate stage, awaiting npm publication.

  • Project
    JimLiu/baoyu-design

    baoyu-design packages Claude Design as a local agent skill, enabling full‑featured UI/UX design (mockups, prototypes, decks, design‑system import, Figma .fig decoding, PPTX export, etc.) directly inside agents like Cursor, Claude Code, or Codex, with all artefacts stored as self‑contained HTML in your repo.