1仕組みと動作原理

3画面のナラティブ構造が本文に固定化：カバー → Today's quests（XPリボン + レベルバー）→ quest detail（サブタスク + 報酬）。

next/src/lib/templates/skills/gamified-app/SKILL.md

- Frame 2: Today's quests + XP ribbon + level bar

1回の出力で3画面をまとめて提供し、単一ページではなく「アプリ紹介画像」として機能——モデルは3つのフレームに沿って情報密度の配分を決定。

「ダークステージ」は、`--stage: #0e0d0c` のダークなショーケース背景として作例に落とし込まれ、3台の phone frame が横並びで配置。

next/src/lib/templates/skills/gamified-app/example.html

--stage: #0e0d0c;

作例ではさらに stage-bar と各画面ごとの tabbar が実装されており、本文で記述された4行の仕様よりもはるかに豊かな視覚表現を実現。

レベル/XPのセマンティクスが再利用可能なタグとして固定化：LEVEL / Level 14 / +N XP。

next/src/lib/templates/skills/gamified-app/example.html

<div class="meta"><div class="label">LEVEL</div><div class="name">Level 14</div></div>

作例においてゲーミフィケーション用語（LEVEL、XP、quest、step）がすべて実装されており、モデルはその命名規則をそのまま流用可能。

テンプレート自体がプロンプトそのもの：SKILL.md 本文を loader が読み込み、共有前置文およびユーザーコンテンツと結合した上でローカルの agent CLI に渡して実行。

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

実行時にテンプレートディレクトリ内のコードは実行されない：/api/convert は {agent, templateId, content} のみを受け取り、loadSkill(templateId) で取得した SKILL.md 本文をプロンプト本体としてログイン済みのローカル agent CLI に渡し、HTML は stdout 経由でフロントエンドにストリーミング。

skill ディレクトリは純粋なテキストアセット：loader はディスクから SKILL.md 本文を読み取るのみで、ディレクトリ内の実行可能コードがロードされることはない。

next/src/lib/templates/loader.ts

const raw = safeRead(path.join(dir, "SKILL.md"));

ファイルシステム上の skill は単なるテキスト：loader はディレクトリごとに SKILL.md を読み込み、frontmatter をピッカー用メタデータとして抽出し、本文を body として返却。本テンプレートディレクトリ内のモジュールが import または実行されることはない。

共有前置文がテンプレートより前に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」というルールを最優先事項として設定。

next/src/lib/templates/shared.ts

【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】

共有前置文はテンプレート本文の前に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」と規定——そのため、本テンプレート内のレイアウト一覧は「再利用可能なレイアウトプール」であり、ページ数やフレーム数の上限ではない。

next/src/lib/templates/shared.ts

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

前置文でファイルシステムツールの使用が明示的に禁止され、純粋な HTML を回答本文からストリーミング出力することが要求されており、ディスク書き込みはフロントエンド側が担当——そのため skill 側にディスク書き込みの挙動は存在しない。

next/src/lib/templates/loader.ts

const exampleHtml = safeRead(path.join(dir, "example.html"));

ディレクトリ内の example.html はリポジトリと共に配布されるゴールデンサンプルであり、プレビュー用ルートがディスクから直接読み込んで返却（ビルドなし、コンパイルなし）。品質基準と詳細ページ用素材の双方を兼ねる。

2コア機能

013画面の phone frame（カバー / クエストパネル / クエスト詳細）

02XPリボンとレベルプログレスバー

03クエストタイルの2列グリッド

04done 状態と各項目ごとの XP 報酬を備えたサブタスク steps

05ボトム tab bar（パネルと詳細にそれぞれ1つずつ）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: 純粋なプロンプト指示およびルールテキストのみであり、スクリプト実行や外部への影響はなし

監査ノート： 🟢 グリーン（安全）。判定対象＝skill 自身のディレクトリ：ディレクトリ内に現れる URL は https://fonts.googleapis.com、https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap、https://fonts.gstatic.com のみであり、すべて example.html（成果物の作例）または frontmatter の出典表記内に限定され、SKILL.md 本文で実行時の外部通信を要求している箇所は皆無。ディレクトリ内には SKILL.md と example.html のみが存在し、スクリプトゼロ、実行可能コードゼロ、ネットワークエンドポイントゼロ、クレデンシャル読み取りゼロ、ディスク書き込み指示ゼロ——SKILL.md に沿って実行した結果はホストモデルが HTML テキストを出力するのみであり、外部送信やディスク保存の動作は一切含まない。ホストシェルおよび成果物の利用側の挙動は判定の根拠とせず、verdict.risks にのみ記載：shared.ts の前置文で成果物に Tailwind CDN（https://cdn.tailwindcss.com）と Google Fonts の参照が要求され、runtime はログイン済みのローカル agent CLI を spawn し（envFor が process.env を透過）、プレビュー用 iframe に sandbox="allow-scripts allow-same-origin" が設定されている。

5二重目の独立検証

[ok] 规范↔示例：覆盖率 — 正文 4 行（三屏 + quest tile 渐变/等级 ribbon/tab bar）在示例中全部落地：stage-bar + 3 台 phone + level-ribbon + quests 双列网格 + steps + 两个 tabbar。
[discrepancy] 示例自述的 [theme] 切换 — 示例 tip 写「Toggle [theme] in the toolbar to switch theme & layout」，但全文件无 toolbar 控件、无 <script>——照抄该提示会出现做不到的说明。
[ok] 「暗色舞台」措辞核对 — 示例 `--stage: #0e0d0c;` 与深色 body 底色落地了正文的 dark showcase stage 描述。
[discrepancy] 示例规模 vs 规范强度 — 正文只有 4 行规范，示例却是 16KB 完整三屏（含示例自创的 stage-bar/tabbar/steps 命名）——规范未覆盖的实现细节全部由示例单方面定义，两次生成差异可能较大。
[ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
[ok] 可执行代码普查 — example.html 内 <script> 计数 = 0，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
[ok] 外链端点普查 — 目录内 URL：https://fonts.googleapis.com、https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap、https://fonts.gstatic.com（皆为 example.html 产物示例或 frontmatter 出处标注；正文未要求运行期外发）
[ok] official_desc 逐字核对 — meta.official_desc 与 SKILL.md frontmatter 的 description 逐字一致。