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, {
正文把「Apple-tier 软质感」拆成四件可执行的事：银/奶 canvas + ambient mesh 背景、双层斜面（double-bezel）卡片、button-in-button CTA、spring 微反弹动效。
- Double-bezel 卡片 (内外两层圆角 + 高光)
双层斜面用一对圆角变量实现：外层 --shell-radius 2.25rem，内层 --core-radius = shell - 0.4rem，配合 --innerlight 高光做「嵌套斜角」观感。
--shell-radius: 2.25rem;
spring 动效由专门的缓动曲线承载（--ease-spring: cubic-bezier(0.16, 1.16, 0.3, 1)，贝塞尔过冲 >1），并配一条常规 --ease 作非弹性过渡。
--ease-spring: cubic-bezier(0.16, 1.16, 0.3, 1);
ambient mesh 背景是两个大半径模糊色斑（.mesh::before/::after）缓慢漂移，并对 prefers-reduced-motion 做了关闭处理。
@media (prefers-reduced-motion: reduce) { .mesh::before, .mesh::after { animation: none; } }
CLI 侧另有一条关键词直配通道：skills-matcher.ts 把用户内容里的关键词直接映射到该模板 id，命中即给 confidence＝命中数×2+3，达到阈值 3 就走本地规则、不再让模型挑模板。
[["苹果", "Apple", "iOS", "soft", "squircle"], "web-proto-soft"],
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（Plus Jakarta Sans / JetBrains Mono） |
| network | Google Fonts 静态资源域（preconnect） |
4风险提醒 风险提醒：绿色 · 放心使用
- Button-in-button 仅有文字规格 — 正文只写「- Button-in-button CTA」一句，示例未见对应的嵌套按钮结构（grep 无 btn-in-btn 类名）；该项的实现细节需模型自行补全，容易出现风格不一致。
- 动效与性能 — mesh 用大半径 blur + 持续动画，低端设备/长页面可能掉帧；示例已做 reduced-motion 关闭，但未做性能降级（如暂停不可见区域动画）。
- spring 曲线依赖浏览器插值 — cubic-bezier 过冲在不同引擎下视觉略有差异；模板未给降级方案。
- 外链字体与宿主 Tailwind — 示例引用 Google Fonts 两域（+ 产品壳注入的 Tailwind CDN）；属产物/宿主行为，不计档。
5第二遍独立确认
- [ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
- [ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect；无 <script src> 外链；SKILL.md 正文无 URL。
- [ok] Double-bezel 是否落地 — --shell-radius/--core-radius 变量 + BENTO 注释区块 + .b-card .core 结构（grep 命中 .b-card .core 与 .hero-preview .core）。
- [discrepancy] Button-in-button 是否在示例中 — SKILL.md 写了「- Button-in-button CTA」，但示例中未找到该结构的类名或嵌套按钮标记（对 example.html grep 无 in-btn/btn-in-btn 类命中），属示例只演示其余三条。
- [ok] spring 缓动是否真实使用 — --ease-spring 定义于 :root，并在 .hero-preview 等元素上以 transition: transform 360ms var(--ease-spring) 使用。
- [ok] reduced-motion 处理 — 存在 @media (prefers-reduced-motion: reduce) 关闭 .mesh 动画；同系列的 brutalist/editorial 未见同等处理。
- [ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["苹果", "Apple", "iOS", "soft", "squircle"], "web-proto-soft"] 行。
- [ok] 判级 green 自证 — 目录零脚本文件（示例内联 reveal 属产物示例）、零凭证、零写盘；正文无运行时接口 → green。
6结论
d75a8b1932228559…553ed98c28