1实现原理 · 为什么它能做到
该 skill 不是可执行程序，而是 html-anything 的「模板」：一个目录（SKILL.md + example.html[/example.md]），由 loader.ts 在运行时扫盘读取——新增模板＝新增目录，不需要改 TypeScript。
Adding a template = adding a folder. No TS code change required; the API
frontmatter 是给选择器/API 的元数据（zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags），由 fmToMeta() 映射成 SkillMeta；frontmatter 之后的正文才是给模型的规格。
zhName: fm.zh_name ?? fm.name ?? id,
生成时该模板正文被当成 prompt body：/api/convert 用 assemblePrompt() 把「全局设计指令 + 本模板正文 + 用户内容」拼成一段 prompt，交给宿主的本地 agent CLI，HTML 由 stdout 流式捕获。
prompt = assemblePrompt({ body: skill.body, content, format });
模板正文之上还压着一段全局前置指令（SHARED_DESIGN_DIRECTIVES），把技术与内容纪律统一加在每个模板之前——示例 HTML 里普遍出现的 CDN/字体外链就源自这里（宿主壳注入，不是模板自身要求）。
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
产物以 stdout 文本返回：全局指令显式禁止 agent 动用文件系统，落盘由前端负责——所以模板目录既无脚本也无写盘能力。
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
example.html 是随包预渲染示例：/api/templates/<id>/preview 原样按 text/html 返回给 iframe（选择器内联预览），/api/templates/<id>/example 另把 example.md + example.html 一起返回。
return new Response(skill.exampleHtml, {
正文把风格定义成四件可检查的事：newsprint 画布 + hairline 网格分隔、单体黑色 grotesque 标题、viewport-bleeding 巨数字、hazard-red 强调色 + ASCII 装饰。
- Newsprint canvas + hairline grid dividers
示例用 CSS 变量把风格固化成一套 token：--paper #F4F4F0（newsprint）、--hazard #E61919、Archivo Black 作 display、JetBrains Mono 作 meta。
--hazard: #E61919;
示例的 hazard 色被用作结构性分隔（hr.hazard 与 meta-row 的 1px 上边框），而非装饰性点缀。
hr.hazard { border: 0; border-top: 1px solid var(--hazard); margin: 0; }
示例以方括号框体实现 ASCII 气质的装饰（.ascii-frame::before content: '[' / ::after content: ']'），并没有使用正文举例的 ┌─┘ 制表符。
.ascii-frame::before { content: '['; color: var(--hazard); }
CLI 侧另有一条关键词直配通道：skills-matcher.ts 把用户内容里的关键词直接映射到该模板 id，命中即给 confidence＝命中数×2+3，达到阈值 3 就走本地规则、不再让模型挑模板。
[["brutalist", "工业", "粗野", "swiss", "industrial print"], "web-proto-brutalist"],
CLI 兜底匹配用到的阈值常量：内容长度需超过 60 字符才启用 AI 摘要匹配；强信号阈值是 3。
const MIN_CONTENT_LENGTH_FOR_AI = 60;
宿主壳用 sandbox="allow-scripts allow-same-origin" 的 iframe 渲染示例/产物（允许脚本、允许同源）——这是产品壳取舍，写进风险，不参与本 skill 判级。
sandbox="allow-scripts allow-same-origin"
2核心能力
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Google Fonts（Archivo Black / Archivo / JetBrains Mono） |
| network | Google Fonts 静态资源域（preconnect） |
4风险提醒 风险提醒：绿色 · 放心使用
- ASCII 装饰未按正文示例实现 — 正文举例 ┌─┘ 制表符，示例用 [ ] 方括号 + 网格；若用户指名要制表符风格，需在提示里补一句，否则模型按示例走。
- 强对比风格的可用性代价 — --ink #060606 on --paper #F4F4F0 对比极高，但巨数字/hairline 1px 网格在小屏上易拥挤，模板未给响应式约束。
- 外链字体 — 示例引用 fonts.googleapis.com / fonts.gstatic.com（另有产品壳注入的 Tailwind CDN）；属产物/宿主行为，不计档。
- 单个强调色纪律依赖模型自觉 — 正文只写「Hazard-red accent」，未写「禁止第二个强调色」（对比 vfx-text-cursor 有明确负面约束），风格漂移时缺少护栏。
5第二遍独立确认
- [ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
- [ok] 无脚本执行 — grep -c "<script" example.html = 0。
- [ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect；SKILL.md 正文无 URL。
- [discrepancy] ASCII 装饰的具体字符 — SKILL.md 写「ASCII 装饰 (┌─┘ 等)」，示例无 ┌/─/┘ 命中，改用 .ascii-frame 的 [ ] 方括号；属实现变体，语义（机械式框架标记）一致。
- [ok] hazard 色是否真结构性使用 — --hazard 用于 hr.hazard 分隔线、.brand sup、.meta-row b、.ascii-frame 伪元素、.abstract 标签等结构位置，非纯点缀。
- [ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["brutalist", "工业", "粗野", "swiss", "industrial print"], "web-proto-brutalist"] 行。
- [ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘；正文无运行时接口，端点仅见示例 → green。
- [ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「Swiss industrial-print 风: 单字 grotesque、巨数字、ASCII 装饰」。
6结论
aa6036af392f1c58…553ed98c28