tadyuh76/slide-deck

スライドデッキ

デッキとは、1920x1080のスライドをレンダリングする小さなReactプロジェクトであり、それらをネイティブのPowerPoint（編集可能なテキスト、スピーカーノート付き）、PDF、スピーカースクリプトに変換するパイプラインのことです。starter/ は完全に動作するデッキ（ベトナム語の12サンプルスライド、青テーマ、各構成の例を1つずつ含む）です。これをコピーし、コンテンツを置き換え、システムはそのまま維持してください。

ブリーフィングを読んで、何よりも先に以下の3点を確認してください：会場に誰がいるか（事前知識がないものと想定）、セッション時間はどれくらいか、スピーカー自身のアウトラインは何か。スピーカーのアウトラインが順序と内容を決定します。あなたの仕事は明確さと見た目であり、新しい主張をすることではありません。

1. 開始

cp -R "<このスキルフォルダ>/starter" "<プロジェクト>/<デッキ名>"
cd "<プロジェクト>/<デッキ名>/deck" && npm install && npx playwright install chromium
npx vite                                                # 開発サーバー、ポートは vite.config.ts に記載

次に名前を設定します：tools/deck-name.txt（PPTXとPDFのファイル名）、deck/index.html のタイトル、deck/script-doc.mjs の見出し、deck/src/deck/types.ts（ACTS）のセクション名、Chrome（deck/src/deck/Deck.tsx）のフッターテキストとロゴ。別のデッキが動作中の場合は、deck/vite.config.ts で空いているポートを選択してください。

プロジェクトのレイアウト：

