1实现原理 · 为什么它能做到
这个 skill 不是可执行程序，而是「一个目录 = 一个模板」：SKILL.md 的 frontmatter 供选择器展示，正文（body）就是发给模型的提示词；加模板＝加目录，不需要改 TypeScript。
next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
注：同一文件头注释写明目录约定：SKILL.md（frontmatter + prompt body）/ example.md（可选输入样例）/ example.html（可选预览）。本 skill 目录内正是这一结构。
实际下发提示词 = 平台共享设计指令（SHARED_DESIGN_DIRECTIVES）+ 本 skill 的 SKILL.md 正文 + 用户内容，由 assemblePrompt 拼成一条 prompt。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
注：所以本 skill 的正文只负责「版式/风格/组件库」这一段；输出纪律（单文件 HTML、必须用用户真实数据、内容驱动数量）来自共享指令，模板作者不必重复声明。
成稿不走文件系统：共享指令明令禁止 Write/Edit/Bash 等文件工具，要求模型把整份 HTML 直接作为回复正文流式输出（stdout 由前端捕获落盘）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：这是「skill 自身零写盘」的机制来源：写文件的是宿主前端，不是 skill；本目录内也无任何脚本。
三栏骨架由一条 grid 声明决定：240px 侧导航 + 弹性正文 + 220px 右 TOC，并在窄屏逐级降为两栏/一栏。
next/src/lib/templates/skills/docs-page/example.html
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 0; min-height: calc(100vh - 50px); }
注：1024px 以下隐藏 .toc，720px 以下隐藏 .sidebar，正文 max-width:760px 保长读行宽——对应 SKILL.md「长读体验优先」。
正文由「代码块 + callout + 表格 + pager」四类块组成，样例用一份虚构 CLI（Filebase）的快起步文档演示全部块型。
next/src/lib/templates/skills/docs-page/example.html
<title>Filebase docs — Quickstart</title>
注：样例正文四节：Install the CLI（brew 或 curl）→ Authenticate（token 路径）→ Sync a folder（.filebaseignore）→ Where to go next（pager）。
callout 用单一 accent 左描边实现（--accent #c96442），只有一种档位，没有 SKILL.md 所称的 info/warn/danger 三色。
next/src/lib/templates/skills/docs-page/example.html
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 20px 0; font-size: 14px; }
注：这是「提示词要求多于样例实现」的一处典型：SKILL.md 写「callout: info / warn / danger 三色」，样例只落了一种。
右侧 TOC 是纯静态锚点列表（标题 + #链接 + .active 高亮），样例没有任何脚本，因此 SKILL.md 所称的 scroll-spy / 复制按钮 / 主题切换在样例里都不存在。
next/src/lib/templates/skills/docs-page/example.html
<aside class="toc" data-od-id="toc">
注：全文 grep <script 零命中、无 addEventListener、无 clipboard 调用；「scroll-spy」「代码块复制按钮」「主题切换」只存在于提示词里，需模型自行补 JS 才能兑现（而共享指令又要求脚本仅从 jsdelivr 引入）。
顶栏只有 brand + 搜索输入框，没有 SKILL.md 提到的 version 与主题切换控件。
next/src/lib/templates/skills/docs-page/example.html
<input placeholder="Search · ⌘K" />
注：⌘K 只是占位文案，无键盘处理逻辑；这属于「样例是静帧、交互留给模型/宿主」的常态，核对时需注意别把样例当成功能清单。
服务端 /api/convert 只做三件事：按 templateId 从磁盘读 skill、拼 prompt、spawn 本地 agent CLI 并 SSE 流转发输出。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：同文件先 `const skill = loadSkill(templateId);`（无此模板即 400），再交给 invokeAgent；skill 目录本身不产生进程、不联网。
2核心能力
01三栏技术文档页骨架（侧导航 + 正文 + 右 TOC），窄屏自动降栏
02侧导航分组 + 当前项高亮 + 粘性定位
03右 TOC 锚点列表与正文小节一一对应
04代码块（浅底 + 圆角 + 溢出横滚）承载安装/同步命令
05callout 提示块（左描边 accent + 小写大写 label）
06底部 pager（上一页/下一页卡片）与面包屑
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 交互承诺未在样例兑现 — SKILL.md 承诺 scroll-spy、复制按钮、主题切换、三色 callout、dark 代码块，样例全无；若模型照抄样例，交付物会缺这些功能，需人工按提示词补齐或接受静帧。
- 示例正文含「管装脚本」模式 — 样例教读者 `curl -fsSL https://get.filebase.dev | sh` 安装 CLI（虚构域），这种复制粘贴即执行的模式被当成文档范式复用到真实产品时会成为供应链风险点；建议成稿时替换为真实且可校验的安装说明。
- 锚点跳转依赖 id 唯一 — TOC/侧栏均为 #锚点，长文多节时若 id 冲突或缺失，跳转会静默失效（无脚本可兜底）。
- 注入面 — 用户内容逐字进 prompt；若用户把产品文档原文（含脚本片段）粘进来，成稿可能原样带出可执行内容，预览 iframe 允许脚本。
风险提醒：绿色，放心使用。判级对象＝skill 自身目录（SKILL.md + example.html/example.md，本目录零脚本、零凭证读取、零写盘指令、无网络调用代码）。按批4 终版口径，html-anything 模板一律 green：SKILL.md 全文未点名任何运行时服务后端/API，也不把用户素材送外部生成后端（无 orange 要件）；无逆向/冒充/绕过后端（无 red 要件）。目录内实际出现的端点仅有产物示例外链（无（example.html 全文无外链：无字体链接、无 CDN script、无图片 URL；仅 <a href="#"> 锚点与局部 id）），属「產物示例」，按口径不判级，仅在此自证列出。宿主侧另需知悉：预览 iframe 用 sandbox="allow-scripts allow-same-origin"、本地 agent CLI 被 spawn（next/src/lib/agents/invoke.ts）、共享指令要求成稿引 CDN——这些是平台行为，只作说明。
5第二遍独立确认
- [ok] 三栏文档页（侧导航 + 正文 + 右 TOC） — .layout 三列 240px / minmax(0,1fr) / 220px，且 1024px 隐藏 TOC、720px 隐藏 sidebar。
- [discrepancy] 「Inline-end TOC (sticky, scroll-spy)」 — TOC 存在，但 .toc 是普通 padding 布局、无 position:sticky，也无 scroll-spy 脚本（全文零 <script>）；高亮 .active 是写死的。
- [discrepancy] 「代码块: 圆角 + dark + 语言标签 + 复制按钮」 — 样例代码块为圆角浅底（--code-bg:#f4f4f2），无 dark 主题、无语言标签、无复制按钮。
- [discrepancy] 「callout: info / warn / danger 三色」 — 只有一种 accent 左描边 callout，无三色档位。
- [discrepancy] 「顶栏 search + version + 主题切换」 — 顶栏仅 brand + Search · ⌘K 输入框；无 version 标签、无主题切换控件。
- [ok] 样例正文的虚构 CLI 与外链 — get.filebase.dev 是虚构产品域的示例命令（curl -fsSL … | sh）、~/.config/filebase/credentials 为虚构凭证路径；属演示文本，不是本 skill 的运行时依赖。
- [ok] 目录内零端点、零脚本 — 两文件皆无 <script>、无字体/CDN 链接、无图片 URL。
6结论
适合：适合 API 参考、SDK 快起步、教程类单页文档；适合需要三栏导航体系与长读体验的技术内容；也适合作为「文档站单页」的静态快照交付。
不适合：不适合需要真正交互的文档站（无 JS：搜索/滚动高亮/主题切换需另做）；不适合营销落地页或视觉主张强的品牌页；不适合移动优先场景（桌面 1440 优先，窄屏只是降级）；不适合多页文档体系（本模板是单页）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 docs-page.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent4277f1338716aa4d…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 2.0；GitHub API license.spdx_id = Apache-2.0；next/package.json 亦声明 Apache-2.0）
本站信息
收录日期2026-09-06
分类文档与知识
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。