mcpField
H
html-slide-prompt

html-slide-prompt

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

html-slide-prompt について

html-slide-promptは、スライド計画とデザイン資料を各HTMLスライドの実装指示に変換するスキルです。HTML自体は生成せず、構造化された構築指針が必要なワークフロー向けです。

主な機能

  1. 01スライドごとの指示オブジェクト生成
  2. 02セマンティック構造とCSSレイアウトの指定
  3. 03レスポンシブ動作とアクセシビリティの説明
  4. 04必要なアセットと避けるべき事項の記載

活用シーン

  1. 01スライドごとの実装指示の準備
  2. 02スライド計画のHTML構築ガイドへの変換

インストール

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

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

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

詳細

HTML スライドプロンプト

次のようなコマンドでは、このスキルを使用します。

  • $html-slide-prompt
  • 「create html_slide_prompts.json」
  • 「各 HTML スライドの実装プロンプトを作成する」
  • 「スライド計画をビルド手順に変換する」

目標

スライドごとに、実装にすぐ使える指示オブジェクトを 1 つずつ含む html_slide_prompts.json を作成します。

入力

  • DESIGN.md
  • slide_plan.json
  • 事実確認が必要な場合はソースファイル

必須の出力

有効な JSON のみを返します。各スライドには、次の項目を含めます。

  • スライド番号
  • ページファミリー
  • スライドタイトル
  • HTML レイアウトファミリー
  • コンテンツブロック
  • セマンティック構造
  • CSS レイアウトの指示
  • レスポンシブ動作
  • グラフ／表／アイコンの指示
  • 必要なアセット
  • アクセシビリティに関する注意事項
  • 避けるべきアンチパターン

厳守事項

  • このステップでは、最終的な HTML をレンダリングしないでください。
  • 画像アセットが明示的に必要な場合を除き、GPT の画像生成を促す表現は使用しないでください。
  • 通常の HTML／CSS／JS で実装できる指示にしてください。
  • ユーザーから続行の明示的な依頼がない限り、html_slide_prompts.json の作成後に停止してください。

コメント

Markdown 対応