1实现原理 · 为什么它能做到
模板本体没有可执行代码：loader 从 src/lib/templates/skills/<id>/SKILL.md 读入 frontmatter 与正文，正文（body）与 example 内容一起作为 LoadedSkill 返回。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
注：这里在做什么：SKILL.md 是唯一行为来源——frontmatter 供选择器渲染（zh_name/emoji/aspect_hint/tags/example_* 等），正文整段即提示词；loader 不做语义校验，模板写什么就下发什么。
下发前宿主固定拼装 prompt：模板正文夹在共享设计指令 SHARED_DESIGN_DIRECTIVES 与【输入格式】/【用户内容】之间。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
注：这里在做什么：模板只定义「这一个交付物长什么样」（版式/节奏/组件），共享指令承担跨模板硬约束——单文件 HTML、禁止用文件工具、Tailwind 与 Google Fonts 走 CDN、内容真实性、中文盘古之白。
共享指令把硬约束写成对 agent 的显式禁令，并强制内容驱动数量（模板里的数字只作参考下限）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
注：同文件下文还有一条：输出的 slide / frame / card / section 数量完全由【用户内容】的实际长度和信息结构决定——这解释了为什么本类模板不因内容变长而失效：每段内容至少一张卡/一节，模板只提供版面池。
真正执行的是用户本机已安装并登录的编码 agent CLI：宿主 spawn 子进程，把 prompt 交给它，HTML 从 stdout 流式捕获。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
注：这里在做什么：模板 skill 只提供提示词，能力（含写代码、跑工具）来自宿主 CLI 的既有权限；skill 目录自身没有任何脚本入口，因此判级只看目录内资产（宿主行为不计档）。
/api/convert 是模板的执行路径：它把 skill.body 与用户内容组装成 prompt 后交给 invokeAgent。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：编辑模式另走 buildEditPrompt（最小化差异编辑，禁用文件工具、要求直接流式输出完整 HTML），因此本类模板的产物形态稳定：单文件 HTML、内联 CSS/SVG，外链仅字体与个别模板显式要求的图表库。
模板要求图表在产物中由 CDN 图表库渲染：至少 2 个图表（柱/折线/饼/散点），用 Chart.js 或 ECharts，经 jsdelivr CDN 引入，数据从用户输入解析。
next/src/lib/templates/skills/data-report/SKILL.md
- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。
注：该 CDN 属产物期引用：生成的 HTML 由浏览器打开时从此端点取 chart.js，skill 执行期不抓取、不上报、不传素材（端点 cdn.jsdelivr.net，见 security.reason 与 verdict.risks），按批4 终版口径不判级。
模板预言了一个具体崩溃场景并给出解法：Chart.js 在 responsive+maintainAspectRatio:false 下若父容器无显式高度会陷入 ResizeObserver 死循环，故 canvas 外层必须包固定高度容器。
next/src/lib/templates/skills/data-report/SKILL.md
**图表容器必须有固定高度**
注：这里在做什么：把踩过的坑写成硬性要求（KPI 迷你图 ~40px、主图 ~240–280px），并明确绝对不要直接给 canvas 写 height= 属性当布局——约束来自真实故障，是高质量模板的证据。
数据真实性被写成最高优先级纪律：必须解析用户提供的实际数据，不要捏造。
next/src/lib/templates/skills/data-report/SKILL.md
- **必须解析用户提供的实际数据**, 不要捏造。
注：这条决定了输入契约：CSV/Excel/JSON 结构化数据是必给项；示例输入即 9 行 CSV（month,active_users,new_signups,paying,churn_rate）。
报告还固定了四类支撑内容：头部（标题+区间+数据来源）、KPI 卡（数值+同比+微型趋势线）、数据表格（zebra/hover/sticky header）、洞察块（3-5 条 emoji 开头）与底部方法论折叠区。
next/src/lib/templates/skills/data-report/SKILL.md
- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。
注：示例逐项落地：4 张 KPI 卡各带 40px 迷你折线、主图区 2 张 canvas（260px 高）、rows 表体由页面脚本从数据数组渲染、3 条 emoji 洞察、<details> 方法论折叠。
示例把数据写成内联数组并用产物内脚本渲染表格与图表，体现用户数据 → 页面结构的完整通路。
next/src/lib/templates/skills/data-report/example.html
{month:'2024-09', mau:8420, signups:1240, paying:612, churn:0.034},
注：同一脚本块内 new Chart(...) 创建 4 条 KPI 迷你趋势线与 2 张主图；这是产物自带的页面脚本（不是 skill 侧脚本入口），产物自带一份可替换的数据数组，用户改数组即可复用页面。
图表容器的高度约束在示例中逐字落实（迷你图 40px、主图 260px）。
next/src/lib/templates/skills/data-report/example.html
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi1"></canvas></div>
注：这里在做什么：把必须有固定高度从建议变成可核对的 DOM 结构；主图同规格（position:relative;height:260px），完全对齐 SKILL.md 的 240–280px 区间。
2核心能力
01结构化数据 → 可视化报告的解析通路（CSV/Excel/JSON 输入）
02多图表渲染（≥2 张；示例为覆盖双轴的柱状主图 + 折线，另加 4 条 KPI 迷你趋势线）
03KPI 卡（数值 + 同比变化 + 微型趋势线）
04数据表格（原始数据节选，zebra stripe / hover / sticky header）
05洞察块（3-5 条文字洞察，emoji 开头）
06底部方法论折叠区（口径说明）
07已知坑的防护规则（固定高度容器，防 ResizeObserver 死循环）
08数据真实性要求（必须使用用户提供的实际数据）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 图表库走 jsdelivr（产物期引用） — 产物的 <script src> 指向 cdn.jsdelivr.net/npm/[email protected]（SKILL.md:22 要求，example.html:7 实引）；离线或该 CDN 不可达时页面无图（表格与洞察仍在，图表区空白）。skill 执行期不请求该端点。
- 产物含脚本并在预览面板同源执行 — 示例在页面内 new Chart(...) 并渲染表格；宿主预览 iframe 为 sandbox="allow-scripts allow-same-origin"（宿主行为），生成物脚本会在预览源下执行，用户数据同时进入该脚本的数据数组。
- 用户数据逐字进入 prompt 与产物 — CSV/JSON 会被逐字插入 prompt（宿主装配层无转义），并作为数据数组写入产物；若数据文件本身含指令性文本或异常字符，可能影响生成或页面渲染。
- Excel 输入依赖模型自行解析 — 模板声明支持 CSV/Excel/JSON，但除 CSV 外无解析脚本；xlsx 需由 agent CLI 侧处理，二进制表格在无工具环境下可能被误读。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录：data-report/ 仅 SKILL.md + example.html + example.md，无自带 CLI、无凭证读取、无写盘指令；执行期零外发（example.html 内的 <script> 是产物自带的页面数据渲染脚本，不是 skill 侧脚本入口）。SKILL.md:22 点名 jsdelivr CDN（「使用 Chart.js 或 ECharts (jsdelivr CDN 引入)」），端点 cdn.jsdelivr.net，example.html:7 实引 [email protected] UMD 包——按批4 终版口径属**产物期引用**：生成的 HTML 由浏览器打开时取该静态库，skill 执行期不抓取、不上报、不把用户数据发往任何端点（数据只写进产物本身），故不判级，仅在此列出端点。另需知悉：产物在页面内以脚本渲染数据并绘制图表，在宿主预览面板的 sandbox="allow-scripts allow-same-origin" 下会执行；该 sandbox 与 CLI spawn 均属宿主行为，不计档，记入 verdict.risks。
5第二遍独立确认
- [ok] 图表容器高度规范 vs 示例实现 — SKILL.md 要求 canvas 外层包固定高度 div（KPI ~40px、主图 240–280px）且禁止给 canvas 写 height 属性；示例全部命中（40px×4、260px×2，canvas 无 height 属性）。
- [ok] 数据一致性（产物 ↔ 示例输入） — example.html 的 data 数组与 example.md 的 CSV 9 行数值一一对应（如 2025-05: mau 23950 / signups 4250 / paying 2418 / churn 0.018），证明解析用户数据的执行路径可复现。
- [ok] 端点性质（产物期 vs 执行期） — SKILL.md:22 逐字命中「使用 Chart.js 或 ECharts (jsdelivr CDN 引入)」；example.html:7 为 [email protected] 的 jsdelivr 链接。库由浏览器加载产物时取用，属产物期引用（批4 终版口径不判级），故维持 green；端点已列入 security.reason 与 verdict.risks。
- [ok] 「至少 2 个图表」是否达标 — 示例有 chart-main（柱状覆盖双轴折线）与 chart-churn（折线）两张主图，另有 4 条 KPI 迷你趋势线，超过最低要求；图表类型在 SKILL.md 列出的柱状/折线范围内。
- [ok] license / stars / commit 元数据 — GitHub API（api.github.com/repos/nexu-io/html-anything）：spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z；工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 553ed98c283f 同源）。
- [ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md；目录内文件清单已用 glob 全量核对（含隐藏文件），无 scripts/、无 references/、无二进制资产（competitive-teardown 的 assets/ 为纯 HTML，另行记录）。
6结论
适合：适合把结构化数据快速做成可发布的报告页：产品周报/月报、运营数据复盘、实验结论汇报、财报一页纸。数据以 CSV/JSON 给出、指标口径清晰时效果最好（示例即 9 个月增长数据）。
不适合：不适合无数据的纯文案排版（模板要求解析真实数据）；不适合需要离线零依赖的场合（产物需从 CDN 取图表库，应选 dashboard 的内联 SVG 路线）；不适合需要交互筛选/联动钻取的 BI 看板（仅静态渲染，无数据绑定框架）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 data-report.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agentdecfcd8af87ff5e9…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（仓库根 LICENSE：Apache License Version 2.0, January 2004；GitHub API spdx_id=Apache-2.0）
本站信息
收录日期2026-09-06
分类文档与知识
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。