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管控建议与判定依据
建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据（文件路径与关键语句摘要）
- SKILL.md: 纯提示词指令与规则文本，无脚本执行与外部影响
审计说明： 。判级对象＝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 优先，窄屏只是降级）；不适合多页文档体系（本模板是单页）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload docs-page.tar.gz
sha256:
Option B · Copy Guide for Agent4277f1338716aa4d…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.