1仕組みと動作原理
本スキルはhtml-anythingの「テンプレートパック」です。frontmatterはセレクターがメタデータを取得するために使用され、SKILL.md本文（frontmatter以降のbody）はloaderによってそのまま読み出され、モデルへのプロンプト指示として渡されます。
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
本テンプレートの本文は53行 / 2930バイト（今バッチの9テンプレート中で最長）です。frontmatterはparseFrontmatterによってfm/bodyの2つに分割され、ディレクトリ内でのスクリプト実行は一切ありません。
モデルに実際に送られるプロンプト = 共通デザイン指示 + 本テンプレート本文 + 【入力形式】 + 【ユーザー入力内容】。共通指示には、テンプレート内のページ数やレイアウト数は上限値ではないことを宣言するオーバーライド規則も含まれます。
next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
同ファイル内で直後に続くオーバーライド規則には、「テンプレートは『使用可能なレイアウト / スタイル / 配色 / フォント / コンポーネントライブラリ』のみを定義し、スライド / フレーム / カード / セクションの数を**定義しない**」と明記されています。
出力規律は共通指示によって厳格に制限されます。エージェントによるファイルシステムツールの使用は一切禁止されており、HTMLはstdoutテキストストリームとして出力され、フロントエンド側でディスクに保存されます。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何
本テンプレート自体は保存方式を宣言しておらず、完全にこの共通制約に依存しています。
コアメカニズムは「固定キャンバス ＋ 自由レイアウト」です。全ページを1920×1080に強制し、transform: scaleでビューポートに適応させることで、ページ内レイアウトの完全な自由度を確保しています。
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
- 画布: 每页严格 `width: 1920px; height: 1080px;` 用 `transform: scale(...)` 适配视窗 (默认 `scale(0.7)` 居中)。
固定レイアウトプール型のdeckとは対照的です。キャンバスと配色のみを固定し、レイアウトはコンテンツの性質に応じて選択（cover / question / quote / 3カラム / 5カラム / データカードなど）され、さらに「overflow絶対禁止」というセーフガードが設けられています。
「単一の視覚的重心」によって自由度を適切に統制：テンプレートを強制しない一方で、各ページに許容される視覚的重心は1つのみとし、同等な重みを持つ2つのテキストブロックの並列を禁止しています。
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
- 但每页**必须遵守一条规则**: 视觉重心 (visual hierarchy) 只有 1 个 — 一句金句、一个数字、一张图, 不要"什么都强调"。
これは「自由な組み合わせ」で最も陥りがちな失敗パターン（情報が詰め込まれ、主従関係が失われる状態）に対する明確な対策であり、プロンプトレベルでの検収条件となっています。
配色とタイポグラフィは列挙値に厳格制限：4種類のカラーパレットから1つを選択して全体で一貫適用、フォントサイズは固定の10段階type scale、余白は96/128/160の3段階のみを使用します。
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
【调色板 — 每个 deck 选 1 套, 全程不改】
同段落では、フォントサイズも `2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220` に固定されています。
ページコンテナはリポジトリ全体のdeck規約である `<section class="slide" data-slide-id="N">` に従うよう規定されており、アプリ側のdeck.tsがこれに基づいてHTML全体をページごとのスクリーンショット用個別ドキュメントに分割します。
next/src/lib/deck.ts
<section class="slide" data-slide-id="N">
注意：付属のexample.htmlはこの規約に準拠していません（verification.second_passのdiscrepancy項目を参照）。規約自体はアプリ側のプレビュー/エクスポートパイプラインの前提条件です。
真正の上流と同一のソース元：テンプレート自身に「Inspired by 1weiho/open-slide」と記載され、frontmatterに出典を示すexample_source_urlを持ち、READMEのサードパーティソース表にも同期登録されています。
next/src/lib/templates/skills/deck-open-slide-canvas/SKILL.md
example_source_url: "https://github.com/1weiho/open-slide"
素性のわからない改変ではなく「追跡可能な移植」です。該当URLは出典表示用であり、リクエストは発生しません。
2コア機能
011920×1080キャンバス固定 + transform: scale(0.7) 中央揃え適応、全ページでno-scrollを要求
024種類のカラーパレット（Ash & Lime / Sea Indigo / Mate Mocha / Pearl Rose）から1つ選択し全体で一貫適用
0310段階のtype scale + 3段階のpadding（96/128/160）によるタイポグラフィ制約
04コンテンツの性質に応じた自由なレイアウトプール（cover / question / quote / 画像テキスト / 3カラム / 5カラム / リスト / データカード / 全面画像）
05フォントファミリーの限定：Inter Tight / Inter（またはSource Serif Pro）、中国語はNoto Sans SC / Noto Serif SC、データ表示はJetBrains Mono、sansとserifの混用禁止
06キーボード ← / → ページめくり + hash同期 + 固定コーナーバッジ（右下 №N/M、左下 deck title）
07汎用素材の乱用防止：装飾用絵文字の禁止、レインボー配色の禁止、lucide/featherなどのアイコンライブラリ適用の禁止（インラインSVGの自作を要求）
08単一ファイルHTML出力 + 本文内でのTailwind CDN指定 + 外部画像リンクの禁止
09サイト側表示順の上位：featured 35 / recommended 9、CLIルーティングでは最も汎用的なキーワード（open slide / canvas / 画布 / 自由）を専有
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | 宿主本机 agent CLI（Claude Code / Codex / Cursor / Gemini 等，由 html-anything 侧 spawn；非本 skill 指令） |
| network | Tailwind CDN（本 skill 正文点名的产出物交付方式；产物渲染时由浏览器拉取） |
| network | Google Fonts（产物示例引用，非 skill 正文要求） |
| network | 出处置标（frontmatter 元数据，非运行时调用） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
- 网络端点: 外部ネットワークアクセスの宣言: example.htmlにリモートスクリプトタグ <script src="https://cdn.tailwindcss.com"> およびGoog
監査ノート： 。評価対象＝スキルディレクトリ（SKILL.md + example.md + example.html）：ディレクトリ内に実行可能スクリプトはなく、認証情報の読み込みやディスク書き込み命令も皆無です。SKILL.md本文にはURLやAPI呼び出しは含まれません。説明を要する唯一のエンドポイントは53行目の「単一ファイルHTML、Tailwind CDN、外部画像禁止」という記述ですが、これは**生成物**のTailwind配信方式を指定したものであり（同ディレクトリのexample.html内にhttps://cdn.tailwindcss.comが文字列としてそのまま出現）、生成物内での参照に該当します。ディレクトリ内のもう1つのエンドポイントはexample.html内のGoogle Fontsの@importです。いずれもブラウザが生成物をレンダリングする際にのみ発生し、スキルの実行時には外部通信を行いません。本リポジトリのhtml-anythingテンプレートはバッチ4の基準に基づき一律で🟢「緑（安全）」と判定されます：評価対象＝スキル自体のディレクトリ。ホスト環境（loader.ts/assemblePrompt/ローカルエージェントCLI/プレビュー用iframe）やexample.html内のフォント・CDN参照は生成物フェーズの動作（ブラウザにより取得され、スキル実行時には送信されない）であるため、reason/risksへの記載にとどめ、判定ランクには影響させません。
5二重目の独立検証
- [ok] 文件清单（3 个文件，无脚本） — SKILL.md(2930B) / example.md(192B) / example.html(2317B)；无 .sh/.py/.js/.mjs/.ts，目录内无可执行代码。
- [ok] 目录内端点与档位依据 — SKILL.md:53「单文件 HTML; Tailwind CDN; 不要外链图片。」= 正文唯一 CDN 字样（端点 URL 见 example.html）；example.html 另有 fonts.googleapis.com 字体 @import 与 frontmatter 的 github.com/1weiho/open-slide 出处置标——均属产物引用/元数据，不判级。
- [ok] 无凭证读取 — 目录内 key/secret/token/.env/keychain 全部零命中。
- [ok] 无写盘指令 — 目录内 write/save/append 零命中；共享指令反而明令禁止文件系统工具。
- [ok] 画布硬规格可复核 — SKILL.md 逐字含 1920px/1080px、transform: scale、默认 scale(0.7)、禁止 overflow 四条。
- [ok] 10 级字号表与 4 套调色板可复核 — 字号表 2xs:18 … 5xl:220 与 Ash & Lime / Sea Indigo / Mate Mocha / Pearl Rose 四套 hex 均在正文逐字存在。
- [ok] frontmatter 与 loader 读取面一致 — featured/recommended/example_* 等字段都在 loader.ts 白名单 case 内，可被 fmToMeta 读成选择器元数据。
- [ok] official_desc 逐字命中 — meta.official_desc 取自 SKILL.md 第 6 行 description 引号内原文，未改写。
6結論
最適な用途： 定型レイアウトに縛られたくない場面に最適：個人のポートフォリオ、アート/デザイン講座、コンセプト重視のプレゼンテーション、1ページに大文字を配したヒーロースライド（example.mdは短文コンテンツ → 1ページのquestionスライドの好例）。また、「キャンバス固定・レイアウト自由」という折衷パラダイムの仕様を参考にしたいスキル作成者にも適しています。
不向きな用途： 厳格な企業テンプレートの一致が求められる場面（deck-swiss-internationalなどの固定レイアウト型テンプレートを推奨）；完全オフラインでのレンダリングが必要な環境（本文でTailwind CDNが指定されているため）；情報量が極めて多く資料を詰め込むタイプの報告（各ページに単一の視覚的重心を強制しoverflowを禁止しているため、長文は大量のページに分割されます）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-open-slide-canvas.tar.gz
sha256:
Option B · Copy Guide for Agent993c6c72c87e99e3…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.