plannotator-visual-explainer

Generates self-contained HTML visualizations themed with Plannotator tokens, covering implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and other visual explanations of technical concepts. Content is routed down one of three paths based on type. Implementation plans, design docs, and proposals follow a prescriptive Plan path; PR walkthroughs and diff reviews follow a prescriptive PR path; everything else (diagrams, tables, decks, recaps, comparisons) is delegated to the nicobailon/visual-explainer skill with Plannotator theme tokens applied as a color and typography override.

Each path reads its own reference files before generating. The Plan path consults design-system.md and svg-patterns.md and builds documents from ordered sections such as a header, a three-to-five card summary strip, a phase-based timeline with no time estimates, inline SVG architecture or data-flow diagrams, HTML and CSS mockups, dark-theme code blocks for architecturally significant interfaces, a risks-and-mitigations table with severity badges, and open-question callouts. The PR path reads design-system.md and pr-components.md and assembles a header meta strip, a TL;DR card, a why and before-after comparison, collapsible per-file tour cards with NEW, MOD, or DEL badges, a tiered risk map, focus callouts, a test plan checklist, and an optional rollout section, using Pierre diffs via CDN for syntax-highlighted inline diffs.

Output is always delivered through Plannotator's annotation UI rather than a browser open command. Plans and proposals that a user should approve or deny are delivered with the gate flag (plannotator annotate <file> --gate), while informational content is delivered without it. A shared design philosophy governs all paths: whitespace is treated as a feature with generous padding, one idea is shown per viewport, relationships and sequencing are shown through diagrams and timelines rather than described, and time estimates are never attached to phases.