Plannotator Visual Explainer

This is visual-explainer with Plannotator's opinionated structure layered on top. It routes you down three paths: implementation plans and design docs get a prescriptive format with timelines and architecture diagrams, PR explainers get diff rendering with risk chips and file tours, and everything else delegates to Nico's visual-explainer with Plannotator theme tokens swapped in. The plan and PR structures are strict about what belongs where, they ban time estimates, and they push whitespace hard. If you want a formatted explanation of technical work and you're already in the Plannotator ecosystem, this handles the routing and keeps the visual style consistent.

skills.sh installs: 13.9K
GitHub stars: 10K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add backnotprop/plannotator --skill plannotator-visual-explainer --agent claude-code

Installs into .claude/skills of the current project.

Files

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. Read references/design-system.md and references/svg-patterns.md. Prescriptive structure.

PR explainer, diff review, or code change walkthrough → Follow the 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. Delegates to nicobailon/visual-explainer with Plannotator theme tokens.