explain-with-slides について
コード変更を概要スライドにまとめるスキルです。全体像を視覚的に把握したい読者向けに、問題、変更、結果、残る判断事項を各スライドの要点に沿って構成します。
主な機能
- 015~8枚の概要スライド作成
- 02各スライドに要点と大きなビジュアル
- 03問題から結果へ内容を構成
- 04独立ページと縦スクロールに対応
- 05視差効果の軽減設定を尊重
活用シーン
- 01スライドでコード変更を説明
- 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)。
コメント
Markdown 対応