mcpField
C
cli-demo-gif

cli-demo-gif

github.com/b-open-ioクリエイティブ・メディア1662 回インストール4 週間前に更新
リポジトリ

cli-demo-gif について

CLI プロジェクト向けにターミナルのデモ GIF を作成するスキルです。VHS の tape ファイル作成からレンダリングまでを案内します。

主な機能

  1. 01VHS tape ファイルの作成
  2. 02ターミナルの外観と入力速度の設定
  3. 03録画前のセットアップコマンドの非表示
  4. 04GIF、MP4、WebM へのレンダリング

活用シーン

  1. 01CLI のターミナルデモをドキュメント化
  2. 02準備コマンドを隠して CLI の使い方を表示

インストール

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

$npx skills add https://github.com/b-open-io/prompts --skill cli-demo-gif

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

同梱ファイル.clawnet/unsigned-skill.jsonREADME.md

詳細

CLI デモ GIF ジェネレーター

vhs を使用してターミナルのデモ GIF を生成します。CLI デモ GIF の作成を依頼された場合は、.tape ファイルを作成してレンダリングします。

手順

1. テープファイルを作成する

プロジェクトのルートをすっきり保つため、テープファイルは docs/demo/ に配置します。

mkdir -p docs/demo

プロジェクトの CLI に適した設定でテープファイルを作成します。

Output docs/demo/demo.gif

Set Shell "bash"
Set FontSize 16
Set Width 900
Set Height 500
Set Padding 20
Set Theme "Catppuccin Mocha"
Set TypingSpeed 50ms

Type "command --help"
Enter
Sleep 2s
2. 未公開の CLI パッケージの場合

表示するデモを開始する前に、Hide／Show を使用してエイリアスを設定します。

Hide
Type "alias mycli='bun run src/cli/index.ts'"
Enter
Sleep 500ms
Show

Type "mycli --help"
Enter
Sleep 2s
3. GIF をレンダリングする
vhs docs/demo/cli.tape

テープコマンドのリファレンス

コマンド説明
Output <path>出力ファイルのパス（.gif、.mp4、.webm）
Set Shell "bash"使用するシェル
Set FontSize <n>フォントサイズ
Set Width <n>ターミナルの幅（ピクセル）
Set Height <n>ターミナルの高さ（ピクセル）
Set Padding <n>ターミナル周囲の余白
Set Theme "<name>"カラーテーマ
Set TypingSpeed <duration>キー入力間の遅延
Type "<text>"テキストを入力
EnterEnter キーを押す
Sleep <duration>待機（例：2s、500ms）
Hide録画を停止
Show録画を再開
Ctrl+C割り込みを送信

デフォルト設定

ユーザーから別の指定がない限り、以下のデフォルト設定を使用します。

  • テーマ：Catppuccin Mocha
  • TypingSpeed：50ms
  • Width：900、Height：500
  • FontSize：16
  • 出力ディレクトリ：docs/demo/

コメント

Markdown 対応