1实现原理 · 为什么它能做到
本 skill 不是可执行程序,而是一段纯文本提示词模板:宿主用正则解析 SKILL.md 的 YAML frontmatter,把正文 body 作为提示词主体加载。
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
注:仓库对目录约定的自述:‘SKILL.md — frontmatter (id, scenario, tags, …) + prompt body’,以及 ‘Adding a template = adding a folder. No TS code change required’——模板靠目录约定注册;全仓 TS/TSX 中检索不到 "ppt-keynote" 的硬编码引用,本模板没有被任何代码特判。
模板正文不会单独执行,而是被拼进最终 prompt 的"模板段":共享设计指令 + 本模板正文 + 用户内容。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注:shared.ts 的 assemblePrompt 自述:‘Wrap a per-template instruction body with the shared design directives and the user content tail.’;请求先经 const skill = loadSkill(templateId); 取到本目录的 body,再拼装。
全局"内容驱动数量"规则覆盖模板里的任何数字:模板只定义版面/风格/配色/组件库,不定义输出长度。
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
注:该规则被标为"最高优先级, 覆盖模板里的任何数字",并明写 deck 类模板里"6-10 张"这类数字"一律视为短示例下的参考下限"。因此本模板给的是可用版面与约束,不是页数上限。
产物形态被全局硬约束:单文件 HTML、纯 HTML 无围栏、第一个字符必须是 <、且不得写文件(由前端捕获 stdout)。
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
注:同一段还写明 ‘禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具’——文件落盘由宿主前端负责,模板侧不产生写盘行为。
frontmatter 的元数据驱动选择器呈现(中文名/英文名/emoji/描述/分类/场景/画幅/标签/示例元数据)。
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
注:本模板元数据:category=slides、scenario=marketing、aspect_hint=16:9 (1280×720)、featured=19。选择器按 category/scenario 分组、按 featured 排序,全部由 frontmatter 决定,无代码特判。
随包示例资产经两条只读 API 暴露给前端:example.html 原样返回进 iframe,example.md 作为"预览"按钮的输入内容。
next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
注:example.html 的响应头是 Content-Type: text/html; charset=utf-8;另一路由以 content: skill.exampleMd ?? "", 把示例文本交给客户端。本目录:有 example.md(823 字节)与 example.html(7237 字节)。
生效链(宿主行为,非本模板代码):宿主 spawn 本机已登录的 agent CLI,把拼好的 prompt 经 stdin 送入,从 stdout 流式回收 HTML。
next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
注:子进程以 cwd=process.cwd()(cwd: opts.cwd ?? process.cwd(),)运行、stdio 全 pipe;prompt 走 stdin/--message 而非 shell 拼接(not interpolated into a shell command)。
模板是"一屏一 section"的网页 deck 结构,画布尺寸与居中方式写死;配合共享指令"数量由内容决定",页数随输入长度伸缩。
next/src/lib/templates/skills/ppt-keynote/SKILL.md
整体宽 1280 高 720, 居中显示, 背景渐变
注:shared 的"内容驱动数量"规则专门点名 deck 类模板:"如果模板正文里写了类似‘挑 6-10 张组成 deck’的数字, 一律视为短示例下的参考下限";本模板则完全不给页数。
这是 9 份里唯一在正文里要求写 JS 的模板:键盘翻页 + hash 路由,交互由产物自带(自包含),不是调外部服务。
next/src/lib/templates/skills/ppt-keynote/SKILL.md
- 加一段 JavaScript 监听 ArrowLeft / ArrowRight / 空格键切换 slide; 同时维护 hash (#/3)。
注:hash 路由让某一页可被直链分享,是演示场景的实用细节。
字号/配色给到类名与色阶(text-7xl / font-semibold / tracking-tight / text-neutral-500),同时要求"保持留白, 数据卡片用 grid 布局对齐, 颜色克制"。
next/src/lib/templates/skills/ppt-keynote/SKILL.md
- 字号: 标题 `text-7xl font-semibold tracking-tight`, 副标题 `text-2xl text-neutral-500`。
注:这类字面约束让产出更接近"设计过的 deck"而不是"排过版的文档"。
2核心能力
01每屏一个 <section class="slide">,画布 1280×720 居中
02单页内容做减法:大标题 + 1-3 行 / 一张数据图 / 一个金句
03键盘翻页 JS(←/→/空格)+ hash 路由 (#/3)
04页间 fade-in 过渡
05右上角页码指示器(当前页 / 总页数)
06首尾页规范:封面(主题 + 演讲者/日期)与收尾页("Thanks." / CTA)
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Tailwind Play CDN(共享指令对产物的要求) |
| network | jsdelivr CDN(可选:图表/动画脚本) |
| network | Google Fonts(共享指令指定) |
| cli | 本机 coding-agent CLI(宿主检测 PATH 并 spawn) |
| network | 随包示例 example.html 的外链(产物示例) |
4风险提醒 风险提醒:绿色 · 放心使用
风险提醒:绿色 · 放心使用
- 用户内容逐字拼进 prompt,无隔离标记 → 指令注入面 — assemblePrompt 把用户内容直接接在 ‘【用户内容】:’ 之后,模板正文在前、用户内容在后且无分隔;宿主侧 agent 以高权限运行(claude 为 --permission-mode bypassPermissions),注入若生效即为高权限落地。
- 宿主环境变量全量透传给被 spawn 的 CLI — argv.ts envFor 以 ‘const base = { ...process.env };’ 构造子进程环境:shell 里存在的一切变量(含各类 *_API_KEY)都会随 agent 进程可见。属宿主行为,非本模板代码。
- 预览 iframe 允许脚本且同源 — 产物/示例经 sandbox="allow-scripts allow-same-origin"(template-picker.tsx:544 与 preview-pane.tsx:297)加载;同源 + 允许脚本意味着产物内 JS 可达宿主页面上下文。本模板的 example.html 即含内联脚本。
- 产物运行期外链第三方 CDN — 共享指令要求 <head> 引 cdn.tailwindcss.com(必要时 jsdelivr / Google Fonts):断网或 CDN 变更会让产物外观退化;CDN 被投毒则脚本进入产物执行环境,模板侧无 SRI/完整性校验。
风险提醒:绿色,放心使用。判级口径:只判本 skill 目录(SKILL.md + example.html/example.md),宿主壳与产物外链不参与判级。目录内零脚本文件、零凭证读取、零写盘指令、无 SKILL.md 要求的运行时外链(SKILL.md 里的 "JavaScript" 是要求写进产物的键盘翻页代码,不是 skill 调用外部脚本)。目录内实际出现的端点与外链有两处,均为随包示例产物:example.html 的 <head> 引 cdn.tailwindcss.com,example.html 内含一段内联 keydown 切页脚本;另 example.md / example.html 里出现过 "pnpm dev" 文案(示例正文,非执行指令)。 仅作说明、不改档的两点:① 宿主壳(loader.ts → assemblePrompt → agents/invoke.ts spawn 本机 CLI;claude 参数含 --permission-mode bypassPermissions,envFor 以 {...process.env} 全量透传环境变量)属宿主行为,已写入 verdict.risks;② 宿主注入的共享设计指令要求产物在 <head> 引 Tailwind Play / Google Fonts(属产物运行期外链)。
5第二遍独立确认
- [ok] skill 目录资产面(脚本 / references / 数据 / 模板) — 目录实为 3 个文件:SKILL.md 与 example.html、example.md;无 scripts/、无 references 目录、无任何可执行文件(.sh/.py/.js/.mjs/.ts 零命中)。
- [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描(api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.):仅命中 example.md / example.html 里作为示例文案出现的 "pnpm dev"(展示文本,非可执行指令);SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描,仅命中 font-semibold / font-black 这类字重类名,无端点。
- [ok] 官方描述 vs 实际能力(有无夸大) — frontmatter description(苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换)与正文一致:描述承诺的版式要素都能在正文找到对应条目,未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目(Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI)逐条回到 shared.ts 与 argv.ts 原文取证;本模板另有 example.html 的 cdn.tailwindcss.com 外链,已在该 example.html 原文中定位。
- [ok] 宿主执行链(供 security.reason / verdict.risks 使用,不参与判级) — prompt 经 stdin 送入被 spawn 的本机 CLI(invoke.ts),HTML 从 stdout 分流捕获;claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env;预览 iframe sandbox="allow-scripts allow-same-origin"(template-picker.tsx:544 / preview-pane.tsx:297)。
- [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699(与任务表 pin 一致);skill.path=next/src/lib/templates/skills/ppt-keynote 下确有 SKILL.md,全仓无第二份同名模板。
- [ok] 内联 <script> 是否改变"目录无脚本文件"结论 — example.html 含一段内联 JS(以 "// ←/→ scroll between slides; current implementation just smooth-scrolls" 起的 keydown 监听)。它属随包示例产物、只在预览 iframe 中执行;SKILL.md(skill 指令面)无任何脚本执行要求,目录内也没有任何脚本文件,故仍判 green——已在 security.reason 与 verdict.risks 明写。
- [ok] 键盘导航是否依赖外部库 — 示例脚本为原生 document.addEventListener 实现,无 import、无 CDN JS;SKILL.md 也只要求"加一段 JavaScript",不点名任何库。
6结论
适合:适合产品介绍/内部演讲的网页版 Keynote:几页到十几页的产品叙事、可直接全屏演示、支持 ←/→ 翻页与 #/N 直链。
不适合:不适合需要 PPTX 交付或需要演讲者视图/观众屏同步的正式汇报(本模板是网页 deck;仓库内另有 deck-* / video-* 系列承担更复杂能力);不适合内容极密的页面(模板要求单页只放 1-3 行或一张图)。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 ppt-keynote.tar.gz
sha256:
方式 B · JSON 格式安装指南,复制给 agent3e33c78e36b73ce5…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";pool.json 记 license=Apache-2.0)
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源:本站锁定 commit 快照经 /r2 分发;GitHub 为实时上游,内容可能已更新。