Design & Motion · nexu-io/html-anything

deck-safety-alert

Name: deck-safety-alert
Author: nexu-io/html-anything

Red-amber warning color scheme + hazard stripes + L1/L2/L3 tier cards + strikethrough headlines

L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（工作副本根目录 LICENSE 文件 = Apache License Version 2.0；GitHub API spdx_id=Apache-2.0。注意：skill 目录本身不含独立 LICENSE，许可来自仓库根；第三方来源模板在 README 另有署名说明）Commit 553ed98c28

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

This skill is a "template package" for html-anything: frontmatter provides metadata for the selector, and the SKILL.md body (the text following frontmatter) is read as-is by the loader to serve as model instructions.

next/src/lib/templates/loader.ts

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

The template body consists of 24 lines / 705 bytes (intent + 6 warning layout elements); frontmatter is parsed via parseFrontmatter into fm/body, and no scripts within the directory are involved.

The prompt actually sent to the model = shared design instructions + this template's body + [Input Format] + [User Content]; the shared instructions also include an override rule stating that the number of pages/layouts in the template is not an upper limit.

next/src/lib/templates/shared.ts

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

The override rule immediately following in the same file verbatim states: The template only defines "available layouts / styles / color palettes / fonts / component libraries", and **does not define** the number of slides / frames / cards / sections.

Output discipline is strictly enforced by shared instructions: the agent is prohibited from using any file system tools, and HTML must be output as a text stream via stdout, to be persisted to disk by the front end.

next/src/lib/templates/shared.ts

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

This template itself does not declare persistence methods, relying entirely on this shared constraint.

Warning semantics are implemented using the dual symbols of "45° hazard stripes + strikethrough headlines": stripes occupy the top/bottom, and headlines use strikethroughs to convey "negation/rejected".

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

- 顶/底 45° 红黑 hazard 条纹

The same section also includes "- red strikethrough negation headlines"; together they form the visual convention for incident advisories.

Severity grading is carried by three-color tier cards for L1/L2/L3: green/amber/red correspond respectively, turning risk levels into scannable cards.

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

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

This is the primary differentiator between this template and generic decks: layout elements themselves encode classification semantics.

Policy-as-code scenarios are rendered using policy-yaml code blocks: red left border + bad keyword highlighting.

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

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

Corresponds to the "policy-as-code" use case mentioned in the intent statement.

CLI keyword routing: safety / alert / 安全 / 告警 / warning → deck-safety-alert.

cli/src/skills-matcher.ts

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

This line is adjacent to eng-runbook (runbook/oncall/事故/incident), dividing incident-related content into two templates based on semantics.

2Core Capabilities

01Warning box with 45° red-black hazard stripes at top/bottom

02Strikethrough negation headlines (conveying "do not do / rejected")

03L1/L2/L3 three-color severity tier cards (green/amber/red)

04Status indicator alert box with dot badges

05policy-yaml code block: red left border + bad keyword highlighting, serving policy-as-code narratives

06Red-green checklist + incident stacked bar chart (postmortem quantification)

07Applicable scenario description: safety / risk / incident postmortem / red team / policy-as-code

08CLI keyword routing: safety / alert / 告警 / warning → deck-safety-alert

3External Dependencies

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

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Declare allowed domains and key scope

For Administrators

Least privilege keys, retain request logs

Evidence & Triggers (File Paths & Excerpts)

网络端点: Declared external network access: example.html matches multiple fonts.googleapis.com font @import rules and the SVG namespace http://www.w3.

Audit Notes: Evaluation target = skill directory (SKILL.md + example.html): no executable scripts, no credential access, no disk-writing commands; SKILL.md body contains zero URLs and zero CDN/API requirements, only text specifications for 6 warning layout elements. In-directory endpoint self-attestation: multiple fonts.googleapis.com @import rules and the SVG namespace URI http://www.w3.org/2000/svg (non-request) in example.html. This repository's html-anything templates are uniformly rated 🟢 Green tier under Batch 4 criteria: evaluation target = skill directory itself; the host shell (loader.ts/assemblePrompt/local agent CLI/preview iframe) and font/CDN references in example.html are artifact-phase behaviors (fetched by the browser, not emitted during skill execution), recorded only in reason/risks without affecting the tier rating.

5Second-Pass Verification

[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 引号内文本一致。

6Verdict & Scenarios

Accurate domain semantics: hazard stripes, strikethrough headlines, and L1/L2/L3 cards are established visual languages in safety notifications.

Treats "classification" as a first-class citizen of the template (L1/L2/L3 three-color cards) rather than merely a color palette variation.

Covers policy-as-code scenarios: policy-yaml code block includes bad keyword highlighting.

Quantifiable postmortems: red-green checklist + incident stacked bar chart.

Best for: Suitable for security team incident postmortems, red team debriefs, policy-as-code reviews, and risk register presentations; also ideal for turning L1/L2/L3 classifications directly into cards for executive scanning.

Not for: Not suitable for standard product/marketing decks (warning semantics will overpower the content); not suitable for celebratory or neutral tones; not suitable for pure data-chart reporting (this template delivers tiering and advisory structure, not deep analysis).

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

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.