Communityコーディング&開発github.com

arifszn/slide-wright

トピックやラフなメモから美しいWebプレゼンテーションを作成し、後からスライドの追加、削除、修正ができます。カスタムテーマと2枚のプレビュースライドを生成し、ユーザーが方向性を確認してから本番のデッキを構築します。既存のデッキの編集はそのフローをスキップして直接適用します。ユーザーがスライド、プレゼンテーション、トーク用デッキ、ピッチデッキの作成、または既存のスライドの追加・削除・変更を希望する場合に使用します。

slide-wright とは?

slide-wrightは、トピックやラフなメモから、戦略・プロダクトチームが作成したような高品質なプレゼンテーションを生成するAIエージェントスキルです。単一の自己完結型HTMLファイルとして出力され、どんなブラウザでも動作します。主要な特徴は「ルック&フィールの承認プロセス」です。最初のパスでは本番デッキを作成せず、まずテーマを生成して2枚のプレビュースライドを構築し、ユーザーが方向性を承認した場合にのみ残りのスライドをビルドします。ユーザーが「ノー」と言った場合、全く異なる方向性を試みます。既存のreveal.jsベースのHTMLデッキを編集する場合もサポートしており、その場合は承認プロセスをスキップして直接変更を適用します。編集後は`node <skill-dir>/scripts/check-deck.mjs <deck.html>`を実行して整合性を確認します。このスキルはClaude CodeなどのAIエージェントで使用することを想定しており、ステップバイステップの指示と参照ファイルで構成されています。完成後は、ユーザーに操作方法(矢印キー、フルスクリーン、スピーカービューなど)を説明し、PDFやPowerPointへのエクスポート、Surge・Vercel・Netlifyへのデプロイを提案します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/arifszn/slide-wright/tree/HEAD/slide-wright

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

slide-wright は何をしますか?

トピックやラフなメモを、取締役会レベルのプレゼンテーションに変換します。スライドは、優れた戦略チームやプロダクトチームが作成したようなデッキとして読め、単一の自己完結型HTMLファイルとして配信され、どのブラウザでも動作します。

このスキルを定義するルール

デッキを構築する前に、ルックを提案します。最初のパスでは、完成したプレゼンテーションは絶対に作成しません。テーマを生成し、そのテーマで2枚のプレビュースライドを構築し、ユーザーが方向性を承認するまで停止します。承認された場合のみ、残りを構築します。

一度に一つの提案を。メニューは表示しません。ユーザーが「ノー」と言った場合は、その方向性を破棄し、明らかに異なる方向性を試みます。すべてのテーマは、目の前のデッキのために新たに発明されます。プリセットのライブラリはありません。

新しいデッキ:最初に references/new-deck.md を読んでください。 そこにはステップ1〜4(デッキの作成、ルックの提案、承認取得、構築)と正確な承認ゲートが記載されています。

エンジン(内部で保持)

デッキは、CDNから読み込まれたreveal.jsでレンダリングされますが、これはユーザーが見ることのない実装の詳細です。スライド、テーマ、デザインについて話します。ライブラリ名は、生成された <link> および <script> タグ内にのみ表示されます。references/deck-template.md に正確なセットアップがあります。

既存のデッキの編集

ユーザーが既存のHTMLデッキを指定した場合、それがreveal.jsベースかどうかを確認します(CDNからのreveal.jsの <link>/<script> タグを探します)。もしそうであれば(このスキルで作成したかどうかにかかわらず)、最初からやり直さずに、それを読み込み、テーマを維持し、その場で変更を加えます。ルックはすでに承認されているため、提案とゲートをスキップします。編集後は、node <skill-dir>/scripts/check-deck.mjs <deck.html> を実行し、出力されたすべての行を修正します(詳細は references/new-deck.md にあります)。

編集には参照ファイルは必要ありません。ただし、新しい展示タイプを追加する場合(references/exhibits.md を読む)、コードまたはアニメーションを追加する場合(それぞれ references/code-slides.md または references/motion-recipes.md を読む)は例外です。

デッキがHTML形式だがreveal.jsベースでない場合(別のエンジン、単なるスライドなど)、このスキルの編集パスの範囲外です。別のエンジンに強制的に書き換えるのではなく、その旨を伝えてください。ここにある他のすべては、新しいデッキを構築するためのものです。

ステップ5 — 引き渡し

  1. 完成したデッキを開きます。
  2. 保存場所、テーマ名、スライド数を伝えます。
  3. 操作方法をユーザーに伝えます:移動は矢印キー、スペース、またはスワイプ;Fでフルスクリーン、EscまたはOでスライド概要、Sでノート付きスピーカービュー;URLに ?print-pdf を追加して印刷するとPDFとして保存できます(手順は references/export-pdf.md);テーマの色は :root 変数に、フォントは <link> にあります。
  4. 明らかな次のアクションを提案します:コンテンツの修正、テーマの変更、PDFのエクスポート、PowerPointファイルのエクスポート(references/export-pptx.md)、または共有用のライブURLへのデプロイ。デプロイを希望する場合は、references/deploy.md を読み、ホスト(Surge、Vercel、Netlify)を選択させます。一つに決め打ちしないでください。

参照ファイル

これらは一度にすべて読むのではなく、到達した時に読んでください:

  • references/new-deck.md — 新しいデッキのためのステップ1〜4:デッキの作成、ルックの提案、承認取得、構築
  • references/design-aesthetics.md — デッキをデザインされたように見せる要素(ステップ2)
  • references/theme-generation.md — テーマを発明する手順(ステップ2)
  • references/deck-template.md — HTMLの骨格、レイアウト、エンジンセットアップ(ステップ2および4)
  • references/exhibits.md — 各コンテンツスライドのビジュアルの選択と構築(ステップ2および4)
  • references/code-slides.md — コードスライドとそのマークアップ契約(ステップ4)
  • references/motion-recipes.md — アニメーション(ユーザーが要求した場合)(ステップ4)
  • references/media.md — スライド内の画像と動画(ステップ4)
  • references/export-pdf.md — デッキのPDF保存(ステップ5)
  • references/export-pptx.md — 編集可能なテキストでデッキをPowerPointにエクスポート(ステップ5)
  • references/deploy.md — デッキのライブURLへの公開(ステップ5)

関連スキル