[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75048":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},75048,"visual-explainer","nicobailon\u002Fvisual-explainer","nicobailon","Agent skill that generates rich HTML pages or slide decks for diagrams, diff reviews, plan audits, data tables, and project recaps",null,"HTML",8734,585,39,20,0,22,105,607,66,114.3,"MIT License",false,"main",true,[],"2026-06-12 04:01:17","\u003Cp>\n  \u003Cimg src=\"banner.png\" alt=\"visual-explainer\" width=\"1100\">\n\u003C\u002Fp>\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:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-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> draw a diagram of our authentication flow\n> \u002Fdiff-review\n> \u002Fplan-review ~\u002Fdocs\u002Frefactor-plan.md\n```\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F55ebc81b-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\u002Flight themes, interactive Mermaid diagrams with zoom and pan. No build step, no dependencies beyond a browser.\n\n## Install\n\n| Harness | Support | Install path \u002F behavior |\n|---|---|---|\n| Claude Code | Marketplace plugin | Preserved marketplace shape with source at `plugins\u002Fvisual-explainer\u002F` |\n| Pi | Package metadata plus installer | `package.json` advertises the skill and prompts; `install-pi.sh` installs to `~\u002F.pi\u002Fagent\u002Fskills\u002Fvisual-explainer` and `~\u002F.pi\u002Fagent\u002Fprompts\u002F` |\n| Codex CLI | Native skill path plus optional prompts | Copy to `~\u002F.codex\u002Fskills\u002Fvisual-explainer`; optional prompts go in `~\u002F.codex\u002Fprompts\u002F` if your Codex build supports them |\n| OpenCode\u002Fopencode | Observed skill\u002Fcommand paths | Copy to `~\u002F.config\u002Fopencode\u002Fskill\u002Fvisual-explainer`; optional commands go in `~\u002F.config\u002Fopencode\u002Fcommand\u002F` |\n| Cursor | Rules-based guidance | Add the supplied `.mdc` rule; Cursor is not treated as native Agent Skills support |\n| OpenClaw | Lightweight AGENTS\u002Frules guidance | Use the supplied AGENTS guidance with the canonical skill directory |\n\n**Claude Code (marketplace):**\n```shell\n\u002Fplugin marketplace add nicobailon\u002Fvisual-explainer\n\u002Fplugin install visual-explainer@visual-explainer-marketplace\n```\n\nNote: Claude Code plugins namespace commands as `\u002Fvisual-explainer:command-name`.\n\n**Pi:**\n```bash\npi install git:github.com\u002Fnicobailon\u002Fvisual-explainer\n```\n\nOr from a local checkout:\n```bash\ngit clone --depth 1 https:\u002F\u002Fgithub.com\u002Fnicobailon\u002Fvisual-explainer.git\npi install .\u002Fvisual-explainer\n```\n\nThe package manifest advertises the canonical skill and command templates:\n\n```json\n\"pi\": {\n  \"skills\": [\".\u002Fplugins\u002Fvisual-explainer\"],\n  \"prompts\": [\".\u002Fplugins\u002Fvisual-explainer\u002Fcommands\"]\n}\n```\n\nIf you previously used the old curl\u002Fmanual installer, remove those copied files before using `pi install`; otherwise Pi will report skill and prompt conflicts because the user-level copies shadow the package resources:\n\n```bash\nrm -rf ~\u002F.pi\u002Fagent\u002Fskills\u002Fvisual-explainer\nrm -f ~\u002F.pi\u002Fagent\u002Fprompts\u002F{diff-review,fact-check,generate-slides,generate-visual-plan,generate-web-diagram,plan-review,project-recap,share-page}.md\n```\n\nThe legacy installer still works if you prefer copied files over package management:\n\n```bash\ncurl -fsSL https:\u002F\u002Fraw.githubusercontent.com\u002Fnicobailon\u002Fvisual-explainer\u002Fmain\u002Finstall-pi.sh | bash\n```\n\n**Codex CLI:**\n```bash\ngit clone --depth 1 https:\u002F\u002Fgithub.com\u002Fnicobailon\u002Fvisual-explainer.git \u002Ftmp\u002Fvisual-explainer\n\nmkdir -p ~\u002F.codex\u002Fskills ~\u002F.codex\u002Fprompts\ncp -R \u002Ftmp\u002Fvisual-explainer\u002Fplugins\u002Fvisual-explainer ~\u002F.codex\u002Fskills\u002Fvisual-explainer\n\n# Optional, only if your Codex build supports prompt templates:\ncp \u002Ftmp\u002Fvisual-explainer\u002Fplugins\u002Fvisual-explainer\u002Fcommands\u002F*.md ~\u002F.codex\u002Fprompts\u002F\n\nrm -rf \u002Ftmp\u002Fvisual-explainer\n```\n\nInvoke with `$visual-explainer` or ask Codex to use the `visual-explainer` skill. If prompts are installed and supported, use `\u002Fprompts:diff-review`, `\u002Fprompts:plan-review`, etc.\n\n**OpenCode\u002Fopencode:**\n```bash\ngit clone --depth 1 https:\u002F\u002Fgithub.com\u002Fnicobailon\u002Fvisual-explainer.git \u002Ftmp\u002Fvisual-explainer\n\nmkdir -p ~\u002F.config\u002Fopencode\u002Fskill ~\u002F.config\u002Fopencode\u002Fcommand\ncp -R \u002Ftmp\u002Fvisual-explainer\u002Fplugins\u002Fvisual-explainer ~\u002F.config\u002Fopencode\u002Fskill\u002Fvisual-explainer\n\n# Optional command templates:\ncp \u002Ftmp\u002Fvisual-explainer\u002Fplugins\u002Fvisual-explainer\u002Fcommands\u002F*.md ~\u002F.config\u002Fopencode\u002Fcommand\u002F\n\nrm -rf \u002Ftmp\u002Fvisual-explainer\n```\n\nActivate it by asking OpenCode to use the `visual-explainer` skill. Command-template behavior depends on the installed OpenCode\u002Fopencode build.\n\n**Cursor:**\n\nAdd `configs\u002Fcursor\u002Fvisual-explainer.mdc` to your Cursor rules, or copy its contents into the project rules UI. This is rules-based guidance that points Cursor at the canonical skill; it does not claim native Agent Skills support.\n\n**OpenClaw:**\n\nUse `configs\u002Fopenclaw\u002FAGENTS.md` as lightweight project guidance and copy or reference `plugins\u002Fvisual-explainer\u002F` as the canonical skill source. No native OpenClaw plugin adapter is included.\n\n## Commands\n\n| Command | What it does |\n|---------|-------------|\n| `\u002Fgenerate-web-diagram` | Generate an HTML diagram for any topic |\n| `\u002Fgenerate-visual-plan` | Generate a visual implementation plan for a feature or extension |\n| `\u002Fgenerate-slides` | Generate a magazine-quality slide deck |\n| `\u002Fdiff-review` | Visual diff review with architecture comparison and code review |\n| `\u002Fplan-review` | Compare a plan against the codebase with risk assessment |\n| `\u002Fproject-recap` | Mental model snapshot for context-switching back to a project |\n| `\u002Ffact-check` | Verify accuracy of a document against actual code |\n| `\u002Fshare-page` | 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\u002Fdiff-review --slides\n\u002Fproject-recap --slides 2w\n```\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F342d3558-5fcf-4fb2-bc03-f0dd5b9e35dc\n\n## How It Works\n\n```\n.claude-plugin\u002F\n├── plugin.json           ← marketplace identity\n└── marketplace.json      ← plugin catalog\nplugins\u002F\n└── visual-explainer\u002F\n    ├── .claude-plugin\u002F\n    │   └── plugin.json   ← plugin manifest\n    ├── SKILL.md           ← workflow + design principles\n    ├── commands\u002F          ← slash commands\n    ├── references\u002F        ← 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\u002F         ← reference templates with different palettes\n    │   ├── architecture.html\n    │   ├── mermaid-flowchart.html\n    │   ├── data-table.html\n    │   └── slide-deck.html\n    └── scripts\u002F\n        └── share.sh       ← deploy HTML to Vercel for sharing\n```\n\n**Output:** `~\u002F.agent\u002Fdiagrams\u002Ffilename.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- Generated HTML is portable and self-contained, but auto-opening depends on the harness, browser access, and sandbox rules.\n- All harnesses write visual output to `~\u002F.agent\u002Fdiagrams\u002F` unless the user asks for a different path.\n- Switching OS theme requires a page refresh for Mermaid SVGs.\n- `\u002Fshare-page` uses `plugins\u002Fvisual-explainer\u002Fscripts\u002Fshare.sh`, which expects a Pi-compatible `vercel-deploy` skill in a standard Pi skill location. Other harnesses can still generate and open pages, but sharing may need that dependency installed separately.\n- Results vary by model capability.\n\n## Credits\n\nBorrows ideas from [Anthropic's frontend-design skill](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills) and [interface-design](https:\u002F\u002Fgithub.com\u002FDammyjay93\u002Finterface-design).\n\n## License\n\nMIT\n","visual-explainer 是一个将复杂终端输出转换为易于阅读的富HTML页面或幻灯片的代理技能。它能够生成系统架构图、代码差异审查、计划审核、数据表和项目总结等，并以美观的HTML格式展示，支持深色\u002F浅色主题和交互式Mermaid图表，具备缩放和平移功能。无需额外构建步骤或依赖项，仅需浏览器即可运行。适用于需要清晰展示技术文档、代码审查结果或项目进度汇报的场景，特别适合开发团队和技术管理者使用。",2,"2026-06-11 03:52:04","high_star"]