SuperAPI AI 工具集

effective-html

前端与建站

查看项目

更新于 10-15 20:12

技能介绍

该技能的目标是产出一个单文件 .html 工件,用于用户与编程智能体之间审阅文本文档时的沟通。

用途与使用方式:先询问用户该 HTML 文档用于展示还是迭代。若用于迭代,页面顶部需提供两个按钮:Export Comments Only 与 Export to Markdown;每个逻辑小节配一个 textarea 评论框,文末再放一个整篇评论框。两种导出均以该 HTML 文件的绝对路径作为首行引用,例如 > Source: /path/to/artifact.html。

主要能力:Export Comments Only 复制每个非空评论及其小节标题;Export to Markdown 复制整篇文档的 Markdown 渲染,评论内联在对应小节下。

约束:单个 .html 文件,所有 CSS 放在 style 标签内;不得使用外部样式表、script src、CDN 或网络字体,只能使用系统字体栈;交互与动画仅用 HTML + CSS,不用 JavaScript;不得使用 fetch、localStorage、cookie 或 service worker;JavaScript 仅允许用于上述两个导出按钮。

可视化与方向:在能让读者提前建立结构印象处使用手写内联 SVG,不用图表库。写 HTML 前先在对话中给出 3–4 个简短视觉方向供用户选择,选定后保持一致。若环境有 frontend-design 技能,可将渲染委托给 Skill(name="frontend-design:frontend-design", args="...");若工件在一屏内、约 150 行以下,或已在同一方向迭代微调,或环境中没有该技能,则自行渲染。

交接前清理:能渲染截图时打开页面截图并修复溢出、SVG 描边方向、网格错位、对比度不清等问题;不能截图时静态自查,逐条重算 SVG 坐标,并核验坐标位置、标签锚点与重叠、比例是否与数据一致、图形是否与文字结论一致。资料未提供具体支持的平台、收费方式或效果数据。