Plannotator Visual Explainer
技能 已验证 活跃Generate 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.
功能
- 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
使用场景
- Explaining implementation plans visually
- Creating PR explainers for code changes
- Generating architecture diagrams and data tables
- Producing slide decks for technical presentations
非目标
- Generating raw code or executing plans
- Providing a generic diagramming tool without specific theming
- Handling runtime execution of generated HTML
工作流
- 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)
先决条件
- Plannotator CLI installed
- nicobailon/visual-explainer (for general visual explanations)
安装
npx skills add backnotprop/plannotator通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
已验证类似扩展
Presentation Styling
100关于表示中的 CSS 类、组件模式和语法高亮显示的知识
Presentation Structure
100关于演示文稿幻灯片格式、权重系统、导航和章节结构的知识
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.