デザイン&モーション · nexu-io/html-anything

deck-presenter-mode

tokyo-night デフォルトテーマ、T で 5 つのテーマを切り替え、S でテレプロンプターポップアップを開く

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(工作副本根目录 LICENSE 文件 = Apache License Version 2.0;GitHub API spdx_id=Apache-2.0。注意:skill 目录本身不含独立 LICENSE,许可来自仓库根;第三方来源模板在 README 另有署名说明)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本 skill は html-anything の「テンプレートパッケージ」です:frontmatter はセレクターがメタデータを取得するために使用され、SKILL.md 本文(frontmatter 以降の body)は loader によってそのまま読み込まれ、モデルへの指示として渡されます。

next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
本テンプレート本文は 21 行 / 687 バイト(発表者側のインタラクションに特化);frontmatter は parseFrontmatter により fm/body に分割され、ディレクトリ内に実行スクリプトは一切存在しません。

実際にモデルへ入力される prompt = 共通設計指示 + 本テンプレート本文 + 【入力形式】+【ユーザーコンテンツ】;共通指示には、テンプレート内のスライド数やレイアウト数値が上限ではないことを明記した上書きルールが含まれます。

next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
同一ファイル内の直後に続く上書きルールには逐字的に記載:「テンプレートは『利用可能なレイアウト/スタイル/配色/フォント/コンポーネントライブラリ』を定義するのみであり、スライド/フレーム/カード/section の数量は**定義しない**」。

生成規約は共通指示によって厳格に制限:agent によるあらゆるファイルシステムツールの使用を禁止し、HTML は必ず stdout テキストとしてストリーミング出力され、フロントエンド側でディスクに保存されます。

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何
本テンプレート自体はディスク保存方式を宣言せず、この共通制約に完全に依存しています。

発表者サポートは「各スライドの aside.notes」によって実現:本文では各スライドに 150〜300 文字の原稿(スクリプト)を添付することを要求し、アプリケーション側の deck.ts が aside.notes を抽出してノートパネルに配置し、スライド本体からは削除します。

next/src/lib/deck.ts
notes = stripTags(inner);
すなわち、原稿は聴衆には非表示、発表者には表示されます。「原稿付き」を実現する仕組みであり、アプリケーション側のパース仕様に基づきます。

テレプロンプターのポップアップはキーボードショートカットで操作:T でテーマ切り替え、S でポップアップ表示。ポップアップ内には CURRENT / NEXT / SCRIPT / TIMER の 4 枚のカードが含まれます。

next/src/lib/templates/skills/deck-presenter-mode/SKILL.md
- 右下小 toolbar: T 切主题 / S 打开 popup
同セクション内の別行:「- Popup: CURRENT / NEXT / SCRIPT / TIMER の 4 枚のスナップカード」—テレプロンプターを現在スライド/次スライド/原稿/タイマーの 4 ブロックに分割。

テーマ機能は「1 デフォルト + 5 種類切り替え可能」:デフォルトは tokyo-night、T キーで順次切り替え(ライトテーマ 1 種を含む)。

next/src/lib/templates/skills/deck-presenter-mode/SKILL.md
- 默认 tokyo-night; 共 5 套主题 (含 light)
deck-replit の「1 種を選択し混在させない」方針とは異なり、実行時の切り替え自体が機能となっています。

スライドコンテナはリポジトリ全体の deck 規約に準拠:example.html の section は slide を含む class を持ち、8 箇所の aside.notes を備え、deck.ts によりページごとにパースされて原稿が抽出されます。

next/src/lib/deck.ts
const SLIDE_RE =
アプリケーション側には別途 PNG zip およびマルチページ PPTX エクスポート機能(ホスト側の能力)が存在します。

2コア機能

01各スライドに 150〜300 文字の原稿(<aside class="notes">)を埋め込み、ノートパネルおよびテレプロンプターで使用可能
02右下の小さなツールバーによるショートカット操作:T でテーマ切り替え / S でポップアップ表示
03テレプロンプターポップアップの 4 枚のスナップカード:CURRENT / NEXT / SCRIPT / TIMER
045 種類のテーマ(デフォルト: tokyo-night、ライトテーマ 1 種を含む)を実行時切り替え可能
05サイト側ではエンジニアリング用途(scenario: engineering)、16:9 横向きに分類
06CLI キーワードルーティング:presenter / 演讲者 / 演讲模式 → deck-presenter-mode
07アプリケーション側連携:aside.notes 抽出(deck.ts)→ ノートパネル + スライドごとの PNG/PPTX エクスポート

