Agent Skills
› plannotator/effective-html
plannotator/effective-html
GitHub用于生成自包含HTML图表的专业技能，支持拓扑、序列、状态等多种可视化模型。根据内容选择HTML/CSS/SVG等渲染方式，确保无障碍访问、响应式布局及交互体验，输出无需构建的单文件HTML。
Install All Skills
npx skills add plannotator/effective-html --all -g -y
Skills in Collection (5)
用于生成自包含HTML图表的专业技能，支持拓扑、序列、状态等多种可视化模型。根据内容选择HTML/CSS/SVG等渲染方式，确保无障碍访问、响应式布局及交互体验，输出无需构建的单文件HTML。
用户明确请求使用html-diagram
通用html技能路由到图表生成请求
npx skills add plannotator/effective-html --skill html-diagram -g -y
将源材料转化为可检查、可执行的自包含HTML计划文档。保留原始范围与术语，优化层级、依赖和所有权，确保响应式、无障碍且无外部依赖。仅在显式调用或路由时激活。
用户明确请求生成HTML格式的项目计划
通用html技能被路由至具体计划生成任务
npx skills add plannotator/effective-html --skill html-plan -g -y
根据用户上下文生成自包含的HTML原型或静态Mockup。支持两种模式：视觉展示与交互流程，强调状态覆盖、真实数据及设计一致性，避免通用模板化输出。
用户明确要求制作HTML原型或Mockup
通用html技能路由至此处
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需求
npx skills add plannotator/effective-html --skill html -g -y
