1实现原理 · 为什么它能做到

该 skill 不是可执行程序，而是 html-anything 的「模板」：一个目录（SKILL.md + example.html[/example.md]），由 loader.ts 在运行时扫盘读取——新增模板＝新增目录，不需要改 TypeScript。

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIR 固定在应用 cwd 的 src/lib/templates/skills；listSkills() 遍历一级子目录并按 isValidBundledId 过滤，逐目录读 SKILL.md、解析 frontmatter，所以「选择器元数据」和「生成用 prompt 正文」出自同一份文件。

frontmatter 是给选择器/API 的元数据（zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags），由 fmToMeta() 映射成 SkillMeta；frontmatter 之后的正文才是给模型的规格。

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

id 取自目录名；example 元数据（example_id/name/format/tagline/desc/source_url）只在目录带 example.md/html 时才产出 SkillExampleMeta，body 被刻意排除在列表 API 之外（注释：Body is excluded so we can return the entire registry in one cheap fetch）。

生成时该模板正文被当成 prompt body：/api/convert 用 assemblePrompt() 把「全局设计指令 + 本模板正文 + 用户内容」拼成一段 prompt，交给宿主的本地 agent CLI，HTML 由 stdout 流式捕获。

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

同路由另有 editFromHtml/editFromContent 的「最小化差异编辑」分支；模板正文在这条链路上只是字符串，没有求值、没有执行。

模板正文之上还压着一段全局前置指令（SHARED_DESIGN_DIRECTIVES），把技术与内容纪律统一加在每个模板之前——示例 HTML 里普遍出现的 CDN/字体外链就源自这里（宿主壳注入，不是模板自身要求）。

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

模板正文只负责风格/版面/组件，不重复这些硬要求；判级只算模板自身目录，该端点是宿主壳行为，写进 security.reason 自证。

产物以 stdout 文本返回：全局指令显式禁止 agent 动用文件系统，落盘由前端负责——所以模板目录既无脚本也无写盘能力。

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

原文续句要求「不要把 HTML 写到任何 .html 文件里……前端直接捕获你的 stdout 文本, 文件落盘由前端负责」；产物最终由前端写入任务记录与导出。

example.html 是随包预渲染示例：/api/templates/<id>/preview 原样按 text/html 返回给 iframe（选择器内联预览），/api/templates/<id>/example 另把 example.md + example.html 一起返回。

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

示例只作预览/文档，不参与生成 prompt（生成只用 SKILL.md 正文），因此它的外链不影响模板自身的能力边界。

正文用【布局】清单把页面钉成四块：季度 banner、3 个 objectives 列（每列一组 KR）、每条 KR 的进度条+数值+owner+状态 pill、右栏摘要。

next/src/lib/templates/skills/team-okrs/SKILL.md

- 3 个 objectives 列, 每个含一组 KR

同段紧接「- 每个 KR 一条进度条 + 数值 + owner avatar + 状态 pill」与「- 右侧 'this quarter at a glance' 摘要」——正文直接给出可落地版式，不给模型自由发挥的空间。

示例把规格兑现成带三态状态机的静态看板：KR 行有进度条、owner avatar，状态 pill 有 on-track/at-risk/off-track 三种配色。

next/src/lib/templates/skills/team-okrs/example.html

<span class="pill on-track"><span class="dot"></span>On track</span>

页面 meta 行自述「14 October → 31 December 2025 · Owner Devon Park · 3 objectives · 9 key results」，与正文「3 个 objectives」及示例中 9 条 KR 对得上。

示例是零外链静态件：无 <script>、head 无 CDN/字体 link，字体走系统栈，双击即可离线打开。

next/src/lib/templates/skills/team-okrs/example.html

--display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

这是它端点面为空的直接证据（对目录内两文件 grep 'https?://' 零命中）。

CLI 侧另有一条关键词直配通道：skills-matcher.ts 把用户内容里的关键词直接映射到该模板 id，命中即给 confidence＝命中数×2+3，达到阈值 3 就走本地规则、不再让模型挑模板。

cli/src/skills-matcher.ts

[["OKR", "KR", "关键结果", "objectives", "季度目标", "key results"], "team-okrs"],

命中 OKR/KR/关键结果等词即本地直配到 team-okrs（测试 cli/src/__tests__/skills-matcher.test.ts 断言「matches OKR content to team-okrs」）。

