html-slide-plan について
html-slide-planは、実装前にHTMLスライドデッキのストーリー、順序、内容対応を計画するスキルです。デザイン制約と資料を基に構造化された計画を作り、HTMLは記述しません。
主な機能
- 01デッキのメタデータと内容一覧の定義
- 02ストーリー展開とスライド順の決定
- 03各スライドの役割と要点の対応付け
- 04HTMLレイアウトとページ領域の提案
活用シーン
- 01実装前のスライド順の計画
- 02資料内容のウェブスライドへの割り当て
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ humantonylee/ future-slide --skill html-slide-planインストール後、Claude Code で/html-slide-planを入力して読み込まれたか確認します。
詳細
HTMLスライド計画
次のようなコマンドでこのスキルを使用します。
$html-slide-plan- 「HTMLスライドデッキを計画する」
- 「ウェブスライド用のslide_plan.jsonを作成する」
- 「実装前にスライドの順序を決める」
目標
slide_plan.jsonを作成します。各ページのデッキのストーリー、スライドの順序、コンテンツの割り当て、HTMLに適したレイアウトの方針をまとめます。
入力
DESIGN.md- ユーザーのファイルまたはソース資料
- ユーザーが指定するデッキの目標、対象者、言語、制約
必須の出力
有効なJSONのみを返します。次の内容を含めます。
- デッキのメタデータ
- デザインの依存関係
- コンテンツの一覧
- ストーリーの流れ
- 順序付けされたスライド
- 各スライドの役割、ページの種類、中心的なメッセージ、根拠、推奨するHTMLレイアウト、ヘッダー・本文・フッターの構成
厳守事項
- まだHTMLは作成しないでください。
- 画像生成用のプロンプトは作成しないでください。
- 視覚的な制約として
DESIGN.mdを使用してください。 - セマンティックHTMLとCSSで無理なく構築できるレイアウトを優先してください。
- ユーザーが明示的に続行を依頼しない限り、
slide_plan.jsonの作成後に終了してください。
コメント
Markdown 対応