jpskill.com
🛠️ 開発・MCP コミュニティ

video-creator

製品デモや解説動画、SNS動画など、動画制作の全工程(インタビュー、脚本作成、映像確認、Remotionプロジェクト構築、音声デザイン、ナレーション、4Kレンダリング)を自動で実行し、ゼロから高品質な動画を完成させるSkill。

📜 元の英語説明(参考)

Use this skill when creating complete videos from scratch - product demos, explainers, social clips, or announcements. Orchestrates the full workflow: deep interview, script generation, visual verification, Remotion project build, audio design, narration, and 4K rendering. Triggers on "make me a video", "create a video about", video production, and end-to-end video creation requests.

🇯🇵 日本人クリエイター向け解説

一言でいうと

製品デモや解説動画、SNS動画など、動画制作の全工程(インタビュー、脚本作成、映像確認、Remotionプロジェクト構築、音声デザイン、ナレーション、4Kレンダリング)を自動で実行し、ゼロから高品質な動画を完成させるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o video-creator.zip https://jpskill.com/download/9054.zip && unzip -o video-creator.zip && rm video-creator.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9054.zip -OutFile "$d\video-creator.zip"; Expand-Archive "$d\video-creator.zip" -DestinationPath $d -Force; ri "$d\video-creator.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して video-creator.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → video-creator フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] video-creator :movie_camera: このスキルが有効化された場合、必ず最初の応答を:movie_camera:の絵文字で始めてください。

Video Creator

これは、エンドツーエンドのビデオ作成のためのオーケストレーター スキルです。これは、ユーザーを「ビデオが必要」という状態から、完成した4Kレンダリングまで導く、7ステップのワークフロー全体を調整します。各ステップは、コンパニオン スキル(remotion-video、video-scriptwriting、video-audio-design、video-analyzer)に委譲されますが、このスキルは、シーケンス、承認ゲート、およびステージ間のハンドオフを管理します。

Remotionの内部構造やオーディオ エンジニアリングについて知る必要はありません。それらはコンパニオン スキルによって処理されます。このスキルの役割は、プロセスを実行し、適切な質問をし、何もスキップされないようにすることです。


このスキルを使用するタイミング

ユーザーが以下の場合に、このスキルをトリガーします。

  • 「ビデオを作成して」、「~についてのビデオを作成して」、または「~のビデオが必要」と言う
  • 製品デモ、解説、ソーシャル クリップ、または告知ビデオを求めている
  • コンセプトからレンダリングまでのエンドツーエンドのビデオ制作を求めている
  • アイデアを完成したビデオ ファイルに変換する手助けを必要としている
  • Remotionを使用したプログラムによるビデオ作成について言及している
  • 参考ビデオがあり、同様のものを作成したいと考えている

以下の場合には、このスキルをトリガーしないでください。

  • 既存のビデオ ファイルの編集(video-analyzerまたはffmpegスキルを使用)
  • ビデオを制作せずにスクリプトのみを作成(video-scriptwritingを使用)
  • ポッドキャストのようなオーディオのみの制作(音楽/SFXにはvideo-audio-designを使用)
  • 制作コンテキストなしのRemotionコーディングに関する質問(remotion-videoを使用)
  • ビデオの分析またはレビュー(video-analyzerを使用)

主要な原則

  1. ビジュアル優先: オーディオにお金をかける前に、ビジュアルの承認を得てください。 ナレーションはElevenLabs経由で実際のお金がかかります。ビジュアルレイヤーが確定するまで、絶対に生成しないでください。

  2. 徹底的な聞き取り: 製品、視聴者、目標、トーン、アセット、およびビジュアルの好みに関するすべてのコンテキストを把握するために、最大30の質問をしてください。 不完全なコンテキストは、高価な手戻りにつながります。

  3. 構造化されたハンドオフ: video-script.yamlファイルは、すべてのステップ間の唯一の信頼できる情報源です。すべてのシーン、フレーム数、ナレーションの行、およびSFXキューがこのファイルに存在します。

  4. ユーザー承認ゲート: 主要な各ステップで明示的な承認が必要です。 決して自動的に進めないでください。ユーザーが「承認」または「良さそう」と言うまで、次のステップを開始しないでください。

  5. 4Kデフォルト: ユーザーが特に指定しない限り、常に3840x2160でレンダリングします。 ダウンスケールは簡単ですが、アップスケールはそうではありません。


