mcpField
O
openpress-create-slide

openpress-create-slide

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

openpress-create-slide について

open-press のデッキで、直接編集できるスライドソースを作成・変更するためのスキルです。ビジュアル方針、構成、共有コンポーネント、レビューの進め方を案内します。

主な機能

  1. 01直接編集するスライドソース
  2. 02対象者とメッセージの計画
  3. 03テーマとコンポーネントの指針
  4. 04コマンドラインでの並べ替え
  5. 05ビルドと表示確認のチェックリスト

活用シーン

  1. 01新しいプレゼンのストーリー設計
  2. 02デッキへのスライド追加や編集
  3. 03ソースとビジュアルの一貫性確認

インストール

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

$npx skills add https://github.com/quan0715/open-press --skill openpress-create-slide

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

同梱ファイル

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

references/
css-colocate.md
icons.md
layout-contract.md
press-tree.md
typography-roles.md

詳細

open-press Create Slide

直接編集可能なスライドソースを連ねて、スライドデッキを作成します。各スライドが独自の構成を持ち、Press が管理するのはデッキの登録、テーマ、そして本当に共有される UI のみです。

基本原則

  • 対象となる audience、各スライドのメッセージをひとつに絞り、それを裏付ける根拠から始めます。
  • 1 枚のスライドに盛り込むビジュアルのアイデアはひとつにします。文章を詰め込むより、図、画像、比較、大きな数値を使いましょう。
  • 新しいスライドは、レジストリや事前選択されたレイアウトアセットを介さず、直接ソースファイルとして作成します。
  • ローカルコンポーネントは、ビジュアルプリミティブが実際に繰り返し使われた後にのみ再利用します。press/<slug>/ui/ または press/<slug>/components/ に配置します。

ソースを変更する前に読む

  1. デッキの press/<slug>/press.tsx、有効な theme/default.css、近くにあるスライドを読みます。

  2. 短い STYLE メモに、デッキのビジュアルの方向性を記します。文字のスケール、配色、余白、意図するビジュアル表現を含めてください。

  3. 新しいデッキまたは構成を変更するデッキでは、簡潔な構成案を作成します。

    AUDIENCE: who must understand what
STORY:
- id | composition | one message | evidence or visual
PRODUCE: direct slide sources, active theme, only proven shared UI

  4. ユーザーから変更の要望がない限り、既存のスライド順と ID を維持します。

ソースの要件

  • press/<slug>/press.tsx では、マーカーのみの <Slide id="…" /> エントリーでスライド ID を登録します。
  • 各 press/<slug>/slides/<id>/slide.tsx では、必要なオブジェクトを明示的にインポートして組み立てます。
  • デッキのキャンバスは 1920 × 1080 に固定します。単一の <Slide> ルート、予測可能な <Frame> 境界、リテラルな meta を維持します。
  • meta の layout は、読者向けに構成を説明するものであり、ソースを選択したり、スライドを生成したりするものではありません。
  • デッキのトークンは press/<slug>/theme/default.css に配置します。スライド固有の CSS はそのスライドの隣に置くか、デッキ全体で共有する場合は有効なテーマに配置します。
  • ジオメトリ、意味構造、レスポンシブ制約が明確になる場合は、@open-press/core のオブジェクトを使用します。独自の細部には通常の TSX と CSS を使用します。

スライドを作成する前に references/layout-contract.md を読みます。スタイルを変更する場合は references/css-colocate.md を、ファイルを追加する場合は references/press-tree.md を読みます。

スライドの追加と編集

次のコマンドで空のスライドソースを作成します。

open-press slide add <id> --press <slug>

続いて、press/<slug>/slides/<id>/slide.tsx を直接編集します。生成されるプレースホルダーは意図的に最小限のものです。定型コードを残すのではなく、実際のスライド構成に置き換えてください。

新しいビジュアル表現を作成する場合：

  1. スライドソース内で構成を組み立てます。
  2. 同じ構造が実際に 2 回目に使われた後にのみ、ローカルプリミティブを切り出します。
  3. 共有コンポーネントには、一般的なレイアウト分類ではなく、その役割を表す名前（EvidenceGrid、SectionKicker など）を付けます。
  4. ソースの確認や読者のナビゲーションに十分なほど、コンテンツとメタデータをリテラルに保ちます。

並べ替えと削除

登録とフォルダーの整合性を保つため、CLI を使用します。

open-press slide move <id> <position> --press <slug>
open-press slide remove <id> --press <slug>
open-press slide status --press <slug>

レビューチェックリスト

  • すべてのスライドが、発表のペースでひとつの主張を伝えていますか？
  • 画像、グラフ、図は、発表を見る距離からでも判読できますか？
  • スライドソースは自己完結しており、直接編集できますか？
  • 共有コンポーネントは、再利用の見込みではなく、実際の再利用によって正当化されていますか？
  • 有効なテーマは、デッキに必要な余白とコントラストを備えていますか？
  • ナビゲーション、スライド順、ノート、ソースビュー、フォーカス状態は引き続き正しく動作しますか？

次のコマンドでソースの変更を検証します。

npm run typecheck
npm test
npm run build

ビジュアル関連の作業では、完了を報告する前に npm run dev:workspace も実行し、Workbench で該当する Press を確認します。

コメント

Markdown 対応