Communitygithub.com

LucasLBrito/video-tutorial-terminal

ターミナルコマンドの映像チュートリアル用スクリプト作成とアニメーション。ナレーションのリズムに合わせてコマンドを画面に表示し、垂直9:16形式で再生、一時停止して一緒に打ち込めるようにします。

video-tutorial-terminal とは?

このスキルは、Claude CodeなどのAIエージェントが「Xのチュートリアル動画」「ステップバイステップ動画」「コマンドを教える動画」といったリクエストに応じて、ターミナルコマンドの映像チュートリアルを生成するためのスクリプトとルールを提供します。縦長9:16形式で、ナレーションのリズムに合わせてコマンドがタイプされるアニメーションを生成し、視聴者は一時停止して実際にターミナルにコマンドを打ち込みながら学習できます。Git、GitHub CLI、Docker、npm、pip、Linux、SSH keygenなど、さまざまな開発ツールのチュートリアルに対応しており、動画制作全体を管理する`video-dev`スキルと連携して使用します。スキルは、コマンドのテスト実行、効果的な画面構成(オープニング、ステップ、ヒント、チェックリスト)、発音ガイド、および24文字/秒のタイピング速度などの細かいタイミング制御を重視して設計されています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/LucasLBrito/midia-skills/tree/main/skills/video-tutorial-terminal

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ターミナルビデオチュートリアル

パス: ${CLAUDE_PLUGIN_ROOT} はこのプラグインのルートです。この変数が定義されていない場合、ルートはこのスキルの「ベースディレクトリ」から2つ上のフォルダになります(<root>/skills/<skill>)。スキルが ~/.claude/skills に直接コピーされている場合は、${CLAUDE_PLUGIN_ROOT}/skills の代わりに ~/.claude/skills を使用してください。

モデルは 「GitとGitHubのベストプラクティス」 動画です:14シーン、約3:37。完全なプロジェクトは ${CLAUDE_PLUGIN_ROOT}/skills/video-dev/examples/git/ にあります(roteiro.json、cenas.py、pronuncia.json)。自分のスクリプトを書く前に、サンプルの cenas.py を開いてください。

もし video-dev スキルがまだ実行されていない場合(質問、準備、フォルダ作成)、最初にそれを実行してください。

スクリプトを書く前に:コマンドは動作しなければなりません

視聴者は画面に表示されたコマンドを実際に入力します。チュートリアルのコマンドをリストアップし、可能な限り実際にテスト用フォルダで実行して、構文を確認し、実際の出力(またはその短いバージョン)をコピーしてください。フラグをでっち上げないでください。アカウント、ネットワーク、または破壊的な操作(push、deploy、rm)が必要なコマンドは実行せず、公式ドキュメントで確認してください。

構成

#ブロック内容
1オープニングテーマ + 視聴方法:「1. 動画を一時停止 → 2. ターミナルに入力 → 3. 続ける」
2…n-1ステップpasso(n, タイトル, 色) + 1~4コマンドの Term + ヒントまたはアラートボックス
ステップ間ヒント番号なしのシーン。selo(0.1, "ヒント", PINK) を使用。ベストプラクティス用(例:Conventional Commits)
nチェックリストすべてのステップを番号付きリストで + 「保存して次のプロジェクトで使用」

順序:一度だけ行うこと(設定)→ 常に行うこと(日常のフロー)→ 最後に高度な内容(リベース、タグ)。1シーンに1ステップ。ステップに4つ以上のコマンドがある場合は、2つのシーンに分割します。

スクリプト(ナレーション)

  • 各セリフは「ステップN:」で始め、コマンドの前に何をそしてなぜを述べてください。
  • コマンドは読み上げるように話します:「git push、ハイフンu、origin main」; 「git switch ハイフンc」; 「feat スラッシュ login」; 「ドット gitignore」。画面には実際のコマンドが表示されます。
  • 重要な警告は独立した文にします:「パスワードとAPIキーは決してリポジトリにコミットしないでください。」
  • 英語の用語:発音マップを確認してください(narracao-voz を参照)。テーマに固有の語彙がある場合(docker compose、kubectl...)、プロジェクトに pronuncia.json を作成してください。

ターミナル(Term)

Term(1.0, 700, [                                   # t:開始時間, y:中央Y座標
    (2.4, "$", 'git config --global user.name "あなたの名前"'),   # (時間, タイプ, テキスト)
    (5.4, "$", 'git config --global user.email "[email protected]"'),
    (6.2, "o", "青色で表示されるコマンドの出力"),
    (7.0, "#", "# 灰色のコメント"),
])
  • 各行の時間 = ナレーションがコマンドを言い始める瞬間(--tempos N)。
  • 入力速度は24文字/秒(CPS エンジン設定)。40文字のコマンドは約1.7秒かかります。次の行はその後に開始するようにしてください。
  • 1行あたり最大約44文字(size=32)。それより長い場合は、\ で折り返し、">" 行で続けます。
  • 出力("o")は短く現実的に。短縮例:「Initialized empty Git repository」。
  • サンプルデータは中立的なものを使う:「あなたの名前」、「[email protected]」、「my-project」、「you/my-project.git」。実際のユーザーデータは絶対に使わないでください。

効果的だったサポート要素

アイデア方法
アラート(「絶対にするな」)Box(t, 540, y, "テキスト", RED, filled=True) をターミナルの上または下に配置
リマインダーBox(t, 540, ~1030, "GitHubアカウントと同じメールアドレス", ORANGE)
サイト上のクリック場所Box PURPLE でパスを表示:「github.com: New repository\n(空、READMEなし)」
状態の流れ3つの Box を横に並べる(x 190/540/890, w=290)+ 矢印の Line + 下に Text モノ(git add、git commit)
mainから分岐するブランチLine GREEN 水平(main)+ 3つの Line PURPLE で分岐を形成 + ラベル
良い例と悪い例良い例の緑のボックス + Text RED モノで悪い例(「修正」、「final2」)
セマンティックバージョニング大きな Text 「v1.4.2」+ 3つのボックス major/minor/patch に灰色の説明
最終チェックリストlista_vertical(...) または w=860 で項目ごとに異なる色の Box

リズム

  • シールとタイトルは0.1~0.2秒。ターミナルは最初のコマンドの約1秒前に入ります。
  • ヒントやアラートのボックスは、ナレーションがその箇所に到達したとき、通常はコマンドの後に入ります。
  • シーンは12~18秒。チュートリアルはコンセプト動画よりも少し長いシーンを許容します。なぜなら、視聴者は入力しているからです。

最終レンダリング前のチェックリスト

  • 画面のすべてのコマンドがテスト済み、またはドキュメントで確認済み。
  • ターミナルの行が端からはみ出していない(--preview で確認)。
  • ナレーションのステップ番号が画面の「ステップ N」シールと一致している。
  • 最終チェックリストにすべてのステップが同じ順序で含まれている。
  • コマンドに実際の個人データ(メール、ユーザー名、トークン)が含まれていない。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル