skills.rest
Yassimba
YassimbaCOMMUNITY
Explore all skills by this author →
GitHub

plannotator-visual-explainer

Generate self-contained HTML visualizations for implementation plans, PR explainers, and technical diagrams.

9|Updated Jul 17, 2026
Search Tags:#code review#mermaid#implementation plan#plannotator#svg diagrams#html visualization#pr explainer
One-click install
npx skills add https://github.com/Yassimba/loom --skill plannotator-visual-explainer-yassimba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plannotator-visual-explainer
Source: https://github.com/Yassimba/loom/tree/main/drafts/plannotator-visual-explainer
Command: npx skills add https://github.com/Yassimba/loom --skill plannotator-visual-explainer-yassimba

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires plannotator, nicobailon/visual-explainer, and includes references (resource) components.

What problem does it solve? Turning implementation plans, pull requests, and technical concepts into clear visual documents is time-consuming, and generic HTML output often clashes with the Plannotator review UI. This Skill produces theme-aware, self-contained HTML visualizations that render correctly standalone or embedded in Plannotator's annotation interface. ## Core Features & Use Cases - Three content paths: Prescriptive structures for implementation plans (timelines, architecture SVGs, risk tables) and PR explainers (diffs, file cards, risk maps), plus delegation to nicobailon/visual-explainer for general diagrams, decks, and tables. - Plannotator theme integration: Semantic CSS tokens, dark/light Mermaid palettes, and a host-theme opt-in meta tag so documents inherit the active Plannotator theme. - Gated delivery: Plans are delivered through plannotator annotate --gate for approve/deny workflows, with Mermaid diagrams validated in both palettes before delivery. - Use Case: After drafting a migration plan, ask the agent to produce a visual plan document; it generates an HTML file with a milestone timeline, architecture diagram, and risk table, then opens it in Plannotator for approval. ## Quick Start Use the plannotator-visual-explainer skill to turn my implementation plan into a visual HTML document for review.

Frequently Asked Questions about plannotator-visual-explainer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a visual implementation plan in HTML?▼

Follow the Plan path: read the design-system and svg-patterns references, then build a self-contained HTML document with a header, summary stat cards, milestone timeline, inline SVG architecture diagram, and risk table. Deliver it with plannotator annotate --gate so the user can approve or deny.

How do I generate a PR explainer with syntax-highlighted diffs?▼

Use the PR path, which renders diffs via the Pierre diffs CDN component with Shiki highlighting inside shadow DOM. Combine diffs with file cards, review comment bubbles, risk map chips, and a test plan checklist from the pr-components reference.

Does this work with Mermaid diagrams in dark mode?▼

Yes, but Mermaid themeVariables must use literal hex colors, not OKLCH or CSS var() references. Every Mermaid diagram must be rendered in both light and dark palettes before delivery; an error or empty SVG blocks the deliverable.

When should I use the visual explainer path instead of the plan path?▼

Use the visual explainer path for architecture diagrams, data tables, slide decks, and general explanations that are not plans or PRs. It delegates to nicobailon/visual-explainer's structure and anti-slop rules, overriding only the color and typography layer with Plannotator tokens.

Why does my HTML not follow the Plannotator theme when embedded?▼

The document must include the meta tag name="plannotator-theme" content="host" in its head. Without this opt-in, the viewer renders the file with only its own :root defaults instead of the active host theme.

Related Skills

Explore More Software Engineering Skills→
LeonardoTan19LeonardoTan19
2

brainstorming

Guide collaborative brainstorming to produce formal design documents and implementation handoffs.

Community
Advanced
bittlinkmbittlinkm

plannotator-last

Collects user annotations on the latest assistant message via Plannotator and applies the feedback.

Community
Basic
deriyederiye

visual-explainer

Generate self-contained HTML pages with Mermaid diagrams, tables, and slide decks for technical explanations.

Community
Advanced
stacklokstacklok
2.0k

pr-inline-review

Submit inline review comments and code suggestions to GitHub Pull Requests via gh CLI.

Official
Intermediate