mcpField
H
html-slide-plan

html-slide-plan

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

html-slide-plan について

html-slide-planは、実装前にHTMLスライドデッキのストーリー、順序、内容対応を計画するスキルです。デザイン制約と資料を基に構造化された計画を作り、HTMLは記述しません。

主な機能

  1. 01デッキのメタデータと内容一覧の定義
  2. 02ストーリー展開とスライド順の決定
  3. 03各スライドの役割と要点の対応付け
  4. 04HTMLレイアウトとページ領域の提案

活用シーン

  1. 01実装前のスライド順の計画
  2. 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の作成後に終了してください。

コメント