ドキュメント&知識ベース · daymade/claude-code-skills

cli-demo-generator

VHSターミナル録画を使用して、プロフェッショナルなアニメーションCLIデモGIFを生成します。tapeファイルの作成、非表示セットアップを伴うセルフブートストラップ型デモ、出力ノイズのフィルタリング、後処理での倍速化、フレーム単位の検証に対応します。ターミナルデモの作成、CLIワークフローのGIF録画、アニメーション化されたドキュメントの生成、README用のデモテープ作成、各種コマンドラインツールの視覚的な紹介を行いたい場合に使用します。「ターミナル録画」「VHS tape」「demo GIF」「CLIのアニメーション化」、またはシェルコマンドの視覚的な実演を求めるリクエストでもトリガーされます。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ファイル書き込みDual-pass Audit
Author daymadeGitHub daymade/claude-code-skills ↗Stars 1385License MIT(仓库根 LICENSE 文件;GitHub API spdx MIT;Copyright (c) 2025 daymade)Commit d5c4678cb5
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

自動生成の核心は、コマンドリストをVHSのtapeファイル(Output/Set Theme/Set FontSize/Type/Enter/Sleep…)へと変換し、vhsに渡してGIFとしてレンダリングさせることです。

cli-demo-generator/scripts/auto_generate_demo.py
tape_lines = [ f'Output {output_gif}', f'Set Theme "{theme}"', f'Set FontSize {font_size}', f'Set Width {width}', f'Set Height {height}', f'Set Padding {padding}', 'Set TypingSpeed 10ms', 'Set Shell zsh', '', ]
処理内容:VHSのtapeはキーストローク単位のスクリプトです。各ステップでTypeによってコマンドを入力してEnterを押し、Sleepでテンポを制御します。Set Shell zshは録画用ターミナル内で実行するシェルを決定します。ジェネレーターは「どのコマンドを実演したいか」を録画スクリプトとして構造化し、tapeファイルの手書きを不要にします。

録画は実実行:main()は--no-executeが指定されていない場合、subprocess経由でvhsを直接呼び出し、tape内のコマンドはvhsの疑似ターミナル内で実際にタイプされて実行されます。

cli-demo-generator/scripts/auto_generate_demo.py
subprocess.run(['vhs', str(tape_file)], check=True)
これにより、録画されるのは「描画された疑似ターミナル」ではなくコマンドの実際の実行プロセス(実際の出力/実際の終了コード)となります。セルフブートストラップ型デモ内のcleanupやinstallなどの非表示コマンドも実際に実行されるため、自律的に状態をクリーンアップできます。

VHSパーサーの制約回避:Typeの文字列には$、二重引用符、バッククォートを含めることができないため、複雑なコマンドは事前にbase64エンコードし、実行時にデコードして実行します。

cli-demo-generator/SKILL.md
VHS `Type` strings cannot contain `$`, `"`, or backticks. These cause parse errors
SKILL.mdには、シェルスクリプト全体(2>&1 | grep -vを含む出力フィルターラッパー関数など)をbase64エンコードし、'echo <b64> | base64 -d > /tmp/wrapper.sh && source /tmp/wrapper.sh'としてTypeに渡す標準パターンが記載されています。auto_generate_demo.pyの--filterブランチでは、この処理が内部で自動実行されます(wrapper = _wrap() {...grep -v -E "filter"...} → base64 → /tmp/cw.shに書き込んでsource)。

セルフブートストラップ/ノイズフィルタリングにおける「視聴者視点」の構成:Hideブロックでsetup/cleanupを実行 → clearで画面消去 → Showを実行した後に視聴者に見せたいコマンドの録画を開始します。

cli-demo-generator/scripts/auto_generate_demo.py
tape_lines.append('Hide') … tape_lines.append('Show')
SKILL.mdでは「The `Hide` → commands → `clear` → `Show` sequence is critical. `clear` wipes the terminal buffer so hidden commands don't leak into the GIF.」と強調されています。非表示ブロックと表示ブロックは同じ実際のシェルを共有するため、画面消去によって意図した表示内容のみが成果物に含まれるようにします。

