plannotator-visual-explainer
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.
Profile →npx skills add backnotprop/plannotator --skill plannotator-visual-explainer --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Plannotator Visual Explainer Three paths depending on content type. Each has its own references and structure. ## Route by content type **Implementation plan, design doc, or proposal** → Follow the [Plan path](#plan-path). Read `references/design-system.md` and `references/svg-patterns.md`. Prescriptive structure. **PR explainer, diff review, or code change walkthrough** → Follow the [PR path](#pr-path). Read `references/design-system.md` and `references/pr-components.md`. Prescriptive structure. **Everything else** (architecture diagrams, data tables, slide decks, project recaps, general visual explanations) → Follow the [Visual explainer path](#visual-explainer-path). Delegates to nicobailon/visual-explainer with Plannotator theme tokens. ## Delivery Always deliver via Plannotator's annotation UI. Do NOT use `open` or `xdg-open`. For any deliverable that uses Mermaid, render every diagram with Mermaid 11 in both the light and dark palettes before opening the annotation UI. Rendering is a hard gate: an exception, empty SVG, or error output such as `aria-roledescription="error"` or `Syntax error in text` means the explainer is not deliverable. Fix the diagram or theme configurati
- Route by content type
- Delivery
- Plan path
- PR path
- Visual explainer path
- Design philosophy (all paths)
plannotator annotate <file> --gate plannotator annotate <file>
What does the plannotator-visual-explainer skill do?
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.
How do I install it?
Run `npx skills add backnotprop/plannotator --skill plannotator-visual-explainer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From backnotprop/plannotator, a repository with 7,510 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.