1仕組みと動作原理
このskillは実行可能プログラムではなく、「1ディレクトリ＝1テンプレート」です。SKILL.mdのfrontmatterはセレクター表示用であり、本文（body）はモデルに送信されるプロンプトそのものです。テンプレートの追加はディレクトリの追加を意味し、TypeScriptの変更は不要です。
next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
同一ファイルの先頭コメントにディレクトリ規約が明記されています：SKILL.md（frontmatter + プロンプト本文）/ example.md（オプションの入力サンプル）/ example.html（オプションのプレビュー）。本skillディレクトリはまさにこの構造を採用しています。
実際に発行されるプロンプトは、プラットフォーム共通設計指示（SHARED_DESIGN_DIRECTIVES）+ 本skillのSKILL.md本文 + ユーザーコンテンツであり、assemblePromptによって1つのプロンプトに組み立てられます。
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
したがって、本skillの本文は「レイアウト/スタイル/コンポーネントライブラリ」の部分のみを担当します。出力規約（単一ファイルHTML、実際のユーザーデータの使用必須、コンテンツ主導の数量決定）は共通指示に由来するため、テンプレート作成者が重複して宣言する必要はありません。
成果物の生成はファイルシステムを経由しません。共通指示によりWrite/Edit/Bashなどのファイルツールの使用が明示的に禁止されており、モデルに対して完全なHTMLをレスポンス本文として直接ストリーミング出力することが求められます（stdoutはフロントエンドによってキャプチャされディスクに書き出されます）。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
これが「skill自体によるディスク書き込みゼロ」メカニズムの根拠です。ファイルを書き込むのはホスト側のフロントエンドであり、skillではありません。また、本ディレクトリ内にはスクリプトが一切存在しません。
3カラムの骨組みは単一のgrid宣言によって決定されます：240pxのサイドナビゲーション + 伸縮する本文 + 220pxの右側TOC。狭い画面では段階的に2カラムまたは1カラムへ縮退します。
next/src/lib/templates/skills/docs-page/example.html
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 0; min-height: calc(100vh - 50px); }
1024px未満で.tocを非表示、720px未満で.sidebarを非表示にし、本文のmax-widthを760pxにして長文読書時の可読行長を維持します。これはSKILL.mdの「長文読書体験優先」に対応しています。
本文は「コードブロック + コールアウト + テーブル + ページャー」の4種類のブロックで構成され、サンプルでは架空のCLI（Filebase）のクイックスタートドキュメントを用いてすべてのブロック型を実演しています。
next/src/lib/templates/skills/docs-page/example.html
<title>Filebase docs — Quickstart</title>
サンプル本文の4セクション：Install the CLI（brewまたはcurl）→ Authenticate（トークンパス）→ Sync a folder（.filebaseignore）→ Where to go next（ページャー）。
コールアウトは単一のアクセントカラーによる左ボーダー（--accent #c96442）で実装されており、1バリエーションのみで、SKILL.mdに記載されているinfo/warn/dangerの3色展開はありません。
next/src/lib/templates/skills/docs-page/example.html
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 20px 0; font-size: 14px; }
これは「プロンプトの要件がサンプルの実装内容を上回っている」典型的な例です。SKILL.mdには「callout: info / warn / danger 3色」と書かれていますが、サンプルでは1種類のみ実装されています。
右側のTOCは純粋な静的アンカーリスト（見出し + #リンク + .activeハイライト）です。サンプルにはスクリプトが一切含まれていないため、SKILL.mdに記載されているscroll-spy、コピーボタン、テーマ切り替えはサンプル上には存在しません。
next/src/lib/templates/skills/docs-page/example.html
<aside class="toc" data-od-id="toc">
全文で<scriptをgrepしても一致件数は0であり、addEventListenerやclipboardの呼び出しもありません。「scroll-spy」「コードブロックのコピーボタン」「テーマ切り替え」はプロンプト内にのみ存在し、実現にはモデル自身によるJSの追加が必要です（一方で共通指示ではスクリプトの導入元はjsdelivrのみに制限されています）。
トップバーにはブランド表示と検索入力ボックスのみが存在し、SKILL.mdに記載されているバージョン選択やテーマ切り替えコントロールはありません。
next/src/lib/templates/skills/docs-page/example.html
<input placeholder="Search · ⌘K" />
⌘Kは単なるプレースホルダーテキストであり、キーボードイベントの処理ロジックはありません。これは「サンプルは静止画であり、インタラクションはモデルやホストに委ねられる」という通例に属するものであり、検証時にサンプルを機能チェックリストと混同しないよう注意が必要です。
サーバー側の/api/convertが行う処理は3つだけです：templateIdに基づいてディスクからskillを読み込み、プロンプトを組み立て、ローカルのagent CLIをspawnしてSSEストリームで出力を転送します。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同一ファイル内でまず`const skill = loadSkill(templateId);`を実行し（該当テンプレートがなければ400を返却）、その後invokeAgentに渡します。skillディレクトリ自体はプロセスを生成せず、ネットワーク通信も行いません。
2コア機能
013カラム構成の技術ドキュメントページ骨格（サイドナビ + 本文 + 右側TOC）、狭画面での自動カラム縮退に対応
02サイドナビゲーショングループ分け + カレント項目ハイライト + sticky配置
03本文セクションと1対1で対応する右側TOCアンカーリスト
04インストールや同期コマンドを収めるコードブロック（薄色背景 + 角丸 + オーバーフロー横スクロール）
05コールアウト通知ブロック（左ボーダーaccent + 大文字/小文字ラベル）
06ページ下部ページャー（前へ/次へカード）およびパンくずリスト
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストのみであり、スクリプト実行や外部への影響は皆無
監査ノート： 判定対象＝skill自身のディレクトリ（SKILL.md + example.html/example.md。本ディレクトリにはスクリプト、認証情報の読み取り、ディスク書き込み指示、ネットワーク呼び出しコードは一切含まれていません）。第4バッチ最終基準に基づき、html-anythingテンプレートは一律greenと判定されます。SKILL.md全文においてランタイムサービスバックエンド/APIの指定はなく、ユーザー素材を外部生成バックエンドに送信することもありません（orange要件なし）。リバースエンジニアリング、なりすまし、バックエンドのバイパスもありません（red要件なし）。ディレクトリ内に実際に現れるエンドポイントは生成物サンプルの外部リンクのみ（なし：example.html全文に外部リンクは一切なし。フォントリンク、CDNスクリプト、画像URLは含まず、<a href="#">アンカーとローカルIDのみ）であり、これらは「生成物サンプル」に該当し基準上判定対象外となるため、自証のためにのみ記載しています。ホスト側で留意すべき事項：プレビュー用iframeでsandbox="allow-scripts allow-same-origin"が指定されていること、ローカルagent CLIがspawnされること（next/src/lib/agents/invoke.ts）、共通指示により生成物へのCDN読み込みが求められること——これらはプラットフォーム側の挙動であり、参考情報としてのみ記載しています。
5二重目の独立検証
- [ok] 三栏文档页（侧导航 + 正文 + 右 TOC） — .layout 三列 240px / minmax(0,1fr) / 220px，且 1024px 隐藏 TOC、720px 隐藏 sidebar。
- [discrepancy] 「Inline-end TOC (sticky, scroll-spy)」 — TOC 存在，但 .toc 是普通 padding 布局、无 position:sticky，也无 scroll-spy 脚本（全文零 <script>）；高亮 .active 是写死的。
- [discrepancy] 「代码块: 圆角 + dark + 语言标签 + 复制按钮」 — 样例代码块为圆角浅底（--code-bg:#f4f4f2），无 dark 主题、无语言标签、无复制按钮。
- [discrepancy] 「callout: info / warn / danger 三色」 — 只有一种 accent 左描边 callout，无三色档位。
- [discrepancy] 「顶栏 search + version + 主题切换」 — 顶栏仅 brand + Search · ⌘K 输入框；无 version 标签、无主题切换控件。
- [ok] 样例正文的虚构 CLI 与外链 — get.filebase.dev 是虚构产品域的示例命令（curl -fsSL … | sh）、~/.config/filebase/credentials 为虚构凭证路径；属演示文本，不是本 skill 的运行时依赖。
- [ok] 目录内零端点、零脚本 — 两文件皆无 <script>、无字体/CDN 链接、无图片 URL。
6結論
最適な用途： APIリファレンス、SDKクイックスタート、チュートリアル形式の単一ページドキュメントに最適。3カラムナビゲーション体系と快適な長文読書体験が求められる技術コンテンツに適しており、「ドキュメントサイトの単一ページ」としての静的スナップショット納品にも適しています。
不向きな用途： 本格的なインタラクションが必要なドキュメントサイトには不向き（JSなし：検索、スクロール連動ハイライト、テーマ切り替えは別途実装が必要）。マーケティングLPや視覚的主張が強いブランドページには不向き。モバイルファーストな用途には不向き（デスクトップ1440px優先、狭画面は縮退対応のみ）。マルチページドキュメント体系には不向き（本テンプレートは単一ページ向け）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload docs-page.tar.gz
sha256:
Option B · Copy Guide for Agent4277f1338716aa4d…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.