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 + prompt body）/ 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 ではありません。また、本ディレクトリ内にはスクリプトも一切存在しません。
目標は「メールクライアントでレンダリング可能な HTML」です。SKILL.md では、600px のシングルカラム、フォールバックレイアウトとしての <table role='presentation'> の使用、および class ではなくインラインスタイルによるカラー指定が規定されています。
next/src/lib/templates/skills/email-marketing/SKILL.md
- 使用 `<table role='presentation'>` 做布局兜底
これら3つのルールはメール互換性の標準的な手法です（クライアントによる <style>/class の除去を回避するためのテーブルレイアウト＋インラインスタイル）。なお、サンプルはこれに完全には準拠していない点に注意してください（verification.second_pass を参照）。サンプルでは div + <style> + grid が使われており、「仕様はプロンプト側にあり、サンプルは初期バージョンである」ことを示しています。
プラットフォーム側の出力パイプラインは、「なぜインラインスタイルが必須なのか」を的確に説明しています。WeChat やメール向けのエクスポート時、対象クライアントがインラインスタイルしか認識しないため、フロントエンドは juice を使用して <style> 内の CSS を各要素にインライン化します。
next/src/lib/export/wechat.ts
Take a full HTML document, extract <body> content, inline all CSS via juice,
同一箇所のコメントでは、CDN 経由の Tailwind は juice から参照できないことも指摘されています。したがって、「カラーにインラインスタイルを使用する」という規約は形式的なこだわりではなく、juice によるインライン化後も成果物のスタイルを確実に維持するための鍵となります。
メールの構造は発表メールの標準的な形式に準拠しています：Masthead（ワードマーク＋ナビゲーション）→ Hero 画像ブロック → ヘッドラインロックアップ（斜めアクセント付き）→ 本文 → メイン CTA ボタン → スペックグリッド → フッター（ソーシャル＋配信停止）。
next/src/lib/templates/skills/email-marketing/example.html
<div class="frame" data-od-id="email">
サンプルでは各ブロックに data-od-id（email/masthead/hero/headline/specs/footer）が付与されており、SKILL.md のレイアウトチェックリストと1対1で対応しているため、「どのブロックを変更すべきか」の特定が容易です。
Hero はインライン SVG で描画された製品画像（ランニングシューズ）であり、外部リンク画像に依存しません。複数の path と2つの linearGradient で着色されています。
next/src/lib/templates/skills/email-marketing/example.html
<svg class="shoe" viewBox="0 0 600 280" aria-hidden="true">
SKILL.md の「Hero ブロック (SVG プレースホルダー)」および共有指示の「外部画像 URL を一切参照しないこと」に対応しています。メールクライアントでは外部リンク画像がブロックされやすいため、インライン SVG は有効な解決策となります（静的スクリーンショットのエクスポート後はビットマップ画像になります）。
ブランドトーンの核となるのは「斜め（skew）の要素」です。ワードマークのアクセント正方形には transform: skew(-12deg) が適用され、見出しの強調ワードには skew(-8deg) のイタリック体が使用され、スポーツブランドらしい躍動感あふれるデザイン表現を形成しています。
next/src/lib/templates/skills/email-marketing/example.html
h1.lockup .axis { color: var(--accent); display: inline-block; transform: skew(-8deg); }
サンプルのブランドは架空の SPORT TEST（--accent:#d8482b オレンジレッド ＋ 紙色 #f4efe7）であり、すべてのビジュアルは6つの CSS 変数と斜め変形／フォントウェイトによって構築されています。
コンバージョンの導線はフッターで完結します：コンプライアンス要件を満たす Unsubscribe（配信停止）＋ View in browser（ブラウザで表示）の2つのリンクおよび著作権表示行が含まれています。
next/src/lib/templates/skills/email-marketing/example.html
<div><a href="#">Unsubscribe</a> · <a href="#">View in browser</a></div>
SKILL.md の「Footer (ソーシャル + 配信停止)」に対応しています。サンプルではプレースホルダーとして # が使用されているため、実際の配信時には有効な配信停止 URL に置き換える必要があります。
サーバーサイドの /api/convert が行うのは3つの処理のみです：templateId に基づいてディスクから skill を読み込み、プロンプトを組み立て、ローカルのエージェント 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コア機能
01ブランド製品発表メールのシングルページ：masthead / hero / 見出しロックアップ / 本文 / CTA / スペックグリッド / フッター
02メールクライアントによる外部リンク画像のブロックを回避するインライン SVG の hero ブロック
03斜め（skew）アクセントのデザイン表現（ワードマークの正方形および見出しの強調単語）
04製品仕様を提示するスペックグリッド（大型の数値 ＋ 等幅フォントの小型ラベル）
05メイン CTA ボタン（ダーク背景にライト文字 ＋ 矢印 ＋ 大文字・広めの字間）
06コンプライアンス対応フッター（Unsubscribe / View in browser / 著作権表示）
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への影響は一切ありません
監査ノート： 。評価対象＝skill ディレクトリ自体（SKILL.md + example.html/example.md。本ディレクトリ内にはスクリプト、認証情報の読み込み、ディスク書き込み指示、ネットワーク呼び出しコードは一切存在しません）。第4バッチの最終基準に基づき、html-anything テンプレートは一律で Green 判定となります：SKILL.md 全体で実行時サービスバックエンド/API を指定しておらず、ユーザー素材を外部の生成バックエンドに送信することもありません（Orange の要件なし）。バックエンドのリバースエンジニアリング、なりすまし、バイパスもありません（Red の要件なし）。ディレクトリ内に実際に存在するエンドポイントは生成物サンプルの外部リンクのみです（なし：example.html 内にはフォントリンク、CDN、画像 URL などの外部リンクは一切なく、フォントは 'Inter'/'Anton'/'Bebas Neue' などのローカルまたはシステムスタック名を使用）。これらは「生成物サンプル」に該当し、基準に基づき評価対象外となるため、自己証明としてここに記載するにとどめます。ホスト側の留意事項として、プレビュー用 iframe で sandbox="allow-scripts allow-same-origin" が使用されていること、ローカルエージェント CLI が spawn されること（next/src/lib/agents/invoke.ts）、共有指示が成果物に CDN の参照を要求していることが挙げられますが、これらはプラットフォーム側の動作であり、参考情報としての説明です。
5二重目の独立検証
- [discrepancy] 「600px 单栏」 — 样例 .frame { max-width: 680px; }，为 680px（frontmatter aspect_hint 也写「600 邮件宽」）；单栏成立，宽度不符。
- [discrepancy] 「使用 <table role='presentation'> 做布局兜底」 — 样例全文无 <table>、无 role="presentation"，改用 <div class="frame"> + grid/flex；邮件客户端（Outlook）对 grid 支持差，规范与样例的兼容性结论相反。
- [discrepancy] 「颜色用 inline style (不要依赖 class)」 — 样例把配色写在 <style> 的 :root 变量与 class 里，仅个别元素用 inline style；与规范相悖（宿主可用 juice 内联补救，但那是导出期行为）。
- [discrepancy] 「Specifications grid (3 列)」 — 样例 .specs-grid 为 repeat(2, 1fr)，且实际 4 个 .spec（2 列 × 2 行）。
- [discrepancy] 「Masthead (wordmark 居中)」 — 样例 masthead 为 display:flex; justify-content: space-between，左侧 wordmark + 右侧 SHOP/JOURNAL/MEMBERS 导航，非居中。
- [ok] Hero 为 SVG 占位而非外链图 — <svg class="shoe" viewBox="0 0 600 280"> 含两条 linearGradient 与多段 path，无 <img>。
- [ok] 目录内零脚本/零端点 — 无 <script>、无 CDN、无字体外链；字体族名属本地/系统栈。
6結論
最適な用途： 新製品の発表、新機能リリース、イベント通知などのマーケティングメール用シングルページ制作に適しています。「外部リンク画像を含まず、メールクライアントで確実にレンダリングできる」ニュースレターテンプレートを必要とする場合に最適です。メール配信サービス向けのテンプレートのベース（テーブルレイアウト化を追加）としても適しています。
不向きな用途： 複数コーナー構成のニュースレターレイアウトには不向き（単一カラム・単一 CTA で情報量が限定的）；ギャラリーや複数商品を掲載する EC メールには不向き（ループリストコンポーネントや外部リンク画像戦略がないため）；インタラクション（フォーム、アニメーションなど）が必要な場面には不向き；また、配信停止リンクを手動で置き換える必要があるため、そのまま即座に本番用コンプライアンスメールとして使用することには適していません。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload email-marketing.tar.gz
sha256:
Option B · Copy Guide for Agented93a7856ba23d50…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.