7ステップのワークフロー

ステップ 0: Remotionプロジェクトが存在することを確認する (前提条件)

何よりもまず、ユーザーはRemotionプロジェクトを設定しておく必要があります。これは、すべてのビデオ コードが記述されるワークスペースです。すでにRemotionプロジェクト内にいるかどうかを確認してくださいremotion.config.tsまたはpackage.json@remotion/cliがないか確認してください)。そうでない場合は、スキャフォールドします。

npx create-video@latest

これにより、スターター プロジェクトを含む新しいフォルダーが作成されます。次に、依存関係をインストールします。

cd <project-name>
npm install

Remotionプロジェクトが存在し、依存関係がインストールされるまで、ステップ1に進まないでください。 後続のすべてのステップで、このプロジェクトにコードが書き込まれます。

ユーザーがすでにRemotionプロジェクトを持っている場合は、cdで移動して続行します。


ステップ 1: 詳細な聞き取り

完全なスクリプトを作成するために必要なすべてのコンテキストを収集します。インタラクティブな会話形式で一度に1つずつ質問します。

質問のカテゴリ (合計15~30の質問を目指します):

カテゴリ 質問の例
製品/主題 製品は何をしますか?コアとなる価値提案は何ですか?
視聴者 ターゲットとなる視聴者は誰ですか?技術レベルは?
ビデオの目標 視聴者は視聴後、何をするべきですか?
トーン/スタイル 遊び心があるか、プロフェッショナルか?速いペースか、遅いペースか?
アセット ロゴ、スクリーンショット、ブランドカラー、フォントはありますか?
コンテンツ カバーする主要な機能またはメッセージは何ですか?
ビジュアルの好み 参考ビデオはありますか?好みの動画スタイルは?
長さ ビデオの長さはどのくらいにする必要がありますか?どこに公開されますか?

ステップ1のルール:

  • 一度に1つの質問をします - アンケートをまとめて送信しないでください
  • ユーザーが参考ビデオを提供する場合、質問する前に、まずvideo-analyzerスキルを使用して分析します
  • 5~8個の質問ごとに、知っていることを要約します
  • すべてのシーンに十分なコンテキストが得られるまで続行しないでください
  • 次の言葉で終わります: 「スクリプトを作成するのに十分なコンテキストがあります。続行する準備はできましたか?」

終了基準: ユーザーが十分なコンテキストを持っていることを確認します。


ステップ 2: スクリプトの生成 (YAML)

video-scriptwritingスキルのパターンを使用して、構造化されたYAMLスクリプトを作成します。

フレーム数式:

frames = duration_seconds * 30

すべてのRemotionコンポジションは、デフォルトで30fpsを使用します。

次の構造でvideo-script.yamlファイルを生成します:

title: "製品デモ - Acme Widget"
fps: 30
resolution: { width: 3840, height: 2160 }
total_duration_seconds: 60
scenes:
  - id: scene-01
    title: "フック"
    duration_seconds: 5
    frames: 150
    narration: "ウィジェットが自分で考えられたらいいなと思ったことはありませんか?"
    visuals: "暗い背景、光るAcmeロゴがフェードイン、パーティクル"
    animation_notes: "ロゴのスケールがスプリングで0->1、パーティクルが中心から放出"
    music_cue: "アンビエント シンセパッド、低エネルギー"
    sfx: "ロゴの表示時に微妙なウーッシュ音"
    transition_out: "クロスフェード"
  - id: scene-02
    # ... すべてのシーンについて続行

ステップ2のルール:

  • すべてのシーンにduration_secondsframesnarrationvisualsanimation_notesmusic_cue、およびsfxフィールドが必要です
  • フレーム数はduration_seconds * 30と等しくなければなりません
  • シーンの合計時間はtotal_duration_secondsと合計されなければなりません
  • レビューのために完全なスクリプトをユーザーに提示します
  • ユーザーが明示的に承認するまで、フィードバックを繰り返します

終了基準: ユーザーがスクリプトを承認します。


ステップ 3: ビジュアル検証

