#7171st of 85 in Skills, plugins and rules

visual-explainer

Agent skill that renders diagrams, diff reviews and tables as styled HTML pages

Stars: 10.3k
License: MIT
Last commit: Oct 2026
Last release: Oct 2026
Language: JavaScript

Missed the latest GitHub check; these facts may be older.

Overview

An agent skill that makes a coding agent write a self-contained HTML page and open it in the browser, instead of printing ASCII diagrams and pipe tables. It ships command templates such as /diff-review and /plan-review, plus a local stdio MCP server, a native Pi tool, and optional PPTX and MP4 export. It installs as a Claude Code plugin or by copying the skill directory for Codex, Cursor, OpenCode and Antigravity.

Who it is for: Developers using coding agents who want readable diagrams and reviews

Strengths

Normal skill use needs only a browser: no build step, no runtime dependencies
Works across many harnesses: Claude Code, Codex, Cursor, OpenCode, Pi, Antigravity
MCP server is local stdio only, no LLM calls, writes confined to an output directory
Bundled commands for diff review, plan review, slides, fact-check and project recap

Weaknesses

Non-Claude harnesses need manual copy installs; prompt support varies by build
Video export needs ffmpeg, Chrome and playwright-core installed separately
PPTX export is a static utility for simple HTML slide decks only
Output quality depends on the agent model following the skill instructions

What it needs

no GPU
Needs Web browser, Node.js (optional MCP and PPTX utilities), ffmpeg, Chrome, playwright-core (optional video export)

Also in Skills, plugins and rules

See all 85

Also in Skills, plugins and rules
Rank	Project	Score
1	skillsAgent skills for planning, TDD, debugging and code review291.3k starsMIT	94 out of 100
2	eccAgents, skills, hooks and rules bundle for Claude Code, Codex and other harnesses279.5k starsMIT	94 out of 100
3	cavemanCuts token use in coding agents with terse replies and compressed inputs Live demo ↗ (opens in a new tab)111.9k starsApache-2.0	94 out of 100
#4	ponytailSkill prompt that makes coding agents write less code and add tests163.6k starsMIT	92 out of 100
#5	impeccableDesign skill with 24 commands and a detector for AI-generated frontends Live demo ↗ (opens in a new tab)81.2k starsApache-2.0	92 out of 100

How to choose

Check which agent it targets and whether it works with the version you run.
Read what it adds to every prompt; big rule sets cost tokens on each call.
Prefer add-ons you can turn off per project.

Health

Releases: Not checked
Top contributor: Not checked
Security advisories: Not checked
Package advisories: Not checked
OpenSSF Scorecard: Not checked

Not read for this project yet: each refresh reads the facts of a few projects. Bots and coding-agent accounts are left out of the commit counts. Not part of the score: how we check.

License in plain words

MIT Permissive

Use it at work: Yes
Change it and rebrand it: Yes
Sell it or host it for others: Yes

Your part: Keep the copyright and license notice in copies you ship.

A plain summary, not legal advice. Read the license on GitHub ↗ (opens in a new tab)

#71 of 85 in Skills, plugins and rules on Archestack, as of 15 Oct 2026.

In your README

The badge updates twice a day.

[![Archestack](https://archestack.com/badge/nicobailon/visual-explainer.svg)](https://archestack.com/best-of-vibe-coding/projects/visual-explainer/)

How badges work

On your site or blog

A card with the rank, score and signals, in light or dark to match the reader.

<iframe src="https://archestack.com/embed/best-of-vibe-coding/visual-explainer/" title="visual-explainer on Archestack" width="400" height="270" style="border:0;max-width:100%" loading="lazy"></iframe>

Preview the card

Best of Vibe Coding on GitHub

Each review comes from the project's README and facts we check on GitHub. The fix form opens with visual-explainer filled in.