{"id":44824175,"url":"https://github.com/nicobailon/visual-explainer","last_synced_at":"2026-03-06T05:55:04.497Z","repository":{"id":338854262,"uuid":"1159484260","full_name":"nicobailon/visual-explainer","owner":"nicobailon","description":"Agent skill + prompt templates that generate rich HTML pages for visual diff reviews, architecture overviews, plan audits, data tables, and project recaps","archived":false,"fork":false,"pushed_at":"2026-02-16T20:26:09.000Z","size":2491,"stargazers_count":132,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-17T01:56:45.821Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicobailon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-16T19:33:52.000Z","updated_at":"2026-02-17T01:56:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/nicobailon/visual-explainer","commit_stats":null,"previous_names":["nicobailon/visual-explainer"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/nicobailon/visual-explainer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicobailon%2Fvisual-explainer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicobailon%2Fvisual-explainer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicobailon%2Fvisual-explainer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicobailon%2Fvisual-explainer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicobailon","download_url":"https://codeload.github.com/nicobailon/visual-explainer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicobailon%2Fvisual-explainer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29637400,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T22:32:43.237Z","status":"ssl_error","status_checked_at":"2026-02-19T22:32:38.330Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-16T21:07:43.981Z","updated_at":"2026-03-06T05:55:04.471Z","avatar_url":"https://github.com/nicobailon.png","language":"HTML","readme":"\u003cp\u003e\n  \u003cimg src=\"banner.png\" alt=\"visual-explainer\" width=\"1100\"\u003e\n\u003c/p\u003e\n\n# visual-explainer\n\n**An agent skill that turns complex terminal output into styled HTML pages you actually want to read.**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](LICENSE)\n\nAsk your agent to explain a system architecture, review a diff, or compare requirements against a plan. Instead of ASCII art and box-drawing tables, it generates a self-contained HTML page and opens it in your browser.\n\n```\n\u003e draw a diagram of our authentication flow\n\u003e /diff-review\n\u003e /plan-review ~/docs/refactor-plan.md\n```\n\nhttps://github.com/user-attachments/assets/55ebc81b-8732-40f6-a4b1-7c3781aa96ec\n\n## Why\n\nEvery coding agent defaults to ASCII art when you ask for a diagram. Box-drawing characters, monospace alignment hacks, text arrows. It works for trivial cases, but anything beyond a 3-box flowchart turns into an unreadable mess.\n\nTables are worse. Ask the agent to compare 15 requirements against a plan and you get a wall of pipes and dashes that wraps and breaks in the terminal. The data is there but it's painful to read.\n\nThis skill fixes that. Real typography, dark/light themes, interactive Mermaid diagrams with zoom and pan. No build step, no dependencies beyond a browser.\n\n## Install\n\n**Claude Code (marketplace):**\n```shell\n/plugin marketplace add nicobailon/visual-explainer\n/plugin install visual-explainer@visual-explainer-marketplace\n```\n\nNote: Claude Code plugins namespace commands as `/visual-explainer:command-name`.\n\n**Pi (manual):**\n```bash\n# Clone the repo\ngit clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer\n\n# Install skill\ncp -r /tmp/visual-explainer/plugins/visual-explainer ~/.pi/agent/skills/visual-explainer\n\n# Install prompt templates (slash commands)\ncp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.pi/agent/prompts/\n\n# Cleanup\nrm -rf /tmp/visual-explainer\n```\n\n**OpenAI Codex:**\n```bash\ngit clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer\n\n# Install skill\ncp -r /tmp/visual-explainer/plugins/visual-explainer ~/.agents/skills/visual-explainer\n\n# Optional: Install slash commands (deprecated, but works)\nmkdir -p ~/.codex/prompts\ncp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.codex/prompts/\n\nrm -rf /tmp/visual-explainer\n```\n\nInvoke with `$visual-explainer` or let Codex activate it implicitly. With prompts installed, use `/prompts:diff-review`, `/prompts:plan-review`, etc.\n\n## Commands\n\n| Command | What it does |\n|---------|-------------|\n| `/generate-web-diagram` | Generate an HTML diagram for any topic |\n| `/generate-visual-plan` | Generate a visual implementation plan for a feature or extension |\n| `/generate-slides` | Generate a magazine-quality slide deck |\n| `/diff-review` | Visual diff review with architecture comparison and code review |\n| `/plan-review` | Compare a plan against the codebase with risk assessment |\n| `/project-recap` | Mental model snapshot for context-switching back to a project |\n| `/fact-check` | Verify accuracy of a document against actual code |\n| `/share` | Deploy an HTML page to Vercel and get a live URL |\n\nThe agent also kicks in automatically when it's about to dump a complex table in the terminal (4+ rows or 3+ columns) — it renders HTML instead.\n\n## Slide Deck Mode\n\nAny command that produces a scrollable page supports `--slides` to generate a slide deck instead:\n\n```\n/diff-review --slides\n/project-recap --slides 2w\n```\n\nhttps://github.com/user-attachments/assets/342d3558-5fcf-4fb2-bc03-f0dd5b9e35dc\n\n## How It Works\n\n```\n.claude-plugin/\n├── plugin.json           ← marketplace identity\n└── marketplace.json      ← plugin catalog\nplugins/\n└── visual-explainer/\n    ├── .claude-plugin/\n    │   └── plugin.json   ← plugin manifest\n    ├── SKILL.md           ← workflow + design principles\n    ├── commands/          ← slash commands\n    ├── references/        ← agent reads before generating\n    │   ├── css-patterns.md   (layouts, animations, theming)\n    │   ├── libraries.md      (Mermaid, Chart.js, fonts)\n    │   ├── responsive-nav.md (sticky TOC for multi-section pages)\n    │   └── slide-patterns.md (slide engine, transitions, presets)\n    ├── templates/         ← reference templates with different palettes\n    │   ├── architecture.html\n    │   ├── mermaid-flowchart.html\n    │   ├── data-table.html\n    │   └── slide-deck.html\n    └── scripts/\n        └── share.sh       ← deploy HTML to Vercel for sharing\n```\n\n**Output:** `~/.agent/diagrams/filename.html` → opens in browser\n\nThe skill routes to the right approach automatically: Mermaid for flowcharts and diagrams, CSS Grid for architecture overviews, HTML tables for data, Chart.js for dashboards.\n\n## Limitations\n\n- Requires a browser to view\n- Switching OS theme requires a page refresh for Mermaid SVGs\n- Results vary by model capability\n\n## Credits\n\nBorrows ideas from [Anthropic's frontend-design skill](https://github.com/anthropics/skills) and [interface-design](https://github.com/Dammyjay93/interface-design).\n\n## License\n\nMIT\n","funding_links":[],"categories":["🌟 Star Features","HTML","🧠 Agent Skills"],"sub_categories":["1. [GitHub Copilot Official SDK Pipe](https://openwebui.com/posts/github_copilot_official_sdk_pipe_ce96f7b4) ![v0.10.0](https://img.shields.io/badge/v0.10.0-blue?style=flat-square) ![active-dev](https://img.shields.io/badge/active--dev-orange?style=flat-square) ![downloads](https://img.shields.io/endpoint?url=https%3A%2F%2Fgist.githubusercontent.com%2FFu-Jie%2Fdb3d95687075a880af6f1fba76d679c6%2Fraw%2Fbadge_post_aef940e01073e811a311c3a443d9c149_dl.json\u0026style=flat-square) ![views](https://img.shields.io/endpoint?url=https%3A%2F%2Fgist.githubusercontent.com%2FFu-Jie%2Fdb3d95687075a880af6f1fba76d679c6%2Fraw%2Fbadge_post_aef940e01073e811a311c3a443d9c149_vw.json\u0026style=flat-square)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicobailon%2Fvisual-explainer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicobailon%2Fvisual-explainer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicobailon%2Fvisual-explainer/lists"}