1仕組みと動作原理
テンプレート本体には実行可能コードが含まれていません。loader が src/lib/templates/skills/<id>/SKILL.md から frontmatter と本文を読み込み、本文（body）を example の内容とともに LoadedSkill として返します。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
ここで行われていること：SKILL.md が唯一の振る舞いの定義元です。frontmatter はセレクター描画用（zh_name/emoji/aspect_hint/tags/example_* など）であり、本文全体がプロンプトとなります。loader はセマンティックな検証を行わず、テンプレートの記述をそのまま渡します。
ホストは発行前に固定順序でプロンプトを組み立てます。テンプレート本文は SHARED_DESIGN_DIRECTIVES と【入力フォーマット】/【ユーザーコンテンツ】の間に挟まれます。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
ここで行われていること：テンプレートは「この成果物がどのような外観を持つか」（レイアウト/リズム/コンポーネント）のみを定義し、共通指示がテンプレート横断のハードな制約（単一ファイル HTML、ファイルツールの使用禁止、Tailwind および Google Fonts の CDN 利用、コンテンツの信憑性、中国語・英数間のスペース処理）を担保します。
共通指示はハードな制約をエージェントへの明示的な禁止事項として記述し、コンテンツ主導の数量決定を強制します（テンプレート内の数値は参考下限に過ぎません）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
同ファイルの続きにも規定があります。出力される slide / frame / card / section の数量は、【ユーザーコンテンツ】の実際の長さと情報構造によって完全に決定されます。これにより、コンテンツが増加しても本テンプレートが破綻しない理由が説明されます。段落ごとに最低1枚のカード/セクションが割り当てられ、テンプレートはレイアウトプールを提供するにとどまります。
実際に実行されるのは、ユーザーのローカル環境に導入・ログイン済みのコーディングエージェント CLI です。ホストが子プロセスを spawn し、プロンプトを渡して stdout から HTML をストリーミングキャプチャします。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
ここで行われていること：テンプレート skill はプロンプトを提供するのみで、実行能力（コード生成やツール実行を含む）はホスト CLI の既存権限に依存します。skill ディレクトリ自体にはスクリプトのエントリポイントが存在しないため、セキュリティ評価はディレクトリ内のアセットのみに基づいて行われます（ホストの挙動は対象外）。
/api/convert がテンプレートの実行パスとなります。skill.body とユーザーコンテンツをプロンプトに組み立てた後、invokeAgent に引き渡します。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
編集モードでは buildEditPrompt（差分を最小限に抑える編集、ファイルツール禁止、完全な HTML の直接ストリーミング出力を要求）が別途使用されます。そのため、この種別のテンプレートが生成する成果物の形態は安定しています。単一ファイル HTML、インライン CSS/SVG で構成され、外部リンクはフォントおよび特定テンプレートが明示的に要求するグラフライブラリのみに限定されます。
テンプレートはコンシューマー向けプロダクト感のあるデータウォールとして位置づけられており、エディトリアルタイポグラフィ（セリフ体の見出し + 等幅フォントの数値）と控えめなハイライト色によって一般的な管理画面と差別化されています。
next/src/lib/templates/skills/dating-web/SKILL.md
【意图】消费产品感的数据墙, editorial typography + 克制的高亮色。
サンプルでは DM Serif Display / DM Serif Text + IBM Plex Mono の3つのフォントファミリーを使用してこの世界観を実現しています。ブランド名にはウェイト800の斜体セリフ体、数値には等幅フォントを用い、背景には温かみのある用紙色 #f4ede0 を採用しています。
5つのセクションからなるレイアウト：左レイルナビゲーション → Ticker bar（リアルタイムシグナル） → ヘッドライン KPI → 30日間のマッチ数バーチャート → マッチ率トレンドブロック。
next/src/lib/templates/skills/dating-web/SKILL.md
- Ticker bar 实时信号
ここで行われていること：コンシューマー向けプロダクト感を具体的なパーツへ落とし込んでいます。シグナルバー（サンプルでは静的テキストバー + NEXT TIER の達成条件案内）を配置することで、帳票ではなくプロダクトのような佇まいを持たせています。
ヘッダーの KPI エリアは実質的に 3×3 のグリッド型統計ウォール（Mutuals on file / Replies in 24h / Communities / Match rate / 2nd dates / Exes…）として構築されており、各セルに口語的な注記が添えられています。
next/src/lib/templates/skills/dating-web/example.html
<div class="label">Match rate</div>
SKILL.md には Headline KPIs としか記載されていませんが、サンプルでは9マスへ柔軟に拡張し、.good/.bad によるステータスカラーリングと、.note による感情のこもった注釈（例: too fast. wait 4–6h. they notice.）を付与しています。ネーミングとコピーライティングの双方からコンシューマー感を演出する手法です。
30日間のバーチャートは、グラフライブラリやスクリプトを一切使用せず、純粋なインライン SVG（複数の rect、最後の1本はハイライト色 #c14a2b で強調）によって手作業で描画されています。
next/src/lib/templates/skills/dating-web/example.html
<rect x="630" y="60" width="14" height="160" fill="#c14a2b"></rect>
ここで行われていること：JS なしで30日間の相互マッチのリズムを表現しています。最後のバーをハイライトすることで、インタラクションを必要とせずに現在の値を示しつつ視覚的フォーカスを形成しています。
サンプルでは狭小画面時に左レイルをトップバーに折りたたんでおり（メディアクエリ内で aside.rail の右ボーダーをなくし下ボーダーを追加）、デスクトップ向けとしながらもレスポンシブなフォールバックを備えています。
next/src/lib/templates/skills/dating-web/example.html
aside.rail { border-right: none; border-bottom: 1px solid var(--ink); }
同一メディアクエリ外でもレイルの brand（mutuals. + アバター枠）とナビゲーションリスト（mutuals & communities 等）は維持され、表示縮小後もレイアウトの意味構造が損なわれません。
ページにはバージョン番号表示（mutuals.v0.6.1）や「NEXT TIER AT 2,080 MUTUALS」などのプロダクト的なディテールが盛り込まれており、実在するコンシューマー向けアプリの質感を再現しています。
next/src/lib/templates/skills/dating-web/example.html
<div style="opacity:0.7;margin-top:2px;">mutuals.v0.6.1</div>
ここで行われていること：バージョン番号やレベル条件といったプロダクトの外殻ディテールにより、データウォールがレポートのスクリーンショットではなく実在するアプリUIのように映ります。これこそが本テンプレートと一般的なダッシュボードとの根本的な違いです。
2コア機能
01左側レイルナビゲーション（ブランド + アバター枠 + ナビゲーションリスト）
02Ticker bar シグナルストリップ（サンプルでは NEXT TIER 条件表示を含む）
03ヘッドライン KPI（サンプルでは 3×3 グリッドに拡張、good/bad のセマンティックカラーと口語的な注釈付き）
0430日間のマッチ数バーチャート（インライン SVG 手描き、最新値のハイライト付き）
05マッチ率トレンドブロック
06エディトリアルタイポグラフィ構成（セリフ体見出し + 等幅フォント数値）によるコンシューマー感の演出
07狭小画面へのフォールバック対応（レイルをトップバーへ折りたたみ）
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への影響はありません。
監査ノート： 評価判定は skill 自身のディレクトリ（SKILL.md と example.html の2ファイルのみで構成され、scripts/ なし、組み込み CLI なし、認証情報の読み込みなし、ディスク書き込みなし）のみに基づいて行われています。スクリプトのエントリポイント、同梱 CLI、認証情報アクセス、ディスク書き込み命令は存在しません。SKILL.md 本文は実行時に外部エンドポイントを読み込む指示を含んでいません（レイアウト構成と外観要件のみを定義しており、フォントファミリー名自体はエンドポイントではありません）。実行時に外部送信は発生しません。ディレクトリ内に実在するエンドポイントは fonts.googleapis.com および fonts.gstatic.com（example.html:7-9 の DM Serif Display / DM Serif Text / IBM Plex Mono）のみです。これらは規定に基づき**成果物実行時の参照**（生成された HTML がブラウザで開かれた際に CDN/フォントを取得するもので、skill 実行時のフェッチ・送信・アップロードではない）に分類されるため、リスク判定は引き上げず、エンドポイントの列記のみを行います。ホスト側のシェル機構（loader → assemblePrompt → ローカル agent CLI spawn、プレビュー iframe sandbox）はホスト側の挙動として扱い、verdict.risks に記録します。
5二重目の独立検証
- [discrepancy] KPI 数量与 SKILL.md 的关系 — SKILL.md 仅写 Headline KPIs 未给数量；示例实现为 3×3 共 9 格（含 Exes in your circle / Shared blocks / Logged-off hrs 等生活化指标）。属示例扩展而非模板要求，详情页不应把 9 格当作固定规格。
- [ok] 「无脚本」判定 — dating-web/ 内 <script> 计数为 0；30 天柱状图以 <rect> 手工排布（含高亮柱 fill="#c14a2b"），无图表库、无 Canvas。
- [ok] 端点与判级 — 目录内 http(s) 仅 fonts.googleapis.com（css2 样式表）与 fonts.gstatic.com（preconnect），均为产物期引用；SKILL.md 只写字族风格要求、未点名端点，执行期零外发，维持 green。
- [ok] 窄屏降级是否存在 — 媒体查询内 aside.rail 改为 border-right:none + border-bottom，左栏折叠为顶部条，与桌面 1440 定位不冲突，属可用的移动端降级。
- [ok] license / stars / commit 元数据 — GitHub API（api.github.com/repos/nexu-io/html-anything）：spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z；工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 553ed98c283f 同源）。
- [ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md；目录内文件清单已用 glob 全量核对（含隐藏文件），无 scripts/、无 references/、无二进制资产（competitive-teardown 的 assets/ 为纯 HTML，另行记录）。
6結論
最適な用途： ブランド性を重視したコンシューマープロダクトのデータウォールに最適：コミュニティ／ソーシャル／マッチング系サービスの運用ダッシュボード、グロース振り返り、年間サマリーページなど。また、ダッシュボードのシステムフォント構成が社内ツールに寄りすぎている場合のオルタナティブとしても適しています。
不向きな用途： フォーマルな企業向け帳票・レポート（トーンや配色がコンシューマー／雑誌風であり、指標注記に主観的なコメントが含まれるため）；厳格な定義やデータソースの明記が求められるレポート（data-report を推奨）；インタラクティブなフィルタリングが必要なデータ探索シナリオ（スクリプトやデータバインディングが存在しないため）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload dating-web.tar.gz
sha256:
Option B · Copy Guide for Agente3773d07ae610754…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.