スマートなテンポ調整:コマンドの意味論に応じてSleep時間を調整し(install/build/test/deployは3秒、ls/pwd/echoなどは1秒、その他は2秒)、録画後にgifsicleを用いた倍速後処理が可能です。

cli-demo-generator/scripts/auto_generate_demo.py
if any(kw in cmd.lower() for kw in ['install', 'build', 'test', 'deploy', 'marketplace']): sleep_time = '3s' elif any(kw in cmd.lower() for kw in ['ls', 'pwd', 'echo', 'cat', 'grep']): sleep_time = '1s' else: sleep_time = '2s'
speed_up_gifはgifsicleを用いてフレーム遅延を変更します:'subprocess.run(['gifsicle', f'-d{delay}', tmp, '#0-'], stdout=out, check=True)'、delay = 10 // speed。元の録画ファイルを破壊しないよう、一度/tmpにコピーしてから書き戻します。

3つの追加モード:一括設定(batch_generate.pyがYAML/JSONを読み込みautoスクリプトを順次呼び出し)、対話的録画(asciinemaで実際のセッションを録画 → tapeに変換 → vhs)、手動/テンプレートtape(assets/templates + プレースホルダー置換)。

cli-demo-generator/scripts/batch_generate.py
cmd = [sys.executable, str(script_path)] for command in commands: cmd.extend(['-c', command])
batch_generateは各デモ項目に対してauto_generate_demoのargvを再構築します(-cコマンドは反復可能)。YAMLの解析は任意のPyYAMLに依存します(未検出時は案内を表示して終了)。record_interactive.shは'asciinema rec "$CAST_FILE"'を実行後、castファイルをtapeに変換して'vhs < "$TAPE_FILE"'を実行します。

2コア機能

01コマンドリストから完成版GIFへの全自動生成(auto_generate_demo.py -c/-o、タイトル/テーマ/サイズパラメータに対応)
02セルフブートストラップ型デモ:--bootstrapによりセットアップ/クリーンアップコマンドを非表示で実行し、デモ自身で初期状態へ復元
03出力ノイズのフィルタリング(--filter正規表現、実行時にbase64ラッパー関数_wrapでフィルタリング)
04gifsicleによる倍速後処理(--speed N、再録画なしでフレーム遅延を変更)
05一括生成(demos.yaml/json → デモごとのGIF出力、並列実行・任意引数に対応)
06人間による対話的録画(asciinema rec → castからtapeへの変換 → vhs、Ctrl+Dで終了)
07フレーム単位の検証:ffmpegでキーフレームをPNGとして抽出し、ClaudeやユーザーがGIF内容を目視確認可能
08手動tape作成およびテンプレート(basic/interactive/self-bootstrap.tape)とプレースホルダー置換(sedによる検出リポジトリ名の注入)

3外部依存関係

KindDependency / Endpoint
clivhs(charmbracelet,必需)
cligifsicle(可选,变速)
cliasciinema(可选,交互录制)
cliffmpeg/ffprobe(可选,抽帧验证)
packagePyYAML(可选,batch YAML 配置)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: cli-demo-generator/scripts/auto_generate_demo.py(内部でvhs/gifsicle/cpを実行)
  • 本地工作目录: ファイルの読み書きと成果物の出力: ユーザーが指定した-oパスへのGIF/tape出力
監査ノート: 標準ライブラリのローカルスクリプトとローカルCLI(vhs/gifsicle/asciinema/ffmpeg)で完結しており、外部ネットワーク通信や認証情報の読み取りは行いません。ローカルのGIF/tape/一時ファイルへの書き込みのみを行い、破壊的な組み込み操作は含みません。留意点:録画はユーザーが指定したコマンドを実際に実行します。これは本スキルの本質的な機能(リアルなターミナルで実行して初めて本物の出力が得られるため)であり、実行権限の範囲はホスト自身のbash環境と同等であるため隠れたリスクではありません。ただし、filterの正規表現やコマンド文字列の引用符の扱いはユーザー自身の管理が必要であり、VHSパーサーの制約はbase64によって回避されます。

