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してプロンプトを渡し、HTMLをstdoutからストリーミングでキャプチャします。

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、外部参照はフォントおよび一部テンプレートが明示的に要求するグラフライブラリのみに限定されます。

出力は同一サイズのN枚のカードからなる垂直flexカラムであり、1枚あたり1080×1440（3:4）で、全体のスクロールキャプチャと単票ごとのスクリーンショットの双方に対応します。