openpress-create-slide

skills/openpress-create-slide/SKILL.md

ステップ 1: 環境確認

環境に Node.js 20 以降、および npm と npx がインストールされていることを確認してください。

ステップ 2: Workspace の初期化

まだプロジェクトシェルを作成していない場合は、まず次のコマンドを実行します:

npm create @open-press@latest <プロジェクト名> -- --type slides

ステップ 3: プレゼンテーション構造の生成

Agent を使用して openpress-create-slide ワークフローをトリガーし、以下を提供します:

• プレゼンテーションのタイトルとターゲットオーディエンス
• 視覚的な方向性とアニメーションの要件
• スライドの枚数とコンテンツの密度

このプロセスでは、自動的に DeckSlide、layouts/、および ui/ フォルダが作成され、対応する Tailwind の op-* スタイルが設定されます。

生成されたプレゼンテーションのエントリーファイルは次のようになります:

<Press slug="slide" title="Deck Title" type="slides" page="slide-16-9">
  <TitleSlide id="cover" title="Deck Title">
    <TitleSlide.Title objectId="title">Deck Title</TitleSlide.Title>
    <TitleSlide.Description objectId="description">
      One-line audience promise.
    </TitleSlide.Description>
  </TitleSlide>
</Press>

ステップ 4: ページ番号の構成 (Page folio)

スライドレイアウト内で、数字を直接ハードコードするのではなく、必ず PageFolio コンポーネントを使用してください。これにより、プレビュー、PDF、および画像エクスポートの際に正しく表示されるようになります:

<PageFolio currentFormat="2-digit" />

ステップ 5: プレゼンテーションのビルド検証

構造とスライドの追加が完了したら、次のコマンドを実行して、プロジェクトが正しくコンパイルできるか検証します:

npm run build

このワークフローはプレゼンテーションの成果物にのみ適用されることに注意してください。ページドキュメント（レポートなど）の作成や、デプロイタスクの実行は行いません。