ビジュアルのみの最小限のRemotionプロジェクトを構築します - まだオーディオレイヤーはありません。

構築するもの:

  • 各シーンのRemotionコンポジション (ビジュアル、アニメーション、タイポグラフィ、色)
  • スクリプトに一致するシーンのトランジション
  • 正しいフレーム数

(原文はここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

When this skill is activated, always start your first response with the :movie_camera: emoji.

Video Creator

This is the orchestrator skill for end-to-end video creation. It coordinates a complete 7-step workflow that takes a user from "I need a video" to a finished 4K render. Each step delegates to companion skills (remotion-video, video-scriptwriting, video-audio-design, video-analyzer) while this skill manages sequencing, approval gates, and handoffs between stages.

You do NOT need to know Remotion internals or audio engineering - those are handled by companion skills. This skill's job is to run the process, ask the right questions, and make sure nothing gets skipped.


When to use this skill

Trigger this skill when the user:

  • Says "make me a video", "create a video about", or "I need a video for"
  • Wants a product demo, explainer, social clip, or announcement video
  • Asks for end-to-end video production from concept to render
  • Needs help turning an idea into a finished video file
  • Mentions wanting a programmatic video with Remotion
  • Has a reference video and wants to create something similar

Do NOT trigger this skill for:

  • Editing an existing video file (use video-analyzer or ffmpeg skills)
  • Writing a script only without producing a video (use video-scriptwriting)
  • Audio-only production like podcasts (use video-audio-design for music/SFX)
  • Remotion coding questions without a production context (use remotion-video)
  • Analyzing or reviewing a video (use video-analyzer)

Key principles

  1. Visual-first: Get visuals approved before spending money on audio. Narration costs real dollars via ElevenLabs - never generate it until the visual layer is locked.

  2. Interview exhaustively: Ask up to 30 questions to capture all context about the product, audience, goals, tone, assets, and visual preferences. Incomplete context leads to expensive re-work.

  3. Structured handoff: The video-script.yaml file is the single source of truth between all steps. Every scene, frame count, narration line, and SFX cue lives in this file.

  4. User approval gates: Explicit approval is required at each major step. Never auto-advance. The user must say "approved" or "looks good" before the next step begins.

  5. 4K default: Always render at 3840x2160 unless the user specifies otherwise. Downscaling is easy; upscaling is not.


The 7-Step Workflow

Step 0: Ensure Remotion Project Exists (prerequisite)

Before anything else, the user must have a Remotion project set up. This is the workspace where all video code will be written. Check if you are already inside a Remotion project (look for remotion.config.ts or @remotion/cli in package.json). If not, scaffold one:

npx create-video@latest

This creates a new folder with the starter project. Then install dependencies:

cd <project-name>
npm install

Do NOT proceed to Step 1 until a Remotion project exists and dependencies are installed. All subsequent steps write code into this project.

If the user already has a Remotion project, cd into it and continue.


Step 1: Deep Interview

Gather all context needed to write a complete script. Ask questions one at a time using an interactive conversational approach.

Question categories (aim for 15-30 questions total):

Category Example Questions
Product/subject What does the product do? What is the core value prop?
Audience Who is the target viewer? Technical level?
Video goals What should the viewer do after watching?
Tone/style Playful or professional? Fast or slow-paced?
Assets Do you have logos, screenshots, brand colors, fonts?
Content What are the key features or messages to cover?
Visual preferences Any reference videos? Preferred animation style?
Duration How long should the video be? Where will it be published?

Rules for Step 1:

  • Ask one question at a time - do not dump a questionnaire
  • If the user provides a reference video, analyze it FIRST using the video-analyzer skill before asking questions
  • Summarize what you know after every 5-8 questions
  • Do not proceed until you have enough context for every scene
  • End with: "I have enough context to write the script. Ready to proceed?"

Exit criteria: User confirms you have enough context.


Step 2: Generate Script (YAML)

Use patterns from the video-scriptwriting skill to produce a structured YAML script.

Frame count formula:

frames = duration_seconds * 30

All Remotion compositions use 30fps by default.

Generate a video-script.yaml file with this structure:

title: "Product Demo - Acme Widget"
fps: 30
resolution: { width: 3840, height: 2160 }
total_duration_seconds: 60
scenes:
  - id: scene-01
    title: "Hook"
    duration_seconds: 5
    frames: 150
    narration: "Ever wished your widgets could think for themselves?"
    visuals: "Dark background, glowing Acme logo fades in, particles"
    animation_notes: "Logo scale 0->1 with spring, particles emit from center"
    music_cue: "Ambient synth pad, low energy"
    sfx: "Subtle whoosh on logo reveal"
    transition_out: "crossfade"
  - id: scene-02
    # ... continue for all scenes

Rules for Step 2:

  • Every scene must have duration_seconds, frames, narration, visuals, animation_notes, music_cue, and sfx fields
  • Frame counts must equal duration_seconds * 30
  • Total scene durations must sum to total_duration_seconds
  • Present the full script to the user for review
  • Iterate on feedback until the user explicitly approves

Exit criteria: User approves the script.


Step 3: Visual Verification

Build a minimal Remotion project with visuals only - no audio layer yet.

What to build:

  • Remotion compositions for each scene (visuals, animations, typography, colors)
  • Scene transitions matching the script
  • Correct frame counts per scene
  • Basic layout and spacing at 4K resolution

What NOT to build yet:

  • Audio integration
  • Narration sync
  • Volume ducking
  • Final render pipeline

Process:

  1. Verify the Remotion project is set up (done in Step 0)
  2. Build visual compositions for each scene inside the project
  3. Launch Remotion Studio: npx remotion studio
  4. Tell the user to preview at http://localhost:3000
  5. Iterate on visual feedback (colors, timing, animations, transitions)
  6. Get EXPLICIT visual approval before proceeding

Exit criteria: User explicitly approves the visuals.


Step 4: Build Full Remotion Project

Now that visuals are approved, flesh out the complete project.

Tasks:

  • Finalize all compositions with polished animations
  • Wire up scene-to-scene transitions
  • Add Zod schemas for parametrization (titles, colors, durations)
  • Ensure frame counts match the script exactly
  • Organize project structure cleanly:
src/
  compositions/
    Scene01Hook.tsx
    Scene02Feature.tsx
    ...
  components/
    AnimatedLogo.tsx
    TransitionWipe.tsx
    ...
  Root.tsx
  index.ts
  video-script.yaml

Rules for Step 4:

  • Each scene should be its own composition file
  • Shared components go in components/
  • All magic numbers should be replaced with Zod schema props
  • Frame counts must still match video-script.yaml

Exit criteria: Full project builds without errors and matches approved visuals.


Step 5: Add Background Audio + SFX

Use patterns from the video-audio-design skill.

Tasks:

  1. Source or select background music (user-provided or from documented sources)
  2. Place SFX at trigger points from the script (clicks, typing, whooshes, etc.)
  3. Set base volume levels for music and SFX
  4. Implement ducking infrastructure - prepare volume curves that will lower music during narration segments in Step 6
  5. Preview audio-visual sync in Remotion Studio

Volume guidelines: | Layer | Base Volume | During Narration | |---|---|---| | Background music | 0.3-0.5 | 0.1-0.15 | | SFX | 0.5-0.8 | 0.4-0.6 | | Narration | N/A (Step 6) | 1.0 |

Exit criteria: User approves audio-visual sync.


Step 6: Add Narration (Deferred - costs money)

This step involves paid API calls to ElevenLabs. Always confirm before proceeding.

Setup:

  1. Check if user has an ElevenLabs API key
  2. If not, guide them through signup at https://elevenlabs.io
  3. Ask voice preference questions:
    • Gender preference?
    • Age range (young, middle, mature)?
    • Accent preference?
    • Energy level (calm, moderate, energetic)?
    • Warmth (warm and friendly, neutral, authoritative)?

Process:

  1. Generate narration audio for each scene via ElevenLabs API
  2. Calculate exact audio durations from generated files
  3. Adjust frame counts if narration is longer/shorter than planned
  4. Update video-script.yaml with actual audio durations
  5. Sync narration with visual timing
  6. Activate volume ducking on background music during narration segments
  7. Preview complete audio mix in Remotion Studio

Rules for Step 6:

  • Always confirm costs before making API calls
  • If user wants to skip narration, that is fine - proceed to Step 7 without it
  • If user prefers a different TTS provider, support that
  • Re-sync all timing if audio durations differ from script estimates

Exit criteria: User approves narration sync (or explicitly skips this step).


Step 7: Final Preview + 4K Render

Process:

  1. Launch full preview with all layers in Remotion Studio
  2. Tell user to review the complete video (visuals + music + SFX + narration)
  3. Get final approval
  4. Render at 4K:
    npx remotion render src/index.ts Main out/video.mp4 \
    --width 3840 --height 2160

Format guidance: | Format | Use Case | |---|---| | MP4 (H.264) | Web, social media, general sharing | | MP4 (H.265) | Smaller file size, modern device playback | | ProRes | Further editing in Premiere, Final Cut, DaVinci | | WebM (VP9) | Web embedding with transparency support |

Exit criteria: Rendered video file delivered to user.


Orchestration rules

  1. Each step requires explicit user approval before advancing to the next step
  2. Explain what you are doing and why at each step
  3. If the user provides a reference video, run video-analyzer FIRST before starting Step 1
  4. Always create a video-script.yaml as the single source of truth
  5. The Remotion project structure must be clean and well-organized
  6. If the user wants to skip narration (Step 6), proceed directly to Step 7
  7. If the user wants a different TTS provider, adapt Step 6 accordingly
  8. Never generate narration audio before visual approval (Step 3 complete)
  9. Never skip visual verification - it prevents expensive re-work
  10. Always default to 4K (3840x2160) unless the user specifies otherwise

Supported video types

Type Duration Scenes Per Scene
Product demo 30-120s 6-15 5-10s
Explainer 60-180s 8-20 5-12s
Social clip 15-60s 3-8 3-8s
Announcement 15-45s 3-6 4-8s

Anti-patterns / common mistakes

Anti-pattern Why it fails Correct approach
Generating narration before visual approval Wastes money if visuals change Complete Steps 1-4 first, then narration
Skipping the interview Script lacks context, scenes feel generic Ask 15-30 targeted questions
No YAML script file No source of truth, timing drifts Always generate video-script.yaml
Auto-advancing without approval User loses control, re-work is expensive Wait for explicit "approved" at each gate
Hardcoding values in Remotion Cannot parametrize or reuse Use Zod schemas for all configurable values
Rendering at 1080p by default Cannot upscale later Always default to 4K (3840x2160)
Building audio and visuals simultaneously Makes iteration painful Visual-first, audio after approval

Gotchas

  1. Frame count math matters. 60 seconds at 30fps = 1800 frames exactly. If scene durations do not sum correctly, the video will be too short or too long. Always verify: sum(scene.duration_seconds) == total_duration_seconds.

  2. Remotion Studio needs a running dev server. After building compositions, you must run npx remotion studio and tell the user to open http://localhost:3000. Do not assume they can preview without this.

  3. ElevenLabs narration durations are unpredictable. A 5-second script line might produce 4.2s or 6.1s of audio. Always measure actual durations after generation and adjust frame counts accordingly.

  4. Volume ducking requires knowing narration timing. The ducking curves for background music depend on knowing exactly when narration starts and stops in each scene. This is why Step 5 sets up ducking infrastructure but Step 6 activates it.

  5. 4K rendering is slow. A 60-second video at 3840x2160 can take 10-30 minutes depending on complexity. Warn the user about render time before starting, and suggest a 1080p test render first if they want a quick check.


References

  • references/workflow-checklist.md - Detailed checklist for each of the 7 steps with sub-tasks, expected outputs, and approval criteria
  • references/project-templates.md - Starter Remotion project structures for each video type with file trees and component scaffolds
  • references/troubleshooting.md - Common issues and fixes for Remotion rendering, audio sync, FFmpeg, ElevenLabs API, and performance

Companion check

On first activation of this skill in a conversation: check which companion skills are installed by running ls ~/.claude/skills/ ~/.agent/skills/ ~/.agents/skills/ .claude/skills/ .agent/skills/ .agents/skills/ 2>/dev/null. Compare the results against the recommended_skills field in this file's frontmatter. For any that are missing, mention them once and offer to install:

npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name>

Skip entirely if recommended_skills is empty or all companions are already installed.