html-slideshow
1つの自己完結型・最小化された .html にバンドルされたレスポンシブスライドショーです。
スライドはHTMLで作成し、エンジン（assets/base.css + base.js）とBunビルドによって最終ファイルを生成します。Bunが必要です。
ワークフロー
- ランタイムを確認 —
bun --version（不足している場合はbun.shからインストール、1.4.0で確認済み）。 - テンプレートをコピー —
assets/base.html、assets/base.css、assets/base.jsをユーザーのワークスペース内のデッキフォルダにコピーします（同じ階層に配置）。.htmlは自由にリネームできます（例：my-deck.html）。base.cssとbase.jsは.htmlからの相対パスで参照されるため、リネームする場合は参照を更新する必要があります。 - タイトルを設定 —
.html内の<title>を編集します。デッキはデフォルトで暗いテーマで表示されます。印刷時は自動的に強制的に明るいパレットに切り替わります。 - スライドを追加 —
<main id="deck">内に、1スライドにつき1つの<section class="slide">を追加します。<section class="slide"> <h2>四半期実績</h2> <ul><li>売上高が24%増加</li></ul> </section> - カスタムCSS/JS — リンクファイルのみ、インラインは不可。
.htmlに<style>または<script>ブロックを追加しないでください。.htmlにはページの骨格とスライドコンテンツのみを保持し、ビルドがリンクされたファイルを最終的な自己完結型ファイルにインライン化します。これにより、ソースを編集可能に保ち、エンジンを単一ソースにできます。カスタムコードを配置する2つの適切な場所：base.css/base.jsを直接編集するか、デッキ固有のスタイリングや動作をエンジンから分離したい場合は、<link rel="stylesheet" href="extra.css">/<script src="extra.js" defer></script>を追加します（ビルドがインライン化します。base.*は可能な限り変更しないでください —references/bundling-assets.mdを参照）。（references/slide-patterns.mdのレシピはこれに従っています。） - コンテナユニットでサイズ指定 —
pxは絶対に使用しない。 各スライドはCSSクエリコンテナであるため、cqw/cqh/cqminとclamp()を使用すると、コンテンツはあらゆる画面にスケーリングします。px/ptはレスポンシブ性を損なうため使用しないでください（外側のフレームはsvhを使用）。これはエージェントが間違えがちな唯一のルールです。完全なガイドはreferences/responsive-units.mdを参照してください。 ポートレートビューポートは自動的に処理されます。スライドはランドスケープキャンバスでレンダリングされ、収まるようにスケーリングされるため、ワイドなテーブルやグリッドが電話画面からはみ出すことはありません（--slide-w/--slide-hを:rootに設定、デフォルトは16/9）。 - ビルド — スキルのビルドスクリプトを実行します：
bun scripts/build.js my-deck.html（bun build --compile --target=browser --minify my-deck.html --outdir distをラップします。Bunが動作するOSならどこでも動作します）→dist/my-deck.html：CSS、JS、および参照されたアセットがインライン化された、単一で最小化された自己完結型ファイルが生成されます。これが配布するファイルです。 - ビルドされたファイルを検証 — ブラウザツールで
dist/my-deck.htmlをfile://URLで開きます。合格条件：コントロールが表示されること。ArrowRightでカウンターが "2 / N" に進み、location.hashが#2に設定されること。約400×800のビューポートでも1つのスライドが完全にレターボックス表示されること。Oでオーバービューが切り替わること。印刷メディアエミュレーションで1ページに1スライドが表示されること。シグナルはreferences/using-the-deck.mdに文書化されています。ブラウザツールがない場合は、視覚的な検証をスキップしたことを明記してください。 - クリーンアップ — ビルド出力以外に作成されるものはありません。
my-deck.html、base.css、base.js（編集可能なソース）をdist/my-deck.html（配布するファイル）の隣に保持します。ユーザーが単一ファイルのみを希望する場合は、dist/my-deck.htmlをデッキが置かれるべき場所に移動し、デッキフォルダはそのソースとして保持します。
リファレンス一覧
必要に応じて参照 — 一度にすべてを読む必要はありません。
references/using-the-deck.md— セットアップ、スライド契約、完全なナビゲーション、ディープリンク（#5でスライド5を開く、#some-idでそのidを持つスライドを開く、引用→ソースに使用）、ビルド、印刷。references/slide-patterns.md— 既製のスライドレシピ＋作成ガイダンス。references/responsive-units.md—pxを使わない流体サイズ設定ガイド。references/bundling-assets.md— インラインSVG / データURIアセット（ビルドは相対参照もインライン化します）。references/engine-anatomy.md— エンジン（base.html/base.css/base.js）のマップ。変更時に参照。examples/quickstart.html— 完成したデッキ（ソース。ビルドして自己完結型ファイルを生成）。examples/README.md— サンプルデッキの2つの形式（読み取り可能なソース vs ビルドされたスタンドアロン）と、編集後にスタンドアロンを再ビルドする方法。
使用するタイミング
出力を一度に1画面ずつ表示したい場合：トーク、レッスン、デモ、ステータス更新、ピッチ。スクロールする散文やドキュメントには使用しません。