Plannotator Visual Explainer
Skill Verifiziert AktivGenerate 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.
Funktionen
- 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
Anwendungsfälle
- Explaining implementation plans visually
- Creating PR explainers for code changes
- Generating architecture diagrams and data tables
- Producing slide decks for technical presentations
Nicht-Ziele
- 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)
Voraussetzungen
- Plannotator CLI installed
- nicobailon/visual-explainer (for general visual explanations)
Installation
npx skills add backnotprop/plannotatorFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Presentation Styling
100Wissen über CSS-Klassen, Komponentenmuster und Syntaxhervorhebung in der Präsentation
Presentation Structure
100Wissen über das Präsentationsfolienformat, das Gewichtungssystem, die Navigation und die Abschnittsstruktur
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.