• deck/src/slides/*.tsx スライドまたはグループごとに1ファイル、順序は index.ts で管理。各ファイルは SlideDef（id、title、act、minutes、notes、Component）をエクスポートします。
• deck/src/ui/atoms.tsx 共有パーツ：Bg、Header、HaloArt/Art、Feature（ハイライトされたパネル）、IconTile、Stat、Source、LogoTile、AppIcon。Links.tsx は遅い移動ドットで接続線を描画します。World.tsx は実際の国形状からドットの世界地図を描画します。
• deck/src/index.css はカラートークンを保持します。--accent、--accent-ink、背景値、rgbaの色合いを変更することでテーマを変更し、2番目のテーマを追加しないでください。
• tools/ アート生成、ビルド、リリース。

2. コンテンツルール（オーナーが修正した内容、頻度順）

1. スピーカーのドキュメントに従うこと。 セクションの順序、定義の文言、すべての数字はスピーカーのドキュメントから取得します。アウトラインに見出ししかない場合は、一次情報源から最小限の情報を追加し、Source でリンクし、どのスライドを自分が補完したかをオーナーに伝えてください。リストがサポートしていない数を提示しないでください（30名と発表されたリストに28名しかいない場合：リストを表示し、数値は省略し、その旨を報告してください）。
2. 見出しは非常にシンプルに。 見出しは、聴衆がすでに使用している言葉でスライドの内容を表します：「5 cách thu thập dữ liệu xuyên biên giới」（国境を越えたデータ収集の5つの方法）、「Yêu cầu trong tình huống khẩn cấp」（緊急時の要件）。賢い表現や圧縮された行は却下されます。1行、66pxで約40文字以内。後半はアクセントカラーで表示します。
3. 最小限のテキスト、平易な言葉で。 カードごとに1つのアイデア、数行の短い文。一般的な英語用語は括弧内または小さな2行目として表示します（「service provider」）。数字は数字表記、単語ではありません。見出しの上に小さなラベルを付けない、コロンや中点を装飾として使わない、宣伝文句を入れない。
4. すべてを翻訳する ソースデッキから対象言語に翻訳します。固有名詞と、役員が遭遇する英語用語はそのまま保持します。
5. スピーカーノートに全文を記載する。 スライドは短い形式を保持します。ノートにはアウトラインからのスピーカーの完全な文章を保持し、情報が失われないようにします。minutes を合計し、セッション時間と比較して超過を報告します。
6. 実在の組織には実際のロゴを使用する（公式ファイル、生成された類似品は不可）。各ロゴの入手元を assets/logos-src/SOURCES.md に記録します。オーナーが依頼した組織ロゴは、すべてのスライドの Chrome に配置し、タイトルスライドとクロージングスライドでは大きく表示します。
7. 背景をファクトチェックする。 自分が追加する事実（日付、条文番号、法律番号、数値）について1つのリサーチエージェントを送り、結果を docs/facts.md に各項目のURLとともに書き込みます。スピーカー自身の数値が公開情報源と異なる場合は、彼女の数値を保持し、差異を報告します。

3. グラフィック

すべてのコンテンツスライドにはイラストがあります。アイコンのみのスライドは退屈だと指摘されました。スライドにアートがある場合に限り、小さなlucideアイコンを行マーカーとして使用しても構いません。

• 単一ファミリー：フラットなカラープレーンから構成されるコンパクトな疑似3Dオブジェクト。グラデーションやグローはなく、単一のカラーファミリーと小さな黄色のマーカーのみ。スタイルリファレンスシートは assets/ref/blue-indicators.png と green-indicators.png です。シート上のすべてのタイルはそれ自体フラットである必要があります。光沢のあるタイルが1つあると、新しい画像がグラデーションに引き寄せられます。別の色の場合は、シートを色変えして開始します（tools/blue_ref.py）。tools/art.mjs のパレット行を変更し、最初のバッチを生成した後、自分の最高の結果16個からシートを再構築し、その後はそれを使用します（青シートもこの方法で作成されました）。
• 画像ごとに tools/art-list.tsv に行を追加します（名前<TAB>コンセプト）。コンセプトとは、最大2つの補足詳細があり、テキストのない1つの明確なオブジェクトです：「フラップに南京錠が付いて目にバツ印が描かれたバッジのある封印された封筒」。
• P=4 bash tools/art-batch.sh は、Codex CLIの画像ツールを使用して不足しているものを生成します（約80秒/個。codex がインストールされ、サインインしている必要があり、モデルは tools/art.mjs で設定します）。バックグラウンドで実行し、スライドの作成を続けてください。一部の実行はサイレントに失敗します。終了したら、すべての名前が存在することを確認し、不足しているものがあれば再実行してください。
• docker build -q -t deck-pack -f tools/Dockerfile tools && docker run --rm -v "$PWD":/w -w /w deck-pack python tools/art_finish.py はこれらをトリミングして deck/public/art/*.webp に配置します。<HaloArt name="..." size={...} /> と共に使用します。
• センシティブな主題（児童虐待、自殺、テロリズム）には保護的なシンボルを使用します：傘、盾、救命浮環、警告標識。
• 地図は World.tsx（実際の形状）から取得し、画像モデルからは決して取得しません。図（ベン図、フロー図、ハブ図）はスライド内のSVGです。

4. 構成：隣り合うスライドが同じにならないように

すべてのスライドが同じカードの行で構成されたデッキは差し戻されました（「すべてのスライドが非常に類似したレイアウト」）。各スライドには、そのコンテンツに合った形状を与えてください。スターターには各構成の実例が1つずつ含まれています：

コンテンツ	構成	スタータースライド
順序のあるいくつかの部分	1つのパスに沿って上昇するステップ、大きな薄い数字	s02-agenda.tsx
1つの包括的なアイデアとその他いくつか	Bento：1つの高いハイライトタイルと2x2グリッド	s03-terms.tsx の Terms
プロセス	パイプライン：線上の番号付きステーション、結果パネルに流れ込む	s05-preserve.tsx
1つのことへの複数の方法	ハブアンドスポーク	s06-channels.tsx
同じ属性を持つ並列的な種類	全幅行：画像、質問、名前、内容	s03-terms.tsx の DataTypes
1つの警告があるオプション	タイルグリッド + 1つの Feature パネル	s08-requests.tsx の Emergency
一連の引き継ぎ	矢印付きノードのフロー（ui/Links.tsx の Link）	スターターにはなし
2つの代替案	2つのワイドパネル	スターターにはなし
共通コアを持つ重複領域	ベン図、引き出し線上のラベル	s11-venn.tsx の Directorate
場所	ピンまたは点灯した国のあるドットマップ、横にリスト	s17b-map-list.tsx
4つの機能を持つ中心	中央のディスク、角にアイテム	s14-corners-bridge.tsx の AspDesk
2つの側面とその間を通過するもの	橋：2つの岸、間のレーン	s14-corners-bridge.tsx の Gateway
ポイントを証明する数字	Feature パネルと Stat	スターターにはなし

スピーカー自身のスライドに図のアイデア（ベン図、地図の横のリストなど）がある場合は、意図と内容を保持し、再描画します。彼女のスタイルは保持しないでください。

5. テキストクラフト（以下はすべて却下されたスクリーンショットの例です）

• 何もジャンプしない。 カードのセットでは、同じ要素はすべてのカードで同じ高さから始まります。タイトルは同じ行数にしてください（言い換えるか、すべてのタイトルを2行にします）。その後、残りの要素を真下に積み重ねます。空のスロットや、タイトルとそのテキストの間に margin-top: auto による隙間を作らないでください。
• 意味の区切りで改行する。 .slide は white-space: pre-line です。フレーズの末尾に \n を記述します：「Chuỗi bảo quản\nchứng cứ」（証拠の\n保管チェーン）。「Chuỗi bảo\nquản chứng cứ」としてはなりません。手動で設定した各行は、ブラウザが再ラップしないように十分短くしてください。再ラップする場合は、行を短くするかボックスを広げてください。名前のリストも手動で改行を設定します（非改行スペースはPowerPointで問題を引き起こしました）。
• 行ごとに1つのサイズ。 大きな数字とその単位は2つのブロック（Stat）です。説明を導くアクセント単語はそれ自体が1行です。
• マージン。 コンテンツは左右120px以内に収め、ロゴストリップ（上端30〜98px）と干渉しないようにします。地図や図のラベルが右端に触れていないか確認します。
• スライドは完全な状態で開く。 開始アニメーションはありません。せいぜい1回のクリックで表示、それも表示が重要な場合のみです。アンビエントモーション（流れるドット、タイトルの背景など）は問題ありません。
• 特に指示がない限り、スライドに進捗やセクション番号のウィジェットを表示しないでください。フッターレールで十分です。

6. ビルドとチェック

zsh tools/release.sh     # 約5分：release/ に Deck/（Web）、.pptx、.pdf、Kich-ban-trinh-bay.pdf が作成されます

リリースは、フォントが埋め込まれるようにファイルをMicrosoft PowerPointで再保存します。最初にPowerPointを終了します。未保存のファイルが開いていないことを確認し、2つのセッションが同時に再保存しないように /tmp にロックフォルダを作成します。MacでPowerPointがない場合は、tools/release.sh のそのステップをスキップします。デッキは開きますが、フォントは発表用マシンにインストールされている必要があります。

チェックは作業の一部であり、毎ラウンド実施します：

1. cd deck && npx vite build && node export.mjs ../tmp/export ですべてのスライドを tmp/export/sNN.png にレンダリングします。
2. すべてのスライドをフルサイズで、一度に1枚ずつ確認します（幅1600pxに縮小）。コンタクトシートでは、折り返された行、境界に触れるテキスト、位置がずれた行を見逃します。以下の点を確認します：自分が改行していない箇所で折り返された行、端に近いまたは端にかかるテキスト、ロゴに触れる見出し、カード間で不均一な開始位置、欠落した画像（空の輪郭の四角形）、重なったラベル。
3. リリース後、変更したスライドについて tmp/lo/p-NN.png（LibreOfficeでレイアウトされたPowerPoint）を確認します。ここで、あふれたテキストボックスが表示されます。LibreOfficeはタイプをPowerPointよりもわずかに広くレンダリングするため、そこでのニアミスは実際のリスクです。
4. 修正し、再ビルドし、再度確認します。何を確認し、何を確認しなかったかを明確に述べます。

その後、release/ をデスクトップ上の名前付きフォルダにコピーし、release/Deck をlocalhostで提供し（docker run -d -p 127.0.0.1:<port>:80 -v "$PWD/release/Deck":/usr/share/nginx/html:ro nginx:alpine）、要求されたらフォルダを開きます。

7. 報告

準備ができているものとその場所を最初に述べます。次に、オーナーまたはスピーカーの判断に委ねる決定事項をリストします：アウトラインに追加したもの、情報源と矛盾するにもかかわらず保持した数値、合わないカウント、セッション時間に対する実行時間。ファイル名や関数名ではなく、平易な言葉で述べてください。