3外部依存関係

KindDependency / Endpoint
cli宿主本机 agent CLI(由应用侧 spawn;非本 skill 指令)
networkGoogle Fonts(产物示例引用,非 skill 正文要求)
network产物样例正文里的第三方出处文本(非调用)

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

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠(ファイルパスと抜粋)
  • 网络端点: 外部ネットワークアクセスの宣言: example.html 内に複数の Google Fonts @import(fonts.googleapis.com)が存在;成果物のレンダリング時にブラウザによって取得されます。
監査ノート: 判定対象=skill ディレクトリ(SKILL.md + example.html):スクリプトなし、クレデンシャル読み取りなし、ディスク書き込み命令なし;SKILL.md 本文には URL や CDN/API の要求が一切なく、すべての内容はレイアウトとインタラクション(T でテーマ切り替え / S でポップアップ / aside.notes 原稿)に関するテキスト仕様です。ディレクトリ内に現れるエンドポイントは example.html の Google Fonts @import および GitHub リンク文字列(成果物サンプル)のみです。本リポジトリの html-anything テンプレートはバッチ 4 の基準に基づき一律 🟢 Green 判定:判定対象=skill 自身のディレクトリ;ホストシェル(loader.ts/assemblePrompt/ローカル agent CLI/プレビュー iframe)や example.html 内のフォント・CDN 参照は成果物フェーズの動作(ブラウザが取得し、skill 実行時には外部送信されない)であり、reason/risks に記載するのみで判定には影響しません。

5二重目の独立検証

  • [ok] 文件清单(2 个文件,无脚本) — SKILL.md(687B) + example.html(37604B)。
  • [ok] 正文零端点复核 — SKILL.md 内 http/CDN/fetch/script 零命中。
  • [ok] 目录内端点自证 — example.html: 多条 fonts.googleapis.com @import + 一处 github.com/lewislulu/html-ppt-skill 文本;无远程 script、无 fetch/XHR。
  • [ok] 无凭证读取 — key/secret/token/.env 零命中。
  • [ok] 无写盘指令 — SKILL.md 无 write/save 类指令;shared.ts 明令禁文件工具。
  • [ok] 交互约定逐字可复核 — T 切主题 / S 打开 popup / CURRENT·NEXT·SCRIPT·TIMER 四卡 / 默认 tokyo-night 5 套主题均在正文。
  • [ok] aside.notes 机制在宿主侧有真实实现 — deck.ts 的 `notes = stripTags(inner);` 与 class 含 notes 的 aside 匹配正则,说明「含逐字稿」不是空头承诺。
  • [ok] 样例产物与机制一致 — example.html: 6 个 <section>、8 处 class 含 slide、8 处 aside.notes → 稿件可被逐页抽出。

6結論

  • 見落とされがちな発表者側のニーズ(原稿+テレプロンプター+タイマー)に特化し、単なる見栄えの良いレイアウト作成にとどまらない点。
  • 原稿とスライドの分離がホスト側で実装済み:aside.notes は抽出後に聴衆ビューから削除。
  • テーマ切り替えがインタラクションに組み込まれており(T キーで 5 種)、会場の明るさに応じてライトテーマへ切り替え可能。
  • 仕様が簡潔でコンテキストコストが低い(687 バイト)ため、長文の講演原稿と同時に生成プロンプトへ投入可能。
  • 最適な用途: ライブ登壇、講義、社内勉強会など「セリフ忘れ」が懸念されるシーンに最適:スライドと同時に原稿やテレプロンプターが必要な場合に向いています。また、原稿とスライドを一度に生成するパイプライン(原稿を直接 aside.notes に格納)にも適しています。
    不向きな用途: 発言を伴わない閲覧用資料には不向き(原稿は発表者用であり読者には見えないため);厳格なコーポレートブランドテンプレートが求められる場面には不向き(5 つのテーマはエディタ風であり、ブランド規定非対応);決定論的なデザインが要求される納品物には不向き(インタラクションの細部はモデルの裁量に委ねられるため)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-presenter-mode.tar.gz
    sha256: 1b8a4ed4e3c3279c…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.