1仕組みと動作原理

本テンプレートは「フォルダ＝テンプレート」構造における純粋なデータです。SKILL.md はセレクター用の YAML frontmatter を持ち、本文はエージェント向けのレイアウト指示として機能します。リポジトリ側には個々のテンプレート用のコードは一切書かれておらず、新規テンプレートの追加はフォルダの追加のみで完結します。

next/src/lib/templates/loader.ts

SKILL.md — frontmatter (id, scenario, tags, …) + prompt body

loader.ts のヘッダーコメントにディレクトリの規約が記載されています。frontmatter はインプロセス正規表現で解析され（YAML 依存関係なし）、本文はそのままプロンプト本文として抽出されます。フロントエンドには送信されません（「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（ホストの PATH から検出される claude / codex / cursor-agent など）を起動します。これに付随する共通指示にも「**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-carousel/SKILL.md はレイアウト、配色、フォント、コンテンツの原則のみを記述しており、エージェントにツールの実行、API取得、外部データの読み取りを促す記述は一切ありません。