visual-explainer

An agent skill by nicobailon, from nicobailon/visual-explainer. Tags: data, design, documents, slides, web.

What it does

Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Use for diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks, and other visual explanations.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add nicobailon/visual-explainer --skill visual-explainer

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/nicobailon/visual-explainer
cp -r visual-explainer/plugins/visual-explainer ~/.claude/skills/visual-explainer

Safety box score

Grade D, elevated risk: 47 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill generates HTML explainers, slide decks, plans, and videos, mostly by writing into the local `~/.agent/diagrams/` workspace and by launching browser/ffmpeg tooling. The main risks are optional networked voice generation, local tool execution, and some behavior that lives in unread bundled files and vendor code.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	2 (moderate)	It launches local tools to do its work (`ffmpeg`, `ffprobe`, `playwright-core`, and `npx -y -p visual-explainer -p playwright-core visual-explainer-video`), and `video/driver.js` even evaluates timer callback strings with `eval`.
Network access	2 (moderate)	Video narration can call third-party TTS services (`https://api.elevenlabs.io`, `https://api.openai.com`, `https://fal.run`, `https://api.x.ai`), and the walkthrough flow opens real web apps in a browser.
Filesystem reach	2 (moderate)	The default jail is the home-directory path `~/.agent/diagrams/`, and commands render, rename, and fact-check files there rather than staying inside the project tree.
Secrets & credentials	2 (moderate)	`references/video.md` names `ELEVENLABS_API_KEY`, `OPENAI_API_KEY`, `XAI_API_KEY`, and `FAL_KEY`, and those keys are used to send narration text to external providers.
Privilege & persistence	1 (low)	The docs suggest broader installs such as `brew install ffmpeg` and `npm install -g playwright-core`, but there is no sudo, service registration, or shell/OS reconfiguration.
Instruction hijack surface	0 (none)	I did not find prompt-skipping or instruction-hiding behavior; the files repeatedly treat replies as data and keep edits scoped to the page or plan.
Irreversible actions	1 (low)	It can drive a browser, render videos, and overwrite generated outputs, but it does not push, publish, pay, book, or delete external resources.
Transparency	2 (moderate)	Important behavior is hidden in unread bundled files and vendor code (`kit/kit.css`, `kit/look.mjs`, `kit/vendor/pele.mjs`, `plan/render.mjs`, `mcp/server.mjs`), and some video/tooling paths depend on `npx`-fetched packages.

Before installing

Read `references/video.md` and decide whether third-party TTS providers are allowed to receive your narration text.
Check that you are comfortable with writes under `~/.agent/diagrams/` and that no sensitive files share that path.
Review the fallback installs (`brew install ffmpeg`, `npm install -g playwright-core`, `npx playwright-core ... install chromium-headless-shell`) before using video mode.
If you need a full audit, inspect the unread renderer files (`kit/kit.css`, `kit/look.mjs`, `kit/vendor/pele.mjs`, `plan/render.mjs`, `mcp/server.mjs`) in the repository first.

Rated 2026-10-19 by an automated review of 39 files from the skill's repository.

Source

Repository: nicobailon/visual-explainer (all skills from this repository)
Path: plugins/visual-explainer/SKILL.md
Branch: main
Updated: 2026-09-19

stitch::extract-static-html — Extract self-contained static HTML from a built web application or React components by inlining CSS and images.
api-and-interface-design — Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface.
archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
customer-journey-map — Create an end-to-end customer journey map with stages, touchpoints, emotions, pain points, and opportunities.
faceless-explainer — Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture.
guizang-ppt-skill — 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 +.