1仕組みと動作原理
本テンプレートは「フォルダ＝テンプレート」構造における純粋なデータです。SKILL.mdはセレクター用のYAML frontmatterを持ち、本文はエージェント向けのレイアウト指示文です。リポジトリはテンプレート個別のコードを持たず、テンプレートの追加＝フォルダの追加となります。
next/src/lib/templates/loader.ts
SKILL.md — frontmatter (id, scenario, tags, …) + prompt body
loader.tsのファイル先頭コメントにディレクトリ規約が明記されています。frontmatterはプロセス内正規表現でパースされ（YAML依存なし）、本文はそのままprompt bodyとして抽出されます。フロントエンドには渡されません（「Body is excluded so we can return the entire registry in one cheap fetch without shipping prompt text to the browser.」）。
実行時はホストが本テンプレートの本文を共有デザイン指示とユーザーコンテンツの間に挟み込んで1つのプロンプトを構築します。テンプレートの「インテリジェンス」はこの自然言語の中にのみ存在し、実行可能コードは一切ありません。
next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
assemblePromptの戻り値は「共有デザイン指示 + テンプレート本文 + 【入力形式】+ 【ユーザーコンテンツ】」です。共有セクション（同一ファイルのSHARED_DESIGN_DIRECTIVES）は単一ファイルHTML、Tailwind/フォントCDN、コンテンツ駆動型の分量、ファイルシステムツールの使用禁止などの必須要件を担い、全テンプレート共通であり本テンプレート独自のものではありません。
ホストの/api/convertが本テンプレートをロード後、これらのテキストをローカルでログイン済みのcoding-agent CLIに渡し、stdoutのみをHTMLとしてストリーミング回収します。テンプレート自体は通信を行わず、認証情報を読み取らず、ファイルを書き込みません。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同一ルートはその後invokeAgent({ … })を呼び出してCLI（claude / codex / cursor-agentなど、ホストのPATHから検出）を起動します。これに付随する共有指示にも「**Write / Edit / MultiEdit / Bash / Create / いかなるファイルシステムツールも使用禁止**」と明記されています。
テンプレートに付属するexample.htmlは「事前レンダリングされたサンプル」であり、プレビューAPIからそのまま出力されてセレクターやギャラリーのiframeに読み込まれます。テンプレートカードのプレビュー表示を決定するものであり、コンテンツ生成には関与しません。
next/src/app/api/templates/[id]/preview/route.ts
Returns the skill's `example.html` verbatim so it can be loaded into an
プレビューはskill id単位でキャッシュされます（Cache-Control: public, max-age=300）。フロントエンドはプレビューパネル内のiframeにsandbox="allow-scripts allow-same-origin"を付与しています（ホスト側の実装であり、本テンプレートでは制御不能）。
frontmatterの各フィールドはセレクターのメタデータへとマッピングされ（featuredは全体ソート、recommendedはトップの「★ おすすめ」枠、example_*はサンプルカードのテキストを生成）、カテゴリやシナリオフィルターでの表示位置を決定します。
next/src/lib/templates/loader.ts
if (typeof fm.featured === "number") meta.featured = fm.featured;
fmToMetaは同時にcategory/scenario/aspectHint/tagsをSkillMetaへ直接移行します。exampleブロックはexample_idまたはexample.{md,html}が存在する場合に生成されます（id/name/format/tagline/desc + 任意のsource）。これらのフィールドは表示とソートにのみ影響し、生成処理には影響しません。
本テンプレートの生成能力はすべて自身の本文によって実現されます。social-media-dashboard/SKILL.mdはレイアウト、配色、フォント、コンテンツ規律のみを記述しており、エージェントにツールの実行、API呼び出し、外部データの取得を指示する文は一切ありません。
next/src/lib/templates/skills/social-media-dashboard/SKILL.md
【模板: 社媒创作者仪表板】
skillディレクトリには計2〜3ファイル（SKILL.md + example.html[+ example.md]）のみが存在し、scripts/references/データファイルはありません。example.htmlは同テンプレートの手動作成サンプル成果物にすぎません（internal_assetsを参照）。
本文はダッシュボードの固定セクションを規定します：プラットフォームswitcher、KPI、成長曲線、Top post、サイドバーのトレンド/コメント。
next/src/lib/templates/skills/social-media-dashboard/SKILL.md
【意图】面向博主 / 创作者的社媒数据看板。
プラットフォームswitcherはX / LinkedIn / YouTube / Instagram / TikTokの5プラットフォームを列挙し、「同一ダッシュボードでデータソースを切り替えて再利用する」ことを要求します。
next/src/lib/templates/skills/social-media-dashboard/SKILL.md
- 顶部平台 switcher (X / LinkedIn / YouTube / Instagram / TikTok)
KPIグループはfollowers / engagement / likes / repostsの4つのソーシャル指標に限定されています。
next/src/lib/templates/skills/social-media-dashboard/SKILL.md
- KPI 卡片 (followers / engagement / likes / reposts)
サンプル成果物はインラインJSを使用してプラットフォームの切り替えと全画面の再描画（ヒーロー、KPI、チャート、Top post、ハイライト状態の切り替え）を実現しています。
next/src/lib/templates/skills/social-media-dashboard/example.html
function switchPlatform(platform) {
チャートは静的画像ではありません。サンプルではJSを使用してSVG折れ線/エリアグラフを動的に生成し、アノテーションポイントもスクリプトで生成されます。
next/src/lib/templates/skills/social-media-dashboard/example.html
const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
2コア機能
01マルチプラットフォーム切り替え（同一ダッシュボードでのプラットフォームデータソース切り替え）
02KPIカードグループ（followers / engagement / likes / reposts）
03フォロワー成長曲線（サンプルではインラインSVG + JSを用いて動的に描画、アノテーションポイント付き）
04今週のTop postプレビュー（いいね/リポスト/コメント数を含む）
05サイドバーのトレンドトピック / トップコメント
06サンプル成果物のプラットフォーム切り替えインタラクション（.platform-pill + data-platform）
07サンプル成果物のKPI数値表示（フォーマット済み数値および変化率を含む）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（仅出现在产物示例 example.html） |
| network | 第三方头像图床（仅出现在产物示例 example.html 的内联脚本数据里） |
| cli | 本地 coding-agent CLI（宿主提供，模板自身不调用） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: example.html内のインライン<script>（ブラウザ側：プラットフォーム切り替え、KPIフォーマット、SVG折れ線/エリア描画、コントリビューターグリッド）— セレクタープレビューのifra内でのみ実行
- 网络端点: 外部ネットワークアクセスの宣言: fonts.googleapis.com（example.htmlの<link>、プレビュー時にブラウザがフォントをリクエスト）
監査ノート： 判定対象＝本skillディレクトリ（SKILL.md + example.html[+ example.md]）：組み込みスクリプトなし、認証情報の読み取りなし、ディスク書き込み指示なし、実行時の外部エンドポイント要求なし — 本文はレイアウト/配色/フォントファミリー名とコンテンツ規律のみを指定しており、フォントファミリー名はリクエストを構成しません。ディレクトリ内に実際に現れる外部リンクはすべて「成果物サンプル」の性質を持つものであり、個別に確認済みです：fonts.googleapis.com（example.htmlの8〜10行目<link>）、avatars.githubusercontent.com（example.htmlのインラインスクリプト内にある5つのGitHubアバター、<img src>経由でロード）。Tailwind CDNはありません。第4バッチ基準（エンドポイントが成果物サンプル/出典表記にのみ現れる場合はgreen）に基づき、判定ランクには影響しません。ホスト側の動作（loader.tsによるディスク読み込み、assemblePromptによるプロンプト構築、agents/invoke.tsによるローカルCLI起動、プレビューiframeのsandbox="allow-scripts allow-same-origin"）はverdict.risksに記載されており、判定ランクの根拠にはなりません。
5二重目の独立検証
- [ok] skill 目录的脚本 / 网络 / 凭证 / 写盘面 — 目录仅 SKILL.md / example.html 2 个文件，无 scripts/references/数据目录；token 扫描（curl / wget / fetch / exec / spawn / process.env / API_KEY / token / secret / write / save / delete）在该目录的 SKILL.md 中零命中；无自带可执行脚本。
- [ok] 运行时链路复核 — 重读 loader.ts / shared.ts / app/api/convert/route.ts / app/api/templates/[id]/preview/route.ts：模板正文只作为 prompt body 被 assemblePrompt 拼装，宿主 spawn 本地 CLI 并捕获 stdout；模板不参与任何执行。
- [ok] commit 与元数据 — 工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（＝任务表 pin 的 full 40 位）；GitHub API nexu-io/html-anything：stars 8827、license spdx Apache-2.0、pushed_at 2026-09-15T03:36:24Z（与本地 HEAD 提交时间 2026-09-15 11:36:24 +0800 一致）。
- [discrepancy] README 与源码的 frontmatter schema 漂移（仓库级） — README 第 213 / 217 / 468 行称模板 frontmatter 必须含 mode · scenario · surface · preview · design_system；但在 next/src/lib/templates/skills/ 下 '^mode:'、'^surface:'、'^design_system:' 全部零命中，实际字段是 category / scenario / aspect_hint / featured / recommended + example_*（loader.ts 的 SkillFrontmatter）。文档滞后于代码，不影响本模板运行，但照 README 新写模板会踩空。
- [ok] frontmatter 元数据映射 — loader.ts fmToMeta 逐字段映射 zhName / enName / emoji / description / category / scenario / aspectHint / tags + featured / recommended + example 卡；本模板取自 SKILL.md 的实际取值与之相符。
- [discrepancy] example.html 与 SKILL.md 的一致性（平台数量） — 正文写 '- 顶部平台 switcher (X / LinkedIn / YouTube / Instagram / TikTok)'，示例 HTML 只渲染两个按钮（data-platform="x" 与 data-platform="github"）；内联 platformData 里确有 x/linkedin/youtube/instagram 四套数据，GitHub 走贡献者分支。只看示例会以为平台只有两个。
- [discrepancy] 外部图片 URL 与仓库共享指令相左 — shared.ts 的共享指令要求「不要引用任何外部图片 URL」，但本模板的 example.html 把 5 个 GitHub 头像写成 https://avatars.githubusercontent.com/u/… 绝对地址并在 <img src> 里加载，是该产物唯一会向第三方图床发请求的地方（作为示例产物可接受，但用户直接复用示例时会带上外部依赖）。
- [ok] 端点扫描（目录内） — 2 类端点：fonts.googleapis.com（Space Grotesk / Inter）与 avatars.githubusercontent.com（5 个头像）；无 Tailwind CDN；SKILL.md 正文零 URL。
6結論
最適な用途： クリエイターや運用担当者が1週間または1か月のSNSパフォーマンスを1画面のダッシュボードに整理する場合（特に「プラットフォームを切り替えて同一指標群を確認する」シナリオ）に最適です。また、SNSデータページのビジュアル基準としても適しています。
不向きな用途： 実データの連携が必要な用途（本テンプレートはデータ取得やAPI接続を行わず、データはユーザーの貼り付けまたはモデル生成に依存）、モバイル等の狭い画面での閲覧（aspect_hintはデスクトップ1440と明記）、厳密なレポート用途（データソース元の表記なし、エクスポート構造なし）には適していません。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload social-media-dashboard.tar.gz
sha256:
Option B · Copy Guide for Agent5c0986485a0bc508…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.