Plannotator Visual Explainer
Skill Verified ActiveGenerate 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.
To create visually rich, self-contained HTML explanations of technical concepts, plans, and code reviews with a consistent and professional Plannotator theme.
Features
- Generate self-contained HTML visualizations
- Apply Plannotator theming for consistent branding
- Route content for implementation plans and PR explainers
- Delegate to visual-explainer for general diagrams
- Provide clear delivery and installation instructions
Use Cases
- Explaining implementation plans visually
- Creating PR explainers for code changes
- Generating architecture diagrams and data tables
- Producing slide decks for technical presentations
Non-Goals
- Generating raw code or executing plans
- Providing a generic diagramming tool without specific theming
- Handling runtime execution of generated HTML
Workflow
- Identify content type (plan, PR, general visual)
- Read relevant Plannotator references (design-system, svg-patterns, pr-components)
- Construct content according to the identified path's structure
- Generate HTML visualization using the Plannotator CLI
- Deliver output via Plannotator's annotation UI (cli commands provided)
Prerequisites
- Plannotator CLI installed
- nicobailon/visual-explainer (for general visual explanations)
Installation
npx skills add backnotprop/plannotatorRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedTrust Signals
Similar Extensions
Presentation Styling
100Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Presentation Structure
100Knowledge about the presentation slide format, weight system, navigation, and section structure
Cli Anything Mermaid
98Command-line interface for Mermaid Live Editor - Create, edit, and render Mermaid diagrams via stateful project files and mermaid.ink renderer URLs. Designed for AI agents and power users who need to generate flowcharts, sequence diagrams, and other visualizations without a GUI.
Markdown and Mermaid Writing
100Comprehensive markdown and Mermaid diagram writing skill. Use when creating any scientific document, report, analysis, or visualization. Establishes text-based diagrams as the default documentation standard with full style guides (markdown + mermaid), 24 diagram type references, and 9 document templates.
Teach Guidance
100Guide a person in becoming a better teacher and explainer. AI coaches content structuring, audience calibration, explanation clarity, Socratic questioning technique, feedback interpretation, and reflective practice for technical presentations, documentation, and mentoring. Use when a person needs to present technical content and wants preparation coaching, wants to write better documentation or tutorials, struggles to explain concepts across expertise levels, is mentoring a colleague, or is preparing for a talk or knowledge-sharing session.
Prepare Inspection Readiness
100Prepare an organisation for regulatory inspection by assessing readiness against agency-specific focus areas (FDA, EMA, MHRA). Covers warning letter and 483 theme analysis, mock inspection protocols, document bundle preparation, inspection logistics, and response template creation. Use when a regulatory inspection has been announced or is anticipated, when a periodic self-assessment is due, when new systems have been implemented since the last inspection, or after a significant audit finding that may attract regulatory attention.