mcpField
H
html-slide

html-slide

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

html-slide について

html-slideは、編集可能なブラウザー表示のHTMLスライドデッキを作成するオーケストレーションスキルです。デザイン抽出、スライド計画、各スライドのプロンプト作成、実装、ブラウザーでの確認を順に進めます。

主な機能

  1. 01参考ビジュアルからのデザイン抽出
  2. 02スライド計画の作成
  3. 03スライドごとのプロンプト作成
  4. 04HTMLデッキの実装
  5. 05ブラウザーでの確認

活用シーン

  1. 01ビジュアル資料からHTMLデッキを作成
  2. 02編集可能なスライド発表の計画
  3. 03ブラウザー表示スライドの作成と確認

インストール

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

$npx skills add https://github.com/humantonylee/future-slide --skill html-slide

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

詳細

HTML スライドのワークフロー

ユーザーが HTML スライドのワークフロー全体を求めた場合に、このスキルを使用します。たとえば、次のような場合です。

  • $html-slide
  • 「HTML スライドデッキを作成して」
  • 「この参考資料から、ブラウザーで表示するスライドを作成して」
  • 「編集可能なウェブスライドを作成して」

これは HTML のオーケストレータースキルです。ユーザーが 1 つの手順だけを求めている場合は、該当する手順のスキルを使用してください。

  • DESIGN.md には $slide-design
  • slide_plan.json には $html-slide-plan
  • html_slide_prompts.json には $html-slide-prompt
  • 最終的な HTML/CSS/JS のスライドファイルには $html-slide-render

必須の順序

次のステージを順に実行します。

  1. 参考ビジュアルから DESIGN.md を抽出します。
  2. DESIGN.md、ユーザーのファイル、デッキの依頼内容を基に slide_plan.json を作成します。
  3. スライドごとの実装手順を記載した html_slide_prompts.json を作成します。
  4. HTML デッキを実装し、可能であればブラウザーで検証します。

出力の要件

ワークフロー全体の完了後、作業スペースに次のファイルが揃っている必要があります。

  • DESIGN.md
  • slide_plan.json
  • html_slide_prompts.json
  • HTML スライドデッキ（通常は slides-html/ 以下）

ルーティングルール

ユーザーが GPT によるネイティブ画像生成、PNG ページ、または imagegen の出力を求めている場合は、代わりに gpt-image-slide スキルファミリーを使用してください。

コメント

Markdown 対応