Vibe Coding Discover

Skills

visual-explainer

View on GitHub

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

★ 9.9K655 forksHTMLMITnicobailon

Agent skill that turns verbose terminal output into self-contained styled HTML pages: Mermaid diagrams, diff reviews, plan audits, data tables, slide decks, and recaps. Installs into Claude Code, Pi, Codex, Cursor, OpenCode, and Antigravity, with optional MCP and PPTX export utilities.

Use Cases

Generate interactive Mermaid diagrams of system architectureRender diff reviews as styled HTML pagesAudit an implementation plan against requirementsConvert terminal table output into readable HTML data tablesProduce project recap pagesExport HTML slide decks to PPTXCompare requirements against a plan visuallyFact-check agent output with visual reportsReplace ASCII-art diagrams from coding agentsServe visual render tools over a local stdio MCP server

Built With

Language
HTML
Frameworks
Claude Code · Model Context Protocol · Mermaid · pptxgenjs · Pi · Codex CLI · Antigravity CLI · OpenCode · Cursor · OpenClaw · VS Code Copilot · Node.js

Tags

agent-skill · claude-code-plugin · mcp · html · diagrams · mermaid · slide-decks · diff-review · plan-review · visualization · pptx · codex · cursor · antigravity · opencode · project-recap