1仕組みと動作原理
横方向のスライド切り替えは「単一の flex トラック + translateX(-idx*100vw)」で実装：すべてのスライドを横並びに配置し、ページ送りは 700ms のトランジションを伴う transform の変更のみで処理。ページごとに display を切り替えるよりもスムーズで、タッチドラッグの操作マージンも広がります。
next/src/lib/templates/skills/deck-magazine-web/example.html
deck.style.transform = 'translateX(' + (-idx * 100) + 'vw)';
トラック型レイアウトは横型デッキの標準的な解法であり、本テンプレートでは applySlide() として固定実装されています。
ナビゲーションモデルは同一リポジトリの guizang-ppt テンプレートからの借用であることが明記されており（同じ flex トラック + translateX、同じ key/wheel/touch ハンドラ）、既存の実装をベースにリスキンされたものであることを示しています。
next/src/lib/templates/skills/deck-magazine-web/example.html
* Navigation model is borrowed from skills/guizang-ppt — same flex
コメント欄で「どのテンプレートからナビゲーションを借用したか」を明記している本バッチ唯一のファイルであり、リポジトリ内で追跡可能な再利用チェーンとなっています。
タイポグラフィ言語は kami デザインシステムに由来：kami トークンの採用（温かみのある羊皮紙背景、インクブルーのアクセント、単一ウェイトのセリフ、斜体不使用）がコメントに明記され、印刷基準線に対してマクロトークンを約1.6倍に拡大、字間を約0.6倍に縮小しています。
next/src/lib/templates/skills/deck-magazine-web/example.html
* tokens are scaled × ~1.6 vs. print baseline; letter-spacing scaled
感覚的なパラメータ調整ではなく、「雑誌感」を外部のデザイン定義トークン（DESIGN.md §3）に紐づけています。
ホストとの明示的な規約：コメントには、ページ番号を駆動するために .slide.active が Open Design の host bridge（src/runtime/srcdoc.ts の findActiveByClass）によって読み取られる旨が記載されています。CSS 内でこれを参照するルールは存在せず、ロードベアリング（必須要素）であるため削除禁止と明記されています。
next/src/lib/templates/skills/deck-magazine-web/example.html
/* load-bearing: .slide.active is read by Open Design's host bridge
ホストが自身の特定のクラスを読み取ることを明記した本バッチ唯一のテンプレートであり、プレビュー／パブリッシュ経路が協調設計されていることを示しています。
インタラクションにスロットルロックを搭載：lock が真の場合 go(n) は直ちに復帰し、wheel/key/touch のみがスロットルを経由します。プログラムによる同期（ホストメッセージ、初期ページ復帰）はロックをバイパスし、700ms のトランジション中に高速な入力で連続してページ送りが加算されるのを防ぎます。
next/src/lib/templates/skills/deck-magazine-web/example.html
function go(n) {
「入力のスロットリング」と「状態同期」の分離は、JS を内蔵したこの種のスライドデッキで陥りやすい落とし穴を回避しています。
ページ種別は data-slide-kind で注釈（cover / chapter / content / stats / quote / cta / end）。サンプルの9ページは表紙、章扉、本文、データハイライト、名言、CTA、終了ページを網羅しており、SKILL.md のレイアウト一覧を忠実に再現しています。
next/src/lib/templates/skills/deck-magazine-web/example.html
<section class='slide s-stats' data-slide-kind='stats'>
data-* でページ型を注釈することで、ホストや後続スクリプトによる統計取得やジャンプが容易になります。
「データハイライトページ」と「名言ページ」の両方がサンプルに含まれる：stats ページは巨大な数字と1行の説明文、quote ページは日曜版の新聞風の引用レイアウトを採用しています。
next/src/lib/templates/skills/deck-magazine-web/example.html
<section class='slide s-quote' data-slide-kind='quote'>
SKILL.md にある4つのレイアウト分類はすべてサンプル内で確認でき、机上の仕様にとどまっていません。
ランタイムはホスト側が担当：テンプレートディレクトリ内にスクリプトファイルは同梱されておらず、プロンプトはホストによって組み立てられた後にローカル agent CLI に渡されます。サンプル内の JS は成果物としてのコンテンツに属します。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
skill ディレクトリは依然として「テキストテンプレート＋サンプル」であり、実行可能なアセットは含まれていません。
2コア機能
01横スワイプ HTML スライドデッキの位置づけ（雑誌 × e-ink 調）
02表紙（セリフ display + WebGL 流体背景）
03章の幕間／扉ページ
04データハイライトページ（巨大な数字 + 1行の説明）
05画像グリッドページ
06名言・引用ページ（サンデー・ペーパー風）
07キーボード ← / → 切り替え + hash 同期
08プログレスバー + ナビゲーションドット + Escape 全体一覧（サンプル実装）
09キーボードフル対応：矢印キー / PageUp / PageDown / スペース / Home / End
10単一ファイル自己完結型（スタイルおよび対話スクリプトを含む）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（Source Serif 4 / Source Sans 3 / JetBrains Mono） |
| network | Google Fonts 静态域（preconnect 预连接） |
| network | 产物示例 CTA 页的 GitHub 外链（指引用户去项目仓库 Star / 提 issue） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストのみであり、スクリプト実行や外部影響は一切なし
監査ノート： 。判定対象＝skill 自身のディレクトリ（next/src/lib/templates/skills/deck-magazine-web/）：ディレクトリ内には SKILL.md、example.html のみが存在し、.sh/.py/.mjs/.ts などの実行可能ファイル、package.json、インストールスクリプトは一切なし。認証情報／環境変数／Cookie を読み取るコードや、ディスクへの書き込み命令も含まれていません（HTML はモデルの応答本文に出力され、ディスクへの保存はホストのフロントエンドが担当）。example 内の <script> カウント＝1（example.html×1）。SKILL.md は純粋な組版・コンテンツ規約であり、実行時にアクセスする生成バックエンドや API を指定していません。第4バッチの判定基準（成果物内の参照は判定対象外、純粋な指示テンプレートは green 判定）に基づき、本テンプレートは純粋指示型と判定されます。ディレクトリ内に実際に現れるエンドポイントは以下のみです（いずれもブラウザ側で取得される成果物サンプルまたはそのメタデータであり、skill コードから呼び出されるものではありません）：fonts.googleapis.com（example.html 内）、fonts.gstatic.com（example.html 内）、github.com（example.html 内）。ホスト側の動作は判定対象外とし、verdict.risks に別途記録：convert ルートがローカル agent CLI を spawn して stdin 経由でプロンプトを渡す（next/src/lib/agents/invoke.ts）、共有指示が Tailwind / Google Fonts の CDN 読み込みを要求する（next/src/lib/templates/shared.ts）、プレビュー iframe で sandbox="allow-scripts allow-same-origin" が使用される（next/src/components/template-picker.tsx）。
5二重目の独立検証
- [discrepancy] 「WebGL 流体背景」是否存在于示例 — 不存在。example.html 内 canvas / getContext / WebGL / shader 关键字计数为 0（文件里唯一 <script> 是翻页逻辑），封面是暖羊皮纸底 + 墨蓝章节页的静态排版。SKILL.md 的「WebGL 流体背景」在示例中未落地，属描述超出现有预览稿（宿主共享指令也禁止引用外部图片、优先 CSS/SVG 内联，实际生成时是否引入 WebGL 取决于模型与所加库）。
- [discrepancy] 「键盘 ← / → 切换; hash 同步」是否兑现 — 键盘兑现（方向键 / PageUp / PageDown / 空格 / Home / End 全套 + Escape 总览）；但示例脚本内没有 location.hash 读写，「hash 同步」这条在示例中未实现（截图与核对范围内未发现 hashchange 监听）。
- [ok] 导航是否真有节流 — go(n) 在 lock 为真时直接 return；滚动 / 键盘 / 触摸走 throttle，程序化同步绕过锁（注释说明原因）。
- [ok] 与宿主的 .slide.active 契约是否存在 — 注释声明 host bridge（src/runtime/srcdoc.ts findActiveByClass）读取该 class 驱动页码，并标注 load-bearing；宿主 deck.ts 亦按 <section class="slide"> 约定解析。
- [ok] 目录内是否有脚本文件 / 凭证读取 / 写盘 — 目录仅 SKILL.md + example.html 两个文件，无独立脚本文件；示例 JS 不读取 env / 凭证、不写盘、无 fetch/XHR 请求（唯一外链是 <link> 字体与 CTA 的 <a href>）。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-magazine-web，含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-magazine-web（Magazine-style web deck），与目录内容相符。
6結論
最適な用途： ブランドストーリー、業界分析、数値ハイライト、名言紹介など、「雑誌のような質感 ＋ 横方向の閲覧」が求められる場面に最適です。また、完全なインタラクションを備え、コンテンツを直接差し替えて利用できる単一ファイルのスライドデッキ実装リファレンスとしても適しています。
不向きな用途： 実際の WebGL や流体アニメーションを必要とするプレゼンテーションには不向き（サンプルに canvas は含まれず独自にライブラリの導入が必要であり、ホストの共有指示でも外部画像が禁止されています）。完全なオフライン・自己完結型の納品物には不向き（成果物に外部フォントリンクが含まれるため）。hash によるディープリンク遷移が必要な用途には不向き（サンプルでは hash 同期が未実装）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-magazine-web.tar.gz
sha256:
Option B · Copy Guide for Agent44c08bb9682d2bdc…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.