slide-making-skill

PptxGenJS スライド作成スキル

このスキルでは、PptxGenJS（JavaScript）を使用してネイティブの .pptx スライドを生成する方法を説明します。

PptxGenJS リファレンス

PptxGenJS API の完全なリファレンスは、pptxgenjs.md をお読みください。 内容は以下のとおりです。

• セットアップと基本構造
• テキストと書式設定
• リストと箇条書き
• 図形と影
• 画像とアイコン
• スライドの背景
• テーブルとグラフ

---

フォントのルール

フォントファミリーの標準

言語	デフォルト	代替フォント
中国語	Microsoft YaHei (微软雅黑)	—
英語	Arial	Georgia, Calibri, Cambria, Trebuchet MS

fontFace: "Microsoft YaHei"  // Chinese text
fontFace: "Arial"            // English text (or approved alternative)

プラットフォーム間の互換性を確保するため、システム標準のフォントを使用してください。ヘッダーと本文で異なるフォントを使用できます（例：Georgia + Calibri）。

本文に太字を使わない

通常の本文とキャプション／凡例のテキストには、太字を使用しないでください。

• 本文の段落、説明 → 標準の太さ
• キャプション、凡例、脚注 → 標準の太さ
• 太字はタイトルと見出しのみに使用してください

// ✅ Correct
slide.addText("Main Title", { bold: true, fontSize: 36, fontFace: "Arial" });
slide.addText("Body text here.", { bold: false, fontSize: 14, fontFace: "Arial" });

// ❌ Wrong
slide.addText("Body text here.", { bold: true, fontSize: 14 });

---

カラーパレットのルール（必須）

パレットの厳守

指定されたカラーパレットのみを使用してください。色を作成したり変更したりしないでください。

• すべての色はユーザーが指定したパレットから選んでください
• パレットに含まれない色は使用しないでください
• パレットの色を変更しないでください（明るさ、彩度、混色など）
• 唯一の例外：transparency プロパティを使用した透明度の追加（0～100）

// ✅ Correct: Using palette colors
slide.addShape(pres.shapes.RECTANGLE, { fill: { color: theme.primary } });
slide.addText("Title", { color: theme.accent });

// ❌ Wrong: Colors outside palette
slide.addShape(pres.shapes.RECTANGLE, { fill: { color: "1a1a2e" } });

グラデーション禁止

グラデーションは禁止です。塗りつぶしには単色のみを使用してください。

// ✅ Correct: Solid colors
slide.background = { color: theme.bg };

// ✅ Correct: Solid + transparency for overlay
slide.addShape(pres.shapes.RECTANGLE, { fill: { color: theme.accent, transparency: 50 } });

アニメーション禁止

アニメーションと画面切り替え効果は禁止です。 すべてのスライドを静的にしてください。

---

ページ番号バッジ（必須）

表紙を除くすべてのスライドの右下隅に、ページ番号バッジを配置してください。

• 位置：x: 9.3", y: 5.1"
• 現在の番号のみを表示してください（例：3 または 03）。「3/12」のような表示は不可です
• パレットの色を使用し、目立ちすぎないようにしてください

円形バッジ（デフォルト）

slide.addShape(pres.shapes.OVAL, {
  x: 9.3, y: 5.1, w: 0.4, h: 0.4,
  fill: { color: theme.accent }
});
slide.addText("3", {
  x: 9.3, y: 5.1, w: 0.4, h: 0.4,
  fontSize: 12, fontFace: "Arial",
  color: "FFFFFF", bold: true,
  align: "center", valign: "middle"
});

ピル型バッジ

slide.addShape(pres.shapes.ROUNDED_RECTANGLE, {
  x: 9.1, y: 5.15, w: 0.6, h: 0.35,
  fill: { color: theme.accent },
  rectRadius: 0.15
});
slide.addText("03", {
  x: 9.1, y: 5.15, w: 0.6, h: 0.35,
  fontSize: 11, fontFace: "Arial",
  color: "FFFFFF", bold: true,
  align: "center", valign: "middle"
});

---

テーマオブジェクトの仕様（必須）

コンパイルスクリプトは、以下のキー名を厳密に使用したテーマオブジェクトを渡します。