5二重目の独立検証

  • [ok] 自带脚本零网络外发 — scripts/ 三文件 token 扫描(URL/curl/wget/requests/urllib/socket/API_KEY/token/secret/os.system)零命中;子进程仅 vhs/gifsicle/cp/asciinema/sed。
  • [ok] 执行面:tape 命令真实执行 — auto_generate_demo.py 主流程 subprocess.run(['vhs', str(tape_file)]);tape 中 Type+Enter 在 vhs 终端内被 shell 执行(VHS 工具行为)。
  • [ok] --filter 的 base64 包装实现 — wrapper f-string + base64.b64encode + 'echo <b64> | base64 -d > /tmp/cw.sh && source /tmp/cw.sh' 在 create_tape_file 中逐字存在。
  • [ok] 变速后处理(gifsicle delay = 10//speed) — speed_up_gif 内 gifsicle -d{delay} tmp '#0-' 且先 cp 到 /tmp 再写回,与 SKILL.md 手写 gifsicle 命令一致。
  • [ok] 自举/隐藏命令防泄漏(Hide→clear→Show) — create_tape_file 在有 bootstrap/filter 时依次 append Hide/Type/Enter/Sleep/Type "clear"/Show;SKILL.md 有同序说明。
  • [ok] 批处理与交互模式调用链成立 — batch_generate 重建 auto_generate_demo argv(-c 循环);record_interactive.sh 走 asciinema rec → 写 tape → vhs < tape。
  • [ok] 功能声明 vs 夸大检查 — description 八项能力全部有代码/SKILL.md 支撑;无越界承诺。依赖标注(VHS 必需、gifsicle/asciinema/ffmpeg/PyYAML 可选)与脚本内降级提示一致。
  • [ok] 元数据(license/stars/commit) — 仓库级 MIT、stars=1385、pushed_at=2026-09-09T12:33:29Z;本地 HEAD==pin d5c4678cb5d4fd6acc9c922690df035dbd33d247。

6結論

  • コマンド1回で「実演したいコマンドリスト」から完成GIFまで生成でき、録画は実実行されるため、READMEに適した信頼性の高い出力が得られます。
  • VHSエコシステムの落とし穴(パーサーの特殊文字、タイミング、非表示コマンドの漏洩)を体系的にドキュメント化し、自動的に回避します(base64、意味論的タイミング、clear)。
  • セルフブートストラップ型デモとノイズフィルタリングは実務ニーズに即しており、再録画時の再現性確保や長い出力コマンドのクリーンな仕上がりを実現し、プラグインやCLIのプロモーション素材に最適です。
  • オプショナルな依存関係に対するグレースフルデグラデーション設計:gifsicle/asciinema/PyYAMLが見つからない場合、エラーを隠蔽せず案内を表示して継続または明示的に失敗します。
  • 多彩な柔軟性とフレーム単位の品質検査を兼ね備え、自動化の効率とピクセル単位のこだわりの両方を満たします。
  • 最適な用途: 適した用途:CLIツール、プラグイン、スクリプトのREADME用アニメーションや実演素材を作成したい開発者。「再現可能で自動クリーンアップされる」インストール/利用手順デモ(self-bootstrap)の録画。コマンドリストから一括で画像を生成するドキュメント自動化。フレーム単位の厳密な品質管理(フレーム抽出確認、再録画なしの倍速化)が求められる制作シーン。
    不向きな用途: 適さない用途:実演コマンドに機密出力や信頼できないサードパーティ製コマンド文字列が含まれる場合(録画=実実行となるため)。実際の実行結果よりもタイピング風の演出見た目を重視する疑似録画ニーズ(タイピングシミュレーター系ツールの使用を推奨)。vhs環境が存在しない(Linuxではcharmbraceletのtap導入が必要)、またはサードパーティ製録画CLIの導入を避けたいユーザー。実際の副作用(実際のnpm installなど)を一切発生させたくないシーン。
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload cli-demo-generator.tar.gz
    sha256: 9991cfcecc32bad8…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d5c4678cb5.