1仕組みと動作原理

本スキルは実行可能プログラムではなく、ローカルの coding-agent CLI に注入されるプロンプトです。ホストが SKILL.md 本文を取得し、先頭にサイト共通デザイン指示を付加、末尾にユーザーコンテンツを結合して1つのプロンプトを生成し、ログイン済み agent に渡して stdout を HTML として受け取ります。

next/src/lib/templates/shared.ts

【输入格式】: ${opts.format} 【用户内容】: ${opts.content}

組み立てテンプレート = 共通指示 → スキル本文 → 入力フォーマット → ユーザーコンテンツ。Web側の /api/convert も同一関数を使用：prompt = assemblePrompt({ body: skill.body, content, format });

共通指示レイヤー（単一のスキルに属さず、全テンプレートの上に配置）が出力を「自己完結型シングルファイル HTML」に固定し、agent による Write/Edit/Bash などのファイルシステムツールの使用を明示的に禁止して、HTML を対話本文として直接ストリーミング出力させます。

next/src/lib/templates/shared.ts

- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。

これが本バッチのスキルの能力境界の由来です。成果物はテキストに過ぎず、保存とレンダリングはホストのフロントエンドが担当します。この禁止令はプロンプトによるソフトな制約であり、サンドボックスのハードな隔離ではありません。

SKILL.md の外側に「コンテンツ駆動型数量」の上書きルールが存在します。テンプレートに記載されたページ数/フレーム数/カード数はすべて下限の目安とみなされ、実際の数量はユーザーコンテンツによって決定されます。これにより、agent がテンプレートの数値に合わせてユーザーコンテンツを圧縮するのを防ぎます。

next/src/lib/templates/shared.ts

- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。

特に frame-* シングルフレームテンプレートにおいて重要です。テンプレート内のレイアウト記述を上限ではなく「再利用可能なレイアウトプール」として定義します。

読み込み規約は「1スキル = 1フォルダ」です。SKILL.md（セレクター用 YAML frontmatter + テンプレートプロンプト本文）、任意の example.md（サンプル入力）、example.html（直接ブラウザ表示可能なプレビュー用サンプル）で構成され、TSコードを変更せずにディレクトリを追加するだけで新しいテンプレートを追加できます。

next/src/lib/templates/loader.ts

* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker

ローダーの loadSkillFromDir はこれら3種類のファイルのみを読み込み、他のアセット読み込みルートはありません。2回目のチェックで本スキルのアセット到達可能性を確認する基準となります。

選択パイプライン（CLI側）は3段階のファネルです。キーワードによる強力なシグナル（1語一致ごとに2点、閾値3）→ tags/scenario によるスコアリングへフォールバック → それでも判定できない場合はユーザーコンテンツの先頭800文字をローカル agent に渡し、一言分類を実行します。

cli/src/skills-matcher.ts

const CONFIDENCE_THRESHOLD = 3;

AIフォールバックのプロンプト原文：const prompt = `請用一句话（不超过15个字）描述以下内容最像什么类型的文档，只需回答类型名称：`

プレビューパイプラインは生成から独立しています。/api/templates/<id>/preview は example.html をそのまま text/html として iframe に返却し、フロントエンドの iframe には sandbox="allow-scripts allow-same-origin" が設定されています。

next/src/components/preview-pane.tsx

sandbox="allow-scripts allow-same-origin"

ルートのコメント：* Returns the skill's `example.html` verbatim so it can be loaded into an（ホスト側のトレードオフ：allow-scripts + allow-same-origin の組み合わせにより、プレビューページのスクリプトが自らサンドボックスを解除可能です）。

テンプレートは「一連のデータ → ニューヨーク・タイムズ風コラム図表1フレーム」を固定レイアウトに分解します。上部 kicker（データソース + カテゴリ）、データから導き出した結論見出し、画面の55〜65%を占めるチャート領域、下部 source + footnote で構成され、16:9 の単一フレームとして出力されます。