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

该 skill 是 html-anything 的「模板包」：frontmatter 供选择器取元数据，SKILL.md 正文（frontmatter 之后的 body）被 loader 原样读出后作为模型指令。

next/src/lib/templates/loader.ts

const { fm, body } = parseFrontmatter(raw);

本模板正文 24 行 / 705 字节（意图 + 6 条警示版式元素）；frontmatter 走 parseFrontmatter 拆成 fm/body 两份，目录内没有任何脚本参与。

真正送进模型的 prompt = 共享设计指令 + 本模板正文 + 【输入格式】+【用户内容】；共享指令还带一条覆盖规则，声明模板里的页数/版面数字不是上限。

next/src/lib/templates/shared.ts

return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}

同文件里紧随的覆盖规则逐字写着：模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。

产出纪律由共享指令硬性约束：禁止 agent 使用任何文件系统工具，HTML 必须以 stdout 文本流式输出、由前端落盘。

next/src/lib/templates/shared.ts

- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何

本模板自身不声明落盘方式，完全依赖这条共享约束。

警示语义靠「45° hazard 条纹 + 删除线标题」双重符号实现：条纹占顶/底，标题用删除线表达「否定/被否决」。

next/src/lib/templates/skills/deck-safety-alert/SKILL.md

- 顶/底 45° 红黑 hazard 条纹

同段还有「- 红色删除线否定标题」，两者一起构成事故通报的视觉惯例。

严重度分级用 L1/L2/L3 三色 tier 卡承载：绿/琥珀/红分别对应，把风险等级做成可扫读的卡片。

next/src/lib/templates/skills/deck-safety-alert/SKILL.md

- L1/L2/L3 绿 / 琥珀 / 红 tier 卡片

这是本模板与通用 deck 的主要差异点：版式元素本身就编码了分级语义。

策略即代码场景用 policy-yaml 代码块呈现：红左边框 + bad 关键词高亮。

next/src/lib/templates/skills/deck-safety-alert/SKILL.md

- policy-yaml 代码块 (红左边框 + bad 关键词高亮)

对应意图句里的「policy-as-code」用途。

CLI 关键词路由：safety / alert / 安全 / 告警 / warning → deck-safety-alert。

cli/src/skills-matcher.ts

[["safety", "alert", "安全", "告警", "warning"], "deck-safety-alert"],

该行与 eng-runbook（runbook/oncall/事故/incident）互为邻居，事故类内容按语义分流到两个模板。

2核心能力

01顶/底 45° 红黑 hazard 条纹的警示框

02删除线否定标题（表达「不可做/已否决」）

03L1/L2/L3 三色严重度 tier 卡（绿/琥珀/红）

04圆点状态 alert box（状态指示）

05policy-yaml 代码块：红左边框 + bad 关键词高亮，服务 policy-as-code 叙事

06红绿 checklist + 事故堆叠柱状图（复盘量化）

07适用场景自述：安全 / 风险 / 事故复盘 / red team / policy-as-code

08CLI 关键词路由：safety / alert / 告警 / warning → deck-safety-alert

3外部依赖

Kind	Dependency / Endpoint
cli	宿主本机 agent CLI（应用侧 spawn；非本 skill 指令）
network	Google Fonts（产物示例引用，非 skill 正文要求）
network	SVG 命名空间 URI（非网络端点）

4管控建议与判定依据

建议配套管控措施

面向 Agent

声明可访问域名与密钥范围

面向管理者

密钥最小权限，保留请求日志

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

网络端点: 声明外部网络访问: example.html 命中多条 fonts.googleapis.com 字体 @import 与 SVG 命名空间 http://www.w3.

审计说明： 。判级对象＝skill 目录（SKILL.md + example.html）：无可执行脚本、无凭证读取、无写盘指令；SKILL.md 正文零 URL、零 CDN/接口要求，只有 6 条警示版式元素的文字规格。目录内端点自证：example.html 的多条 fonts.googleapis.com @import 与 SVG 命名空间 URI http://www.w3.org/2000/svg（非请求）。本仓 html-anything 模板按批4口径统一 🟢 绿档：判级对象＝skill 自身目录；宿主壳（loader.ts/assemblePrompt/本地 agent CLI/预览 iframe）与 example.html 里的字体、CDN 引用属产物期行为（由浏览器拉取、skill 执行时不外发），只写进 reason/risks，不判档。

5第二遍独立确认

[ok] 文件清单（2 个文件，无脚本） — SKILL.md(705B) + example.html(27352B)。
[ok] 正文零端点复核 — SKILL.md 内 http/CDN/fetch/script 零命中。
[ok] 目录内端点自证 — example.html: fonts.googleapis.com（多条 @import）+ http://www.w3.org/2000/svg（SVG 命名空间，无请求）。
[ok] 无凭证读取 — key/secret/token/.env 零命中。
[ok] 无写盘指令 — SKILL.md 无 write/save 类指令；shared.ts 明令禁文件工具。
[ok] 6 条版式元素逐条可复核 — hazard 条纹 / 删除线标题 / L1-L2-L3 tier 卡 / 圆点 alert box / policy-yaml 代码块 / checklist + 堆叠柱状图全在正文。
[ok] 样例产物符合 deck 约定 — example.html: 8 个 <section>、8 处 class 含 slide、无 data-slide-id（id 回退为序号）。
[ok] official_desc 逐字命中 — 与第 6 行 description 引号内文本一致。

6结论

领域语义准确：hazard 条纹、删除线标题、L1/L2/L3 卡都是安全通报的既有视觉语言。

把「分级」当成模板的一等公民（L1/L2/L3 三色卡），而不只是配色差异。

覆盖 policy-as-code 场景：policy-yaml 代码块带 bad 关键词高亮。

复盘可量化：红绿 checklist + 事故堆叠柱状图。

适合： 适合安全团队的事故复盘、red team 汇报、policy-as-code 评审、风险登记册汇报；也适合把 L1/L2/L3 分级直接做成卡片给管理层扫读。

不适合： 不适合常规产品/营销 deck（警示语义会喧宾夺主）；不适合需要喜庆/中性语气的场合；不适合纯数据图表型汇报（本模板交付的是分级与通告结构，不是分析深度）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload deck-safety-alert.tar.gz

sha256: e4a5a22db95ff0b0…

Option B · Copy Guide for Agent

install.json

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

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.