1仕組みと動作原理
本skillは実行可能プログラムではなく、html-anythingの「テンプレート」です。1つのディレクトリ（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,
生成時、本テンプレート本文はプロンプト本文として扱われます。/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テキストとして返却されます。グローバル指示によりagentによるファイルシステムの操作は明示的に禁止されており、ディスク保存はフロントエンドが担当します。そのため、テンプレートディレクトリにはスクリプトもディスク書き込み能力も存在しません。
**禁止使用 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, {
本文ではエディトリアル・ミニマリズムを4つの要素で定義しています。暖色系モノクロキャンバス、セリフ体見出し + グロテスク体本文 + モノスペース体メタ情報の3つのフォントファミリーの役割分担、1pxのヘアラインボーダーと極めてソフトなチップ、広大な余白（マクロホワイトスペース）+ 控えめなインライン入場アニメーションです。
- Serif display + grotesque body + mono meta
サンプルではフォントファミリーの役割分担をCSS変数として定義しています。displayにはInstrument Serif、sansにはInter Tight、monoにはJetBrains Monoを指定しています。
--display: 'Instrument Serif', 'Newsreader', 'Lyon Text', Georgia, serif;
「ambient micro-motion」はIntersectionObserverによって駆動され、コードコメントでスクロールリスナーの使用を明示的に拒否しています: // Intersection-observer reveal — never window scroll listeners.
// Intersection-observer reveal — never window scroll listeners.
「極めてソフトなチップ」は、4組の淡い背景色/濃い文字色のセマンティックカラーペア（淡い赤/青/緑/黄）として実装され、ドロップシャドウの代わりにすべて1pxのヘアラインボーダーが採用されています。
--pale-red-bg: #FDEBEC; --pale-red-fg: #9F2F2D;
CLI側にはキーワード直接マッチングルートが存在します。skills-matcher.tsがユーザーコンテンツ内のキーワードを本テンプレートidに直接マッピングし、マッチした場合はconfidence＝ヒット数×2+3を付与し、閾値3に達した場合はローカルルールを採用してモデルによるテンプレート選択をスキップします。
[["editorial", "编辑", "杂志风", "serif", "排版"], "web-proto-editorial"],
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外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（Instrument Serif / Inter Tight / 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；SKILL.md 正文无 URL。
- [ok] 微动效实现方式 — 示例内联脚本用 IntersectionObserver(threshold 0.08) 一次性 reveal + unobserve，注释自述不用滚动监听。
- [ok] hairline / chip 是否按正文实现 — --hairline #EAEAEA 贯穿边框；.chip--green/blue/red/yellow 四组浅底深字，与正文「1px hairline borders, 极柔和 chip」对应。
- [unlocatable] 无 JS 时 reveal 是否兜底 — 示例的 .reveal 初始态与 is-in 类由脚本切换，styles 中未见 no-JS 或 prefers-reduced-motion 的兜底规则；无法从源码确证降级行为，未在正文作断言。
- [ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["editorial", "编辑", "杂志风", "serif", "排版"], "web-proto-editorial"] 行。
- [ok] 判级 green 自证 — 目录零脚本文件（示例内联 reveal 属产物示例）、零凭证、零写盘；正文无运行时接口 → green。
- [ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文。
6結論
cd20ceb19bfbeb7f…