CLI 兜底匹配用到的阈值常量：内容长度需超过 60 字符才启用 AI 摘要匹配；强信号阈值是 3。

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

另有 SCENARIO_SIGNALS 按模板 scenario 给关键词加权、fallbackMatch 用 tags/zhName/description 打分，两层都失效才调用 agent 做摘要匹配。

宿主壳用 sandbox="allow-scripts allow-same-origin" 的 iframe 渲染示例/产物（允许脚本、允许同源）——这是产品壳取舍，写进风险，不参与本 skill 判级。

next/src/components/template-picker.tsx

sandbox="allow-scripts allow-same-origin"

preview-pane.tsx / deck-viewer.tsx 同款；示例 HTML 的内联 JS 只在浏览器预览时执行，skill 自身不执行任何脚本。

2核心能力

01季度 banner（Q? + 主题）

023 个 objectives 列，每列一组 KR

03每条 KR：进度条 + 数值 + owner avatar + 状态 pill

04三态状态样式（on track / at risk / off track）

05右栏「This quarter at a glance」摘要

06零依赖静态渲染（无 JS、无外链字体）

4管控建议与判定依据

建议配套管控措施

面向 Agent

可自动加载

面向管理者

登记来源与版本

判定依据（文件路径与关键语句摘要）

SKILL.md: 纯提示词指令与规则文本，无脚本执行与外部影响

审计说明： 。判级对象＝本 skill 目录（next/src/lib/templates/skills/team-okrs/），逐文件核对：零脚本、零凭证读取、零写盘；目录内 grep 不到任何 http(s) 端点（无 CDN、无字体外链）；SKILL.md 正文只规定版面/风格/字体族名，未点名任何运行时外部接口，故为纯指令模板＝green。宿主侧说明（不计档）：html-anything 产品壳会经 assemblePrompt() 把正文拼进 prompt 并 spawn 本地 agent CLI，并注入 cdn.tailwindcss.com + Google Fonts 要求（next/src/lib/templates/shared.ts），预览 iframe 用 sandbox="allow-scripts allow-same-origin"（next/src/components/template-picker.tsx）。

5第二遍独立确认

[ok] skill 目录文件清单 — find 只有 SKILL.md + example.html，无 scripts/references/模板/数据文件。
[ok] external_deps 为空 — 对两文件 grep 'https?://' 零命中；head 无 <link>、无 <script src>。
[ok] 无脚本执行 — grep -c "<script" example.html = 0；SKILL.md 无任何命令行/脚本指令。
[ok] frontmatter 字段与 loader 白名单对齐 — name/zh_name/en_name/emoji/description/category/scenario/aspect_hint/tags 全在 SkillFrontmatter 类型内，可被 parseFrontmatter 正确解析。
[ok] 「3 个 objectives」与示例一致 — 示例 meta 行自述 3 objectives · 9 key results，页面含 9 条 KR（.kr 计数 9）。
[ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["OKR", "KR", "关键结果", "objectives", "季度目标", "key results"], "team-okrs"] 行；测试 skills-matcher.test.ts 断言匹配到 team-okrs。
[ok] 判级 green 自证 — 目录零脚本/零凭证/零写盘、无端点；宿主壳的 Tailwind/字体注入与 iframe sandbox 均写在 reason 说明中，不计档。
[ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「季度 banner + 3 个目标 + KR 进度条 + owner + 状态 pill」。

6结论

规格与示例可对照：正文 4 条布局，示例逐条命中（banner / 3 objectives / KR 行三件套 / 右栏 glance）

状态语义直接可用：三态 pill 把「进度健康度」编码进版面，读者一眼分级

零外链零脚本：可离线双击打开、可批量截图，渲染成本最低

选择器/CLI 双通道可达：元数据归组 + 关键词强信号行直配

适合： 适合产品/团队季度汇报页、OKR 进度看板、需要「决策者一眼看进度」的内部页面；也适合当 dashboard 类页面的起手式。

不适合： 不适合需要交互筛选/下钻的真实仪表盘（本模板是静态单页，无数据绑定）；不适合对外的营销页（信息层级偏内部报表）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload team-okrs.tar.gz

sha256: fe13926b690c2c2a…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.