Communitygithub.com

Leihyn/claude-demo-video-skill

Remotionを使ってハッカソンや製品のデモ動画を作成します。動画構成、シーン作成、スクリーンレコーディング、ナレーション生成、最終レンダリングを処理します。デモ動画、説明動画、プロジェクトのピッチ動画を作成する際に使用します。

claude-demo-video-skill とは?

このスキルは、Remotionを活用してハッカソンや製品のデモ動画を効率的に作成するためのものです。動画の構造設計、個々のシーンの作成、スクリーンレコーディングの統合、AIによるナレーション生成、そして最終的なレンダリングまでを自動化します。主にClaude Code上で動作し、開発者がプロジェクトのデモ動画、説明動画、ピッチ動画を迅速に制作するのに役立ちます。ユーザーは動画の内容や構成を自然言語で指示するだけで、スキルがRemotionプロジェクトを生成し、必要なアセット(スクリーンショット、音声など)を組み込んで完全な動画を出力します。これにより、手動での動画編集の手間を省き、プロトタイピングやプレゼンテーションのスピードを大幅に向上させます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Leihyn/claude-demo-video-skill/tree/main/skills/demo-video

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

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

ドキュメント

claude-demo-video-skill は何をしますか?

Remotionを使ってハッカソンや製品のデモ動画を作成します。動画構成、シーン作成、スクリーンレコーディング、ナレーション生成、最終レンダリングを処理します。デモ動画、説明動画、プロジェクトのピッチ動画を作成する際に使用します。

機能

  • 動画構成の定義: 動画の全体的な流れ(導入、デモ、まとめなど)を設計します。
  • シーン作成: 各シーンをRemotionのコンポーネントとして生成します。
  • スクリーンレコーディングの統合: 製品の操作画面を記録し、動画に組み込みます。
  • 音声ナレーション生成: AIテキスト読み上げを利用してナレーションを自動生成します。
  • 最終レンダリング: すべての要素を組み合わせ、最終的な動画ファイルを出力します。

使い方

  1. スキルの呼び出し: Claude Codeでこのスキルをアクティブにします。
  2. 動画の概要を提供: 作りたい動画の内容(製品名、デモの流れ、強調ポイントなど)を自然言語で説明します。
  3. アセットの準備: 必要に応じて、スクリーンショットや録画ファイルを指定します。
  4. 生成とレンダリング: スキルがRemotionプロジェクトを作成し、動画をレンダリングします。

例

ユーザー: 「Todoリストアプリのデモ動画を作って。導入、機能紹介、使い方の3部構成で。」
スキル: 動画構成を生成し、各シーンを作成、スクリーンショットを統合、ナレーション付きでレンダリングします。

対応プラットフォーム

  • Claude Code: 主な動作環境。
  • Remotion: 動画生成の基盤技術。

注意事項

  • スクリーンレコーディングは別途取得する必要があります(このスキルは録画機能を提供しません)。
  • 生成された動画はプロジェクトのルートディレクトリに output.mp4 として保存されます。
  • Remotionの依存関係(Node.js、FFmpegなど)が事前にインストールされていることを確認してください。

関連スキル