Communitygithub.com

SkillMedev/tutorial-video-studio

製品デモ、機能発表、ローンチ動画のビートシートとショットリストをアニメーション前に計画 - 最初の3秒でフック、問題、リビール、証明、CTA - シーンタイプごとにターゲット時間とペースを設定し、remotion-composeが直接消費するJSONシーン計画として出力します。「使って」と言われたときに使用します。

tutorial-video-studio とは?

このスキルは、製品デモ、機能アナウンス、ローンチ動画などのビデオコンテンツを、アニメーション制作の前に構造化されたビートシートとショットリストとして計画するためのツールです。ユーザーの入力に基づいて、最初の3秒でのフック、問題提起、解決策のリビール、証拠の提示、CTA(行動喚起)といった定型的なストーリーテリングフレームワークに沿ったシーン構成を自動生成します。各シーンには対象時間とペースが割り当てられ、最終的にはRemotionベースの動画生成ツール「remotion-compose」が直接読み込めるJSON形式のシーン計画が出力されます。開発者やプロダクトマネージャーが、動画制作の手戻りを減らし、一貫性のある魅力的な動画を効率的に作成するのに役立ちます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/video-storyboard

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

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

ドキュメント

tutorial-video-studio は何をしますか?

製品デモ、機能発表、ローンチ動画のビートシートとショットリストをアニメーション前に計画 - 最初の3秒でフック、問題、リビール、証明、CTA - シーンタイプごとにターゲット時間とペースを設定し、remotion-composeが直接消費するJSONシーン計画として出力します。「使って」と言われたときに使用します。

概要

このスキルは、プロダクトデモやチュートリアルビデオの計画プロセスを自動化します。ユーザーの簡潔な説明から、動画制作のベストプラクティスに沿った詳細なシーンリスト(ビートシート)を生成します。

使用方法

  1. make:video コマンドで開始します。
  2. 動画の種類(デモ、アナウンス、ローンチ)を選択します。
  3. プロダクトや機能の簡単な説明を提供します。
  4. スキルが自動的にビートシートとショットリストを生成します。
  5. 出力はJSON形式で、remotion-compose で直接使用できます。

出力形式

{
  "scenes": [
    {
      "type": "hook",
      "duration": 3.0,
      "pacing": "fast",
      "script": "この製品があなたの問題を解決します...",
      "visuals": "製品のクローズアップショット"
    },
    {
      "type": "problem",
      "duration": 5.0,
      "pacing": "medium",
      "script": "多くのユーザーが直面する課題...",
      "visuals": "問題を表す図解"
    },
    {
      "type": "reveal",
      "duration": 4.0,
      "pacing": "slow",
      "script": "当社のソリューションが登場...",
      "visuals": "製品UIのデモ"
    },
    {
      "type": "proof",
      "duration": 6.0,
      "pacing": "medium",
      "script": "実際の導入事例...",
      "visuals": "グラフや統計データ"
    },
    {
      "type": "cta",
      "duration": 3.0,
      "pacing": "fast",
      "script": "今すぐ無料トライアルを開始...",
      "visuals": "CTAボタンと申し込みフォーム"
    }
  ],
  "totalDuration": 21.0
}

特徴

  • テンプレートベース: 業界標準のストーリーテリングフレームワークを自動適用
  • 時間管理: 各シーンに適切な時間配分を提案
  • ペーシング制御: シーンタイプに応じたテンポ(fast/medium/slow)を設定
  • remotion互換: 出力JSONはそのままremotion-composeの入力として使用可能
  • カスタマイズ可能: 生成後の手動編集も容易

サポートするプラットフォーム

  • Claude Code
  • Cursor
  • Codex
  • その他のAIエージェント環境

注意事項

  • 生成されたシーン計画はあくまで初期提案です。実際の動画制作では、さらに詳細な調整が必要になる場合があります。
  • ターゲット時間とペーシングは、一般的な動画制作のガイドラインに基づいています。
  • remotion-compose の最新バージョンとの互換性を確認してください。

Individual skills in this repo

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

Captions From Transcript

Produce an accurate, properly timed caption track (SRT or WebVTT) from a video

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Render

Renders a Remotion composition to MP4 and runs the edit-and-re-render loop - CLI render commands, 1080p/4K/9:16 presets, concurrency tuning, codec selection, batch variants from a JSON data file, and Lambda for cloud rendering. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

Screencast Capture

Capture clean raw screen and camera footage for a tutorial or product demo - choosing the recorder (macOS Screenshot toolbar, QuickTime, OBS, Windows Game Bar), setting resolution / frame-rate / cursor / microphone, prepping a distraction-free stage, and recording in retakeable segments. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

Sound and Music Sync

Score a video like an editor: beat-match cuts to the music, land SFX on transitions, pace the voiceover so it breathes, source royalty-free tracks safely, and duck the music so the VO sits clearly on top. Use when adding music, sound effects, or voiceover to a video, when asked to

関連スキル