Agent Skills › plannotator/effective-html

plannotator/effective-html

GitHub

生成用于可视化系统架构的高品质全屏SVG HTML文件。支持深色模式、交互动画及细节面板，提供平滑的拖拽平移与缩放体验，优化全栈理解效率。

3 skills 1,396

GitHub

Install All Skills

npx skills add plannotator/effective-html --all -g -y

More Options

List skills in collection

npx skills add plannotator/effective-html --list

Skills in Collection (3)

html-diagram

生成用于可视化系统架构的高品质全屏SVG HTML文件。支持深色模式、交互动画及细节面板，提供平滑的拖拽平移与缩放体验，优化全栈理解效率。

用户需要查看系统架构或技术栈的全屏可视化图表用户希望快速理清复杂系统的结构关系用户要求输出轻量级、以图形为主的HTML演示文稿

skills/html-diagram/SKILL.md

View Skill ›

npx skills add plannotator/effective-html --skill html-diagram -g -y

SKILL.md

Frontmatter

{
    "name": "html-diagram",
    "description": "Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram. Use when the user wants a full-screen diagram, wants the output to be light on prose, or wants an HTML artifact that is mostly there to make the architecture click fast.",
    "disable-model-invocation": true
}

HTML Diagram

Review the SVG diagrams used throughout references/html-effectiveness/.

There are a bunch in there, and some of them are focused on architecture and whatnot.

After reviewing them, create an HTML file that is strictly for visualizing the architecture and understanding the stack.

It should not be prose-heavy. It should simplify more into a full-screen diagram and whatnot.

Build a high-quality diagram in SVG. Take your time iterating on the diagram more than anything.

If it makes sense, make the diagram interactive and able to visualize and animate different sequences of system behavior.

Also review references/architecture-example.html — a finished example of this skill done well (full-screen SVG stage, clickable nodes, flow chips that light up and animate request paths).

Always include dark mode: hand-rolled CSS variables on :root / html.dark, a small theme toggle button, localStorage persistence, and an apply-before-paint script in <head> (default to prefers-color-scheme). Style the SVG through CSS classes using those variables — never hard-coded hex inside the SVG — so the diagram follows the theme.

Always make floating overlays dismissible. Any card or panel that overlays the SVG stage (e.g., a detail panel, a legend, a side card) MUST have a visible close button, and MUST re-open when the user clicks a relevant node or filter. This prevents floating panels from permanently blocking content on the full-screen stage.

Architecture diagrams almost always exceed the screen. Support pan (drag) and zoom (mouse wheel). Wrap all SVG contents in <gid="svg-content"> and drive its transform attribute. Pan in SVG-space 1:1 (do NOT divide mouse delta by scale — dividing makes dragging feel sluggish when zoomed in). Zoom at the cursor position by translating so the SVG point under the cursor stays fixed. Suppress node click events after a drag (track a 5px movement threshold + a capture-phase one-shot stopPropagation). Provide visual feedback: grab / grabbing cursors, a zoom-level indicator, and a reset-to-100% button.

html-plan

用于生成风格务实、简洁且视觉清晰的自包含HTML计划页面。支持保留原文内容或仅修正语法，强制实现暗色模式、主题切换及本地存储持久化功能。

用户希望以HTML格式展示计划需要保持原有文本内容不变仅需对现有文本进行语法润色

skills/html-plan/SKILL.md

View Skill ›

npx skills add plannotator/effective-html --skill html-plan -g -y

SKILL.md

Frontmatter

{
    "name": "html-plan",
    "description": "Create a self-contained HTML plan that is pragmatic, simple, and visually organized. Use when the user wants a plan page in the effective HTML style, wants the writing kept close to what they gave you, or wants the grammar cleaned up without turning it into a whole bigger thing.",
    "disable-model-invocation": true
}

HTML Plan

Review the files throughout references/html-effectiveness/.

After reviewing them, create an HTML file for the plan in a similar style.

Keep it pragmatic and simple.

html

根据用户需求生成自包含的HTML文件，适用于报告、原型等场景。支持深色模式、主题切换及本地存储持久化，确保风格与参考对齐。

用户需要生成一个独立的HTML文件用户要求创建报告、演示文稿或原型

skills/html/SKILL.md

View Skill ›

npx skills add plannotator/effective-html --skill html -g -y

SKILL.md

Frontmatter

{
    "name": "html",
    "description": "Create a self-contained HTML file for whatever the user is describing, in the effective HTML style. Use when the user wants an HTML artifact that isn't specifically a diagram or a plan — a report, explainer, comparison, deck, prototype, or anything else best delivered as one HTML file.",
    "disable-model-invocation": true
}

HTML

Review the files throughout references/html-effectiveness/.

Create an HTML file for whatever the user is describing. Use the references as best you can to match alignment — style, density, and tone.

plannotator/effective-html

plannotator/effective-html

Install All Skills

Skills in Collection (3)

html-diagram

HTML Diagram

html-plan

HTML Plan

html

HTML

文库