mcpField
S
slides

slides

github.com/openaiドキュメント28.4k584 回インストール18 週間前に更新
リポジトリ

slides について

Slidesは、PptxGenJSで編集可能なPowerPoint資料を作成するスキルです。新規作成、再現、編集の手順を示し、資料とJavaScriptソースの納品前にレンダリングとレイアウトを検証します。

主な機能

  1. 01PptxGenJSによる資料作成
  2. 02確認用スライドのレンダリング
  3. 03スライドのはみ出し検査
  4. 04スライド一覧画像の作成
  5. 05不足・代替フォントの検出
  6. 06編集可能な資料の維持

活用シーン

  1. 01編集可能なPowerPoint資料の新規作成
  2. 02既存プレゼンテーションの再現や修正
  3. 03納品前の表示とレイアウトの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/openai/skills --skill slides

インストール後、Claude Code で/slidesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
agents/
openai.yaml
assets/pptxgenjs_helpers/
code.js
image.js
index.js
latex.js
layout.js
layout_builders.js
svg.js
text.js
util.js
references/
pptxgenjs-helpers.md
scripts/
create_montage.py
detect_font.py
ensure_raster_image.py
render_slides.py
slides_test.py

詳細

スライド

概要

スライドの作成には PptxGenJS を使用してください。検査のみのタスクを除き、デッキの生成に python-pptx は使用しないでください。編集可能な出力は JavaScript で保持し、.pptx とソースの .js の両方を納品してください。

作業はタスク専用ディレクトリ内で行ってください。レンダリングと検証に合格した後でのみ、最終成果物を指定された保存先にコピーしてください。

同梱リソース

  • assets/pptxgenjs_helpers/：このフォルダーをデッキの作業ディレクトリにコピーし、ヘルパーロジックを再実装する代わりに、ローカルからインポートしてください。
  • scripts/render_slides.py：.pptx または .pdf をスライドごとの PNG にラスタライズします。
  • scripts/slides_test.py：スライドのキャンバスからコンテンツがはみ出していないか検出します。
  • scripts/create_montage.py：レンダリング済みスライドのコンタクトシート形式のモンタージュを作成します。
  • scripts/detect_font.py：LibreOffice によるフォント解決時に、見つからないフォントや代替されたフォントを報告します。
  • scripts/ensure_raster_image.py：SVG／EMF／HEIC／PDF 形式などのアセットを、すばやく確認できる PNG に変換します。
  • references/pptxgenjs-helpers.md：API の詳細や依存関係に関する注記が必要な場合にのみ読み込んでください。

ワークフロー

  1. 依頼内容を確認し、新しいデッキの作成、既存デッキの再現、または編集のいずれを行うか判断します。
  2. 最初にスライドサイズを設定します。元資料が明らかに別のアスペクト比を使用している場合を除き、16:9（LAYOUT_WIDE）をデフォルトにします。
  3. assets/pptxgenjs_helpers/ を作業ディレクトリにコピーし、そこからヘルパーをインポートします。
  4. 明示的なテーマフォントを設定し、安定した間隔を確保して、実用上可能な場合は編集可能な PowerPoint ネイティブ要素を使用し、JavaScript でデッキを作成します。
  5. このスキルのディレクトリにある同梱スクリプトを実行するか、必要なスクリプトをタスクの作業ディレクトリにコピーします。render_slides.py で結果をレンダリングし、PNG を確認してから、レイアウトの問題を修正して納品してください。
  6. スライドの端が詰まっている場合やデッキの情報量が多い場合は、slides_test.py を実行してはみ出しを確認します。
  7. .pptx、作成用の .js、およびデッキの再構築に必要な生成済みアセットを納品してください。

作成ルール

  • テーマフォントを明示的に設定してください。タイポグラフィが重要な場合は、PowerPoint のデフォルトに依存しないでください。
  • テキストボックスのサイズ調整には autoFontSize、calcTextBox などの関連ヘルパーを使用してください。PptxGenJS の fit や autoFit は使用しないでください。
  • 箇条書きにはオプションを使用し、文字としての • は使用しないでください。
  • PptxGenJS 組み込みの画像サイズ調整ではなく、imageSizingCrop または imageSizingContain を使用してください。
  • 数式には latexToSvgDataUri() を使用し、シンタックスハイライト付きのコードブロックには codeToRuns() を使用してください。
  • 後からレビュー担当者が編集できるよう、シンプルな棒グラフ、折れ線グラフ、円グラフ、ヒストグラム形式のビジュアルには、PowerPoint ネイティブのグラフを優先してください。
  • PptxGenJS では適切に表現できないグラフや図は、SVG として外部でレンダリングし、スライドに配置してください。
  • スライドを生成または大幅に編集する場合は、提出する JavaScript に warnIfSlideHasOverlaps(slide, pptx) と warnIfSlideElementsOutOfBounds(slide, pptx) の両方を含めてください。
  • 意図しない重なりや範囲外へのはみ出しは、納品前にすべて修正してください。重なりが意図的な場合は、該当する要素の近くに短いコードコメントを残してください。

既存スライドの再現または編集

  • レイアウトを再構築する前に、元のデッキまたは参照 PDF をレンダリングし、スライドの形状を視覚的に比較できるようにしてください。
  • レイアウトを再構築する前に、元のアスペクト比に合わせてください。
  • 可能な限り編集可能な状態を維持してください。テキストはテキストのままにし、シンプルなグラフはネイティブグラフのままにしてください。
  • 参照スライドでラスター画像が使用されている場合は、ensure_raster_image.py を使用して、ベクター形式や特殊な画像形式から配置前に確認用 PNG を生成してください。

検証コマンド

以下の例では、必要なスクリプトを作業ディレクトリにコピー済みであることを前提としています。コピーしていない場合は、このスキルのディレクトリからの相対パスで同じスクリプトを実行してください。

# Render slides to PNGs for review
python3 scripts/render_slides.py deck.pptx --output_dir rendered

# Build a montage for quick scanning
python3 scripts/create_montage.py --input_dir rendered --output_file montage.png

# Check for overflow beyond the original slide canvas
python3 scripts/slides_test.py deck.pptx

# Detect missing or substituted fonts
python3 scripts/detect_font.py deck.pptx --json

ヘルパー API の概要や依存関係の詳細が必要な場合は、references/pptxgenjs-helpers.md を読み込んでください。

コメント

Markdown 対応