1仕組みと動作原理
本スキルは実行可能プログラムではなく、html-anythingの「テンプレート」です。loader.tsによって実行時にディスクから読み込まれる単一ディレクトリ（SKILL.md + example.html[/example.md]）であり、テンプレートの追加はディレクトリの追加のみで完結し、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,
生成時、テンプレート本文はプロンプトのbodyとして扱われます。/api/convertはassemblePrompt()を用いて「グローバルデザイン指示 + 本テンプレート本文 + ユーザーコンテンツ」を1つのプロンプトに組み立ててホストのローカル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テキストとして返却されます。グローバル指示によりエージェントによるファイルシステムへのアクセスは明示的に禁止されており、ディスク保存はフロントエンド側が担当します。したがって、テンプレートディレクトリにはスクリプトもファイル書き込み機能も存在しません。
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
example.htmlはパッケージに同梱された事前レンダリング済みのサンプルです。/api/templates/<id>/previewはiframe向けにtext/htmlとしてそのまま返却し（セレクター内インラインプレビュー用）、/api/templates/<id>/exampleはexample.mdとexample.htmlをセットで返却します。
return new Response(skill.exampleHtml, {
本文では「Appleクオリティのソフトな質感」を4つの実行可能な要素に分解しています。シルバー/クリームのキャンバス + ambient mesh背景、2層ベゼル（double-bezel）カード、button-in-button CTA、スプリング微小バウンドアニメーションです。
- Double-bezel 卡片 (内外两层圆角 + 高光)
2層ベゼルは角丸変数のペアによって実装されています。外層は--shell-radius 2.25rem、内層は--core-radius = shell - 0.4remとし、--innerlightハイライトと組み合わせて「ネストされたベゼル」の視覚効果を生み出します。
--shell-radius: 2.25rem;
スプリングアニメーションは専用のイージング曲線（--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背景は、2つの大きなぼかし色斑（.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フォールバックマッチングで使用される閾値定数：AI要約マッチングを有効にするにはコンテンツ長が60文字を超えている必要があり、強シグナルの閾値は3です。
const MIN_CONTENT_LENGTH_FOR_AI = 60;
ホストシェルはsandbox="allow-scripts allow-same-origin"が設定されたiframeを使用してサンプル/成果物をレンダリングします（スクリプトおよび同一オリジンアクセスを許可）。これは製品シェル側の設計判断であり、リスクとして記載されていますが、本スキルの安全性評価には影響しません。
sandbox="allow-scripts allow-same-origin"
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（Plus Jakarta Sans / JetBrains Mono） |
| network | Google Fonts 静态资源域（preconnect） |
4推奨統制措置と判定根拠
- SKILL.md: スクリプト実行や外部への副作用を伴わない、純粋なプロンプト指示およびルールテキストのみで構成
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…