html-artifact

HTML 成果文档

构建一份浏览器文档，帮助读者理解、比较或处理所提供的材料。保留原意和证据，同时可自由选择呈现方式。

构思文档

阅读当前源材料，确定读者的任务、有用的结果、必需覆盖的内容和材料限制。围绕该任务组织内容，而不是照搬源材料的标题。若内容组织尚未确定，使用 fihanmi；若需要处理大量文字，使用 oro；对附带标题和忠实的简短摘要，直接撰写。

开篇呈现结果和重要限定条件。在影响判断时，明确展示阻碍、不确定性和相反证据；仅提供源链接不能替代关键信息。链接到详细证据，不要复制原始档案。保留来源身份和修订版本，标记过时或不兼容的输入，并区分观察结果、提案、结论、置信度和就绪状态。不要编造结论、评分或关联。

根据内容关系选择呈现形式：比较时使用对齐表格或样本，结构相互关联时使用图示，涉及数量时使用图表；必要时使用文字或列表即可。保留单位、尺度、转换和标签。不要暗示顺序代表因果，也不要用装饰性大小暗示测量值。应针对实际材料生成图示；没有固定的制作流程、布局或图表数量要求。

对于维护中的文档，保留其身份和有用的锚点，协调摘要与详细内容，并突出重要变化。在原有位置更新 Atọ́nà HTML 计划，不要另行制作等效的 Markdown 副本。当机器可读的身份信息和来源修订版本有助于检索时，可选用 manifest。

只构建有用的交互

从 base.html 开始，并根据需要调整其布局和示例内容。使用 Tailwind 处理样式和状态变体，使用原生 HTML 实现内置行为，使用现有的 jQuery 运行时处理必要的 DOM 操作，并使用纯 JavaScript 进行计算。复用项目品牌元素或提供的 QP 标记。对于宿主、离线或额外依赖的选择，请阅读依赖策略。

如果已提供的控件符合需求，就复用它；每个资源的注释都定义了其输入和回退方案：

• 视图控件：详情、对齐比较或有限步骤；
• 集合筛选控件：按类别或文本筛选，并显示计数，提供重置功能和空状态；
• 轮播控件：按顺序浏览视觉内容集合；
• 报告控件：显示片段目标，并展开打印所需内容；
• Mermaid 渲染器：按条件渲染图示，并提供源代码和说明作为回退内容。

对于 Mermaid，请使用带标签的图示，其中包含 pre.mermaid、div[data-diagram-output]、p[data-diagram-status] 和易于理解的说明。仅在图示可见时进行渲染，保持严格的安全设置，避免让控件依赖生成的 SVG 内部结构。对于可移植的图示，请使用本地渲染的 SVG。若不熟悉当前语法，请先核实，不要保留配方目录。

对于其他控件，优先使用原生元素或兼容的宿主组件。只有在确有必要时才添加专用库；使用时核实其当前 API 和许可证。每个控件只由一个行为主体负责。

确保交互可信

交互应帮助读者比较、检查、跟进、筛选或探索提供的模型。比较内容应易于理解，无需记忆隐藏的备选项。模型控件需要有标签的输入项、单位、基线／重置方式和已知结果；计算得出的示例应与观察结果区分开来。

保持读者状态为临时状态：默认不使用浏览器存储、Cookie、已保存的 URL 选择、文件或服务写入。普通点击的锚点仍属于导航。反馈、批准、导出和持久化都需要明确请求；持久化还需要指定有效期、目标位置以及重置／移除方式。读者的操作绝不会悄然更改已接受的决定。

将提供的内容视为数据，并针对 HTML、JSON 或 SVG 上下文进行转义。私有代码审查文档不得加载远程可执行代码。不得发送凭据、分析数据或未经请求的数据。将本地资源嵌入文档，或放入声明的配套包中。

保留语义阅读顺序、键盘／焦点操作、触控操作、对比度、非颜色线索、减少动态效果设置以及打印内容的含义。脚本失效时，关键信息仍须保留；仅在就绪后显示控件。筛选功能需要显示计数、提供重置方式并处理无匹配结果，且不得让焦点停留在隐藏内容中。宽表格和代码区域应使用带标签的溢出区域。

如需了解精确的补丁视图，请阅读 代码更改审查；如需了解文档打开期间收到更新时的处理方式，请阅读 持续更新与实时视图。

验证并交付

运行 python3 <skill-directory>/scripts/verify_artifact.py <artifact.html>。修复明确的缺陷并检查警告；此检查仅验证结构，不验证源内容真实性、视觉质量、安全性或无障碍认证。

检查源内容身份、关键内容覆盖情况、来源信息、导航和回退机制。如果可读性不确定，请渲染静态页面。测试新增的交互、键盘／焦点操作、重置、无匹配结果、已知模型结果以及相关的打印／重新加载行为。在布局断点的行为有影响时，检查相应断点。渲染器存根无法证明真实库的渲染效果。复用有效的验证凭据，并如实说明无法进行的浏览器检查。

将文件写入指定目标；若未指定，则写入 .qp/artifacts/<stable-subject>/index.html。返回真实的定位信息和关键验证结果，并注明尚未解决的限制。说明交付内容是单个 HTML 文件还是配套包、运行时代码是嵌入式／打包／远程加载、数据是静态／实时的，以及证据是嵌入式／链接的。将依赖项详情放在不显眼的技术说明中。

仅在收到请求或需要提供渲染证明时打开页面；复用现有预览。确保读者能够理解、检查并使用所请求的结果后，即可完成。