Visual-explainer is an agent skill that transforms complex technical output into polished, self-contained HTML pages. It serves as a plugin for AI coding agents (Claude Code, Pi, Cursor, Antigravity, Codex, OpenCode, MCP hosts) to generate diagrams, diff reviews, plan reviews, slide decks, narrated videos, and data tables instead of ASCII art. The architecture is modular: a core skill definition (`SKILL.md`) provides workflow and design rules, while separate subsystems handle plan rendering (`plan/render.mjs`), quick-mode JSON-to-HTML conversion (`quick/render.mjs`), a local stdio MCP server (`mcp/server.mjs`), a best-effort PPTX exporter (`pptx/export.mjs`), and a Playwright-based video renderer (`video/render.mjs`). The Pi agent integration includes a native TypeScript extension (`extension.ts`) with `prepare`, `render`, and `render_quick` actions. The codebase demonstrates high craftsmanship with thorough input validation, security-conscious file handling (symlink rejection, atomic writes, output jail), clear error messages, and extensive documentation. The plan renderer is particularly notable as a zero-dependency HTML generator that validates plan structure, reads cited code from disk, and produces interactive pages with decision trees, comments, and keyboard navigation. The quick renderer validates JSON specs against a JSON Schema and produces complete HTML. The MCP server follows the Model Context Protocol strictly and exposes tools, prompts, and resources without calling an LLM or starting an HTTP listener. The video renderer uses Playwright to drive a virtual clock, ensuring frame-perfect timing. The repository is actively maintained with recent commits, a detailed changelog, and version consistency checks across all metadata files.