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.
PPTist is a full-featured web-based slide editor and presentation application, built with Vue 3, TypeScript, and Pinia. It replicates core PowerPoint functionality entirely in the browser, supporting text, image, shape, line, chart, table, video, audio, and LaTeX elements. Users can create, edit, animate, and present slides, with import/export support for PPTX, PDF, images, and a custom .pptist format. An AI-assisted slide generation feature allows users to input a topic and receive a complete slide deck via an external API, with template-based layout and image selection. The architecture is a single-page application with a custom canvas rendering system, rich text editing via ProseMirror, and state management through Pinia stores. The editor is divided into three main modes: Editor (full editing with thumbnails, toolbar, and canvas), Screen (presentation with speaker notes, audience view, writing board, and laser pointer), and Mobile (basic editing and preview for touch devices). Data persistence uses IndexedDB via Dexie for undo/redo snapshots, and slide data is stored as JSON in Pinia stores. External dependencies include ECharts for charts, pptxgenjs for PPTX export, and a backend server for AI generation and image search. Key entry points include src/App.vue (top-level routing), src/views/Editor/index.vue (main editor), src/views/Screen/index.vue (presentation mode), and src/views/Mobile/index.vue (mobile mode). Data flows center on the slide store: user actions trigger mutations captured as snapshots for undo/redo, export processes convert internal JSON to target formats, and import parses external files into the internal schema. The AI PPT flow sends a user prompt to the backend, receives an outline and slide data, then fills template slides with content and images. The application is actively maintained with a large community (9386 stars, 1770 forks) and is licensed under AGPL-3.0. It relies on an external backend for AI features and image search, meaning those features are not self-contained. The codebase is well-structured but lacks automated tests, and some components (e.g., HTML parser, shape library) are self-contained and potentially reusable in other projects.