キー	用途	例
theme.primary	最も暗い色、タイトル	"22223b"
theme.secondary	暗いアクセント色、本文テキスト	"4a4e69"
theme.accent	中間色のアクセント	"9a8c98"
theme.light	明るいアクセント色	"c9ada7"
theme.bg	背景色	"f2e9e4"

background、text、muted、darkest、lightest など、ほかのキー名は使用しないでください。

---

サブエージェントの出力形式

各サブエージェントは、実行可能な完全な JS ファイルを出力します。

// slide-01.js
const pptxgen = require("pptxgenjs");

const slideConfig = {
  type: 'cover',
  index: 1,
  title: 'Presentation Title'
};

// ⚠️ MUST be synchronous (not async)
function createSlide(pres, theme) {
  const slide = pres.addSlide();
  slide.background = { color: theme.bg };

  slide.addText(slideConfig.title, {
    x: 0.5, y: 2, w: 9, h: 1.2,
    fontSize: 48, fontFace: "Arial",  // English text uses Arial
    color: theme.primary, bold: true, align: "center"
  });

  return slide;
}

// Standalone preview - use slide-specific filename (slide-XX-preview.pptx)
if (require.main === module) {
  const pres = new pptxgen();
  pres.layout = 'LAYOUT_16x9';
  const theme = {
    primary: "22223b",
    secondary: "4a4e69",
    accent: "9a8c98",
    light: "c9ada7",
    bg: "f2e9e4"
  };
  createSlide(pres, theme);
  // Replace XX with actual slide index (01, 02, etc.) to avoid conflicts
  pres.writeFile({ fileName: "slide-01-preview.pptx" });
}

module.exports = { createSlide, slideConfig };

---

重大な注意点

createSlide() では async/await を絶対に使用しない

// ❌ WRONG - compile.js won't await
async function createSlide(pres, theme) { ... }

// ✅ CORRECT
function createSlide(pres, theme) { ... }

16 進カラーコードに「#」を絶対に付けない

color: "FF0000"      // ✅ CORRECT
color: "#FF0000"     // ❌ CORRUPTS FILE

16 進文字列に不透明度を絶対に含めない

shadow: { color: "00000020" }              // ❌ CORRUPTS FILE
shadow: { color: "000000", opacity: 0.12 } // ✅ CORRECT

タイトル内でのテキストの折り返しを防ぐ

// ✅ Use fit:'shrink' for long titles
slide.addText("Long Title Here", {
  x: 0.5, y: 2, w: 9, h: 1,
  fontSize: 48, fit: "shrink"
});

---

クイックリファレンス

• サイズ：10" × 5.625"（LAYOUT_16x9）
• 色：# を付けない 6 桁の 16 進数（例："FF0000"）
• 英語フォント：Arial（デフォルト）、または承認済みの代替フォント
• 中国語フォント：Microsoft YaHei
• ページバッジの位置：x: 9.3", y: 5.1"

---

QA（必須）

問題があることを前提にしてください。問題を見つけるのがあなたの役目です。

最初のレンダリングが正しいことはほとんどありません。QA は確認作業ではなく、バグ探しとして行ってください。最初の確認で問題が一つも見つからなかった場合は、十分に注意深く見ていません。

コンテンツの QA

python -m markitdown slide-XX-preview.pptx

内容の欠落、誤字、順序の誤りがないか確認してください。

残っているプレースホルダーテキストがないか確認してください。

python -m markitdown slide-XX-preview.pptx | grep -iE "xxxx|lorem|ipsum|placeholder"

grep で結果が返された場合は、問題がないと宣言する前に修正してください。

検証の反復

1. スライドを生成 → python -m markitdown slide-XX-preview.pptx でテキストを抽出 → 内容を確認
2. 見つかった問題を列挙する（何も見つからなかった場合は、さらに批判的に見直してください）
3. 問題を修正する
4. 再検証する — 一つの修正によって別の問題が生じることもよくあります
5. 検証で新たな問題が見つからなくなるまで繰り返す

少なくとも一度、修正と検証のサイクルを完了するまでは、成功したと宣言しないでください。

---