🎨 Design

visual-explainer

Name: visual-explainer
Author: nicobailon

by nicobailon3 months ago9.4k

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

npx skills add https://github.com/nicobailon/visual-explainer --skill visual-explainer

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/nicobailon--visual-explainer--plugins--visual-explainer/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@plannotator

"🤝 @nicopreme HTML explainers are better when you can interact with them and give feedback directly to the agent, or share them with colleagues and collect..."

X@nicopreme

"Good post! Also check out the visual-explainer skill for generating rich explanatory HTML pages or slide decks. Almost at 8K stars now! 🙌"