1仕組みと動作原理

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

next/src/lib/templates/shared.ts

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

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

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

next/src/lib/templates/shared.ts

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

これが本バッチのskillにおける機能境界の根拠です。生成物はテキストのみであり、ディスク保存とレンダリングはホストフロントエンドが担当します。この禁止事項はプロンプトによるソフトな制約であり、サンドボックスによるハードな隔離ではありません。

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

next/src/lib/templates/shared.ts

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

frame-* などの単一フレームテンプレートでは特に重要です。テンプレート内のレイアウト記述を上限ではなく「再利用可能なレイアウトプール」と位置づけます。

ロード規則は「1つのskill = 1つのフォルダ」です。SKILL.md（セレクター用YAMLフロントマター + テンプレートプロンプト本文）、任意の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回目のチェックで本skillのアセット到達性をこれに基づき確認します。

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

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 の組み合わせでは、プレビューページのスクリプトが自力でサンドボックスを解除可能です）。

グリッチエフェクトは重ね合わせ可能なレイヤーに分解されています。中央配置の6〜9vwホワイト主タイトル層の背後に、cyan #00f0ff と magenta #ff2bd6 の2層のオフセットアーティファクトを配置し、色分散・非点収差を再現します。