mcpField
E
explain-with-slides

explain-with-slides

github.com/kjetilhartveitドキュメント278 回インストール6 日前に更新
リポジトリ

explain-with-slides について

コード変更を概要スライドにまとめるスキルです。全体像を視覚的に把握したい読者向けに、問題、変更、結果、残る判断事項を各スライドの要点に沿って構成します。

主な機能

  1. 015~8枚の概要スライド作成
  2. 02各スライドに要点と大きなビジュアル
  3. 03問題から結果へ内容を構成
  4. 04独立ページと縦スクロールに対応
  5. 05視差効果の軽減設定を尊重

活用シーン

  1. 01スライドでコード変更を説明
  2. 02詳細より全体像を伝える

インストール

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

$npx skills add https://github.com/kjetilhartveit/kjetils-skills --skill explain-with-slides

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

詳細

スライドで説明する

概要を伝えるための短いスライドデッキです。各スライドでは、1つのアイデアを扱い、要点を示す見出しと大きなビジュアルを1つ配置します。詳細ではなく、全体像を把握するためのものです。

このスキルを使う場面

  • ユーザーが、変更内容をスライドで視覚的に説明するよう求めた場合。
  • オーケストレーターが、変更内容をスライドで視覚的に説明するために使う場合。

内容

  • 5~8枚のスライドを作成します。各スライドには、要点を示す見出し、大きなビジュアルを1つ、補足テキストを最大約20語まで配置します。
  • コード、表、詳細スライド、詳細ドロワーは含めません。読者がさらに詳しい情報を必要とする場合は、最後のスライドから詳細な説明に誘導できます。
  • 順序は、問題 → 変更 → 結果 → 今後決めることです。

ナビゲーション

  • スライドをスクロールするページの一部として表示する場合は、ページのほかの部分とスクロール方向をそろえるため、縦方向に並べます。縦長ページ内で横方向にページを切り替える形式は避けてください。
  • 独立したスライドデッキでは、キーボード、スワイプ、ドット、前へ/次へボタンで横方向に切り替えられるようにし、各スライドにディープリンクを設定できます。
  • 各スライドには、控えめな表示アニメーション(バーが伸びる、項目が浮かび上がるなど)を付けます。テキストはフェード表示にしません。動きを抑える設定を尊重してください。

作成方法

  • explainer-kit スキルを使って作成します。通常は、独立したページとして作成します(assemble.py --standalone)。

コメント