Agent Skills
› plannotator/effective-html
plannotator/effective-html
GitHub专用于生成自包含HTML图表，支持拓扑、序列、状态等多种模型。根据需求选择HTML/CSS/SVG/Canvas渲染，强调可读性、交互性与无障碍访问，输出无需构建的单文件。
Install All Skills
npx skills add plannotator/effective-html --all -g -y
Skills in Collection (5)
专用于生成自包含HTML图表，支持拓扑、序列、状态等多种模型。根据需求选择HTML/CSS/SVG/Canvas渲染，强调可读性、交互性与无障碍访问，输出无需构建的单文件。
用户明确调用 html-diagram
html技能路由的图表请求
npx skills add plannotator/effective-html --skill html-diagram -g -y
将源材料转化为清晰、自包含的HTML计划文档。保留原始范围、顺序和术语，优化层级与依赖关系，确保可追溯性和可读性。生成响应式、无障碍的单文件HTML，不添加无依据的时间线或状态徽章，适用于显式调用或路由的计划请求。
用户明确调用 html-plan
通用 html skill 路由到计划请求
npx skills add plannotator/effective-html --skill html-plan -g -y
用于构建高保真、响应式且自包含的HTML原型或静态Mockup。根据上下文选择模式，匹配设计语言，聚焦核心交互与状态，生成可测试的产品决策模型。
用户明确请求html-prototype
通用html技能路由到原型或Mockup需求
npx skills add plannotator/effective-html --skill html-prototype -g -y
用于生成低保真HTML线框图，测试信息层级、导航和任务流程。需在用户明确调用时激活，不用于高保真原型或生产级交互。
用户明确请求html-wireframe
通用html技能路由到线框图需求
npx skills add plannotator/effective-html --skill html-wireframe -g -y
作为HTML技能集的隐式路由，根据需求类型将请求分发至线框图、原型、计划或图表等专业技能。若无匹配项，则生成自包含的单文件HTML，遵循设计系统并优化可读性与交互。
需要创建报告、说明页、落地页或演示文稿的HTML文件
用户请求可视化内容但明确指定使用HTML格式交付
涉及数据故事、工具或混合类型的HTML实现
npx skills add plannotator/effective-html --skill html -g -y
