研修素材（マスター資料.md、デモ手順書.md、スケジュール画像、ロゴ等）から、 単一ファイル完結の高品質HTML研修ドキュメントを生成する。 外部依存なし、Base64埋め込みロゴ、アクセントカラー指定、sticky header、ヒーロー、 タイムテーブル、セッション別コンテンツ（カード、テーブル、図、コード、コールアウト）、 インラインハイパーリンク、セクション末参考リンク集、ソースバッジ（エビデンスURL）、 ツールアイコンバッジ、段階開示（講師ペース制御）、クリック開示数値、 ディスカッション回答開示、全表示トグル、 デモボタン+モーダル（本筋/発展タブ）、デモ用「自分で試す」セクション（プロンプトコピー+ダミーデータDL）、 レスポンシブ、印刷対応。Agent Teamsによる並列リサーチにも対応。 トリガーとなるフレーズ - 「研修HTML」「training HTML」「研修ページ作成」「HTMLで研修資料」「/training-html」
研修素材から単一ファイルHTMLドキュメントを生成するスキル。
6段階で進める。詳細は references/workflow.md を参照。
base64 -i logo.webp | tr -d '\n'セッション内容に応じてTaskツールで3-5個のリサーチエージェントを並列起動。
リサーチエージェント例:
Task(subagent_type="general-purpose", name="{topic}-researcher", prompt="...")
各エージェントに公式ドキュメント、統計、事例を調べさせる。 完了後shutdown。結果をセッションごとに整理。
のCSSと のHTMLパターンを参照して構築。
構築順序:
<style> — 全CSSを配置。--accent をユーザー指定色にコンテンツ変換ルール:
| 元の情報 | コンポーネント |
|---|---|
| ツール紹介 | card-grid（tool-icon付きも可） |
| 比較 | tbl-wrap + table |
| 数値 | stat-grid（reveal-num付きも可） |
| 手順 | flow |
| 設定例 | code-block |
| 構成図 | diagram (ASCII) |
| 注意事項 | callout |
| 議論テーマ | disc（回答開示式も可） |
| 列挙 | check-list |
| エビデンス付き文 | p + source-badge |
| 深掘り情報 | reveal-btn + instructor-reveal |
.sources ブロックを配置（4-12件/セッション）target="_blank".demo-btn を配置（onclick="openModal('demo-id')"）</body> 直前にモーダルHTMLをまとめて配置.try-section でプロンプトコピー・ダミーデータDLを配置open {filepath} でブラウザ確認。ロゴ表示、ナビ動作、デモモーダル、レスポンシブ、印刷プレビューをチェック。