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外部依赖
| 类型 | 依赖 |
|---|---|
| cli | 宿主本机 agent CLI(应用侧 spawn;非本 skill 指令) |
| network | Google Fonts(产物示例引用,非 skill 正文要求) |
| network | SVG 命名空间 URI(非网络端点) |
4风险提醒 风险提醒:绿色 · 放心使用
风险提醒:绿色 · 放心使用
- 三色语义色与共享指令的「至多 1 个强调色」存在张力 — 本模板要求绿/琥珀/红并存;虽属语义色,仍可能让模型在实现时取舍,导致分级色不齐。
- 事故材料敏感度高(内容面) — 安全复盘常含内部事故细节、未修复漏洞;这些文本会随 HTML 进入预览与导出物。
- 预览 iframe 的 sandbox 组合偏宽(宿主侧) — template-picker.tsx:544 / preview-pane.tsx:297 = sandbox="allow-scripts allow-same-origin"。
- 用户内容逐字进 prompt(注入面) — assemblePrompt 原样拼接【用户内容】区块;本模板还会把其中片段渲染成代码块。
风险提醒:绿色,放心使用。判级对象=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结论
适合:适合安全团队的事故复盘、red team 汇报、policy-as-code 评审、风险登记册汇报;也适合把 L1/L2/L3 分级直接做成卡片给管理层扫读。
不适合:不适合常规产品/营销 deck(警示语义会喧宾夺主);不适合需要喜庆/中性语气的场合;不适合纯数据图表型汇报(本模板交付的是分级与通告结构,不是分析深度)。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 deck-safety-alert.tar.gz
sha256:
方式 B · JSON 格式安装指南,复制给 agente4a5a22db95ff0b0…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;GitHub API spdx_id=Apache-2.0。注意:skill 目录本身不含独立 LICENSE,许可来自仓库根;第三方来源模板在 README 另有署名说明)
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源:本站锁定 commit 快照经 /r2 分发;GitHub 为实时上游,内容可能已更新。