Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts. Plans and PR explainers follow Plannotator's prescriptive approach; all other visual content delegates to nicobailon/visual-explainer.
Install
npx skills add backnotprop/plannotator --skill plannotator-visual-explainernpx skills add backnotprop/plannotator --skill plannotator-visual-explainer -a claude-code -gnpx skills add backnotprop/plannotator --skill plannotator-visual-explainer -a codex -ggemini skills install https://github.com/backnotprop/plannotator.git --path apps/skills/extra/plannotator-visual-explainergh skill install backnotprop/plannotator plannotator-visual-explainergit clone --depth 1 https://github.com/backnotprop/plannotator /tmp/backnotprop__plannotator
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/backnotprop__plannotator/apps/skills/extra/plannotator-visual-explainer ~/.claude/skills/plannotator-visual-explainer # Claude Code
cp -R /tmp/backnotprop__plannotator/apps/skills/extra/plannotator-visual-explainer ~/.agents/skills/plannotator-visual-explainer # Codex, Cursor, Gemini CLI, Copilot, OpenCode