Communitygithub.com

スクリーンチュートリアル動画

実際のアプリやサイト(Search Console、Cloudflare、Google Tag Manager、WordPress、GitHub、各種ダッシュボード)での操作手順を、ブランド化されたチュートリアル動画(30秒~10分、1080p横向き)で作成します。ユーザー自身の画面収録がある場合はそれを使用し、ない場合はHTMLで正確な疑似画面を再構築します。

スクリーンチュートリアル動画 とは?

このスキルは、How-to形式のチュートリアル動画を制作するためのものです。ユーザーが実際に画面収録を行っている場合はその映像を使用し、ない場合は手順をHTMLで再現した疑似画面を生成します。再現画面にはカーソルの動き、クリック、タイピング、フォーカスが含まれ、操作対象のコントロールが強調されます。動画はユーザーの声または指定された声でナレーションされ、ブランドに合わせてスタンプやステップマーカーが表示されます。製品に関する主張には必ず公式ドキュメントからのスクリーンショット(レシート)が添付され、信頼性が担保されます。動画制作の流れは、`fetch-video.sh` → `enhance-audio.sh` → `rough-cut.mjs`(映像と音声を同期)→ `voice.mjs` で構成され、各ステップは `screen` ビートとして定義され、カメラワーク(ワイド→ズームイン→ホールド→ズームアウト)が適用されます。コストは文字起こしのみでレンダリング時間は動画1分あたり約1〜1.5分と効率的です。このスキルはClaude Code上で動作し、指示は `video-director` セクション3に従って実行されます。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/NicheEgg/video-studio/tree/HEAD/skills/video-screen-tutorial

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

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

ドキュメント

スクリーンチュートリアル

最初に references/house-rules.md を読んでください。これが優先されます。 実行順序: video-director セクション 3。このファイルは固有の内容のみをカバーします。

ステータス: 再構築された疑似画面は実証済み(Search Console + Cloudflareの動画)。screen ビート内のスクリーンショットは実証済み。ズームウィンドウ内で実際の画面収録を再生することはまだ実装されていません。最初の実際の収録で構築してテストし(screen ビートを video 入力に対応させる、clip ビートと同様に)、その後この行を更新してください。

固有の内容

  • 画面の出典(ハードルール2): ユーザー自身の画面収録がある場合はそれを使用する。ない場合は、現在の日付入りリファレンス(references/screens.md)から手順をHTML疑似画面として再構築し、カーソル、クリック、タイピング、フォーカスを含める。これはデモンストレーションであるため、再構築が正しい。再利用可能な既存モジュール: gsc-add-property、cloudflare-dns-add、gsc-verify。
  • 必ず本物でなければならないもの: 製品に関するあらゆる主張(「Googleは…と言っている」)は、その公式ドキュメントから取得したレシートであり、静的ページ(ホームページ、価格ページなど)をそれ自体として表示する場合は、そのページのキャプチャを使用する。
  • 使用するすべてのフレームで個人データ(メール、アカウントID、キー、収益)をチェックする。 ぼかすかトリミングし、その旨をユーザーに伝える。
  • ソース: fetch-video.sh → enhance-audio.sh → rough-cut.mjs(映像と音声を同期させるため、無駄な時間や取り直しを削除)→ voice.mjs --provider file。
  • 各ステップは screen ビート であり、ブランドウィンドウ内に収録(またはスクリーンショット)を表示し、カメラの ムーブ を行う: ワイドで開始、コントロールが呼ばれたらズームイン(1.3~1.6倍)、ホールド、ズームアウト。ラップトップやデバイスのフレームは一切使用しない。
  • ステップマーカー 右上に script.json → steps から配置。クリックすべきものを示すスタンプまたはハイライト。各ビートに1つの指示、画面のラベル通りの名前で。
  • 構成: フック(問題提起、5~10秒。自身を撮影した場合はカメラ出演)→ 全体の作業を一文で → ステップ → 結果 → 追加のヒント1つ。
  • キットの使用は控えめに: 製品に関する主張のレシート(公式ドキュメントから)、「うまくいった」「失敗した」瞬間へのリアクションやミーム音。ステップ途中の挿入カットはなし。
  • 再構築画面ではプレースホルダーデータ(example.com)を使用し、実際のアカウントの詳細は決して使用しない。
  • ペース: 落ち着いて。視聴者は一緒に進めている。

コストと時間

文字起こしのみ(セント単位)。レンダリング時間は動画1分あたり約1~1.5分。

参考文献

own-footage.md · engine-api.md(screen ビート、カメラムーブ) · screens.md(デモ用アプリ画面の再構築) · voice-music.md · troubleshooting.md

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル