mcpField
S
slides

slides

github.com/jetbrainsドキュメント38599 回インストール1 週間前に更新
リポジトリ

slides について

PptxGenJSでPowerPointの作成、再現、編集を行うスキルです。編集可能な出力を保ち、納品前のレンダリング確認と検証を案内します。

主な機能

  1. 01PptxGenJSによるJavaScript作成
  2. 02編集可能なPowerPoint標準要素
  3. 03スライド描画と一覧画像のスクリプト
  4. 04はみ出しとフォントの確認
  5. 05既存スライドの再現・編集ガイド

活用シーン

  1. 01新しいPowerPointの作成
  2. 02元のデッキやPDFからのスライド再現
  3. 03描画結果のレイアウト確認

インストール

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

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

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

同梱ファイル

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

LICENSE.txt
agents/
openai.yaml
assets/
slides-small.svg
scripts/
create_montage.py
detect_font.py
render_slides.py
slides_test.py

詳細

スライド

概要

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

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

バンドルされているリソース

  • scripts/render_slides.py：.pptx または .pdf をスライドごとの PNG にラスタライズします。
  • scripts/slides_test.py：スライドのキャンバスからはみ出すコンテンツを検出します。
  • scripts/create_montage.py：レンダリングしたスライドを一覧できるコンタクトシート形式のモンタージュを作成します。
  • scripts/detect_font.py：LibreOffice によるフォントの解決時に、見つからないフォントや代替されたフォントを報告します。

ワークフロー

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

作成ルール

  • テーマフォントを明示的に設定してください。文字組みが重要な場合は、PowerPoint の既定値に依存しないでください。
  • テキストボックスのサイズは意図的に決め、レンダリングして確認してください。最終レイアウトでは、PptxGenJS の fit や autoFit に依存しないでください。
  • 箇条書きオプションを使用し、リテラルの • 文字は使わないでください。
  • 画像を配置する際は、明確なクロップ／包含計算を行い、アスペクト比とフレーミングを意図どおりにしてください。
  • 単純な棒グラフ、折れ線グラフ、円グラフ、ヒストグラム形式のビジュアルには、レビュー担当者が後から編集できるよう、PowerPoint ネイティブのグラフを優先してください。
  • PptxGenJS で適切に表現できないグラフや図は、外部で SVG にレンダリングしてスライドに配置してください。
  • 意図しない重なりや範囲外へのはみ出しは、納品前にすべて修正してください。意図的な重なりがある場合は、該当要素の近くに短いコードコメントを残してください。

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

  • レイアウトを再構築する前に、元のデッキまたは参考 PDF をレンダリングし、スライドの形状を視覚的に比較できるようにしてください。
  • レイアウトを再構築する前に、元のアスペクト比に合わせてください。
  • 可能な限り編集可能な状態を保ってください。テキストはテキストのまま、単純なグラフはネイティブグラフのままにしてください。

検証コマンド

以下の例は、必要なスクリプトを作業ディレクトリにコピーしたことを前提としています。コピーしていない場合は、このスキルのディレクトリを基準に同じスクリプトパスを指定して実行してください。

# 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

コメント

Markdown 対応