Communitygithub.com

Marve10s/Better-Fullstack

Remotion を使用してプログラム可能な動画を生成します。シーン計画、アセットオーケストレーション、検証ゲートを通じて、自動化されたブランド一貫性のある動画コンテンツを制作します。

Better-Fullstack とは？

このスキルは、Remotion を活用したプログラム可能な動画制作を可能にします。テキスト指示から自動的に動画を生成し、ブランドに一貫した高品質な動画をスケールして制作できます。ユーザーはビデオ仕様の定義、シーン構成の作成、アセットの準備、Remotion コンポジションの実装、レンダリングと QA という 5 つのステップに沿って作業を進めます。Claude、ChatGPT、Gemini、Codex などの複数の AI エージェントプラットフォームと連携可能で、オーケストレーター、アナリスト、エグゼキューターのマルチエージェントワークフローによる検証とレトロスペクティブもサポートしています。製品紹介、オンボーディング、プロモーション動画など、マーケティングコンテンツの自動生成に特に有用です。

対応✓Claude Code✓Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/Marve10s/Better-Fullstack/tree/HEAD/.agents/skills/video-production
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Remotion 動画制作

Remotion を使用したプログラム可能な動画制作スキル。テキスト指示から自動的に動画を生成し、一貫性のあるブランド動画をスケールして制作できます。

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

  • 自動動画生成: テキスト指示から動画を生成する場合
  • ブランド動画制作: 一貫したスタイルで高ボリュームの動画を制作する場合
  • プログラム可能なコンテンツ: ナレーション、ビジュアル、アニメーションを組み合わせる場合
  • マーケティングコンテンツ: 製品紹介、オンボーディング、プロモーション動画

手順

ステップ 1: ビデオ仕様の定義

video_spec:
  audience: [ターゲットオーディエンス]
  goal: [動画の目的]
  duration: [全体の長さ - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "fast" | "calm" | "cinematic"
  voice:
    style: [ナレーションスタイル]
    language: [言語]

ステップ 2: シーンの概要を作成

シーン構成テンプレート:

## シーンプラン

### シーン 1: フック (0:00 - 0:05)
- **ビジュアル**: 製品ロゴのフェードイン
- **オーディオ**: アップビートなイントロ
- **テキスト**: "ワークフローを変革"
- **トランジション**: フェード → シーン 2

### シーン 2: 問題提起 (0:05 - 0:15)
- **ビジュアル**: 問題の状態を示すイラスト
- **オーディオ**: ナレーション開始
- **テキスト**: キーメッセージのオーバーレイ
- **トランジション**: スライド左

### シーン 3: ソリューション (0:15 - 0:30)
...

ステップ 3: アセットの準備

# アセットチェックリスト
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

アセット準備のルール:

  • ロゴ: SVG または高解像度 PNG
  • スクリーンショット: ターゲットのアスペクト比に合わせて正規化
  • オーディオ: MP3 または WAV; 音量を正規化
  • フォント: Webフォントまたはローカルフォントファイル

ステップ 4: Remotion コンポジションの実装

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60s at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// シーンコンポーネントの例
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>ワークフローを変革</Title>
    </AbsoluteFill>
  );
};

ステップ 5: レンダリングと QA

# 1. プレビューレンダリング (低品質)
npx remotion preview src/Video.tsx

# 2. QA チェック
- [ ] タイミング
- [ ] オーディオ同期
- [ ] テキストの可読性
- [ ] スムーズなトランジション

# 3. 最終レンダリング
npx remotion render src/Video.tsx ProductIntro out/video.mp4

例

例 1: 製品紹介動画

プロンプト:

6つのシーンで構成された60秒の製品紹介動画を作成してください。
アップビートなトーン、16:9の出力。最後にCTAを含めてください。

期待される出力:

## シーン内訳
1. フック (0:00-0:05): ロゴ + タグライン
2. 問題提起 (0:05-0:15): ペインポイントの可視化
3. ソリューション (0:15-0:30): 製品デモ
4. 機能 (0:30-0:45): 主な利点 (3項目)
5. 社会的証明 (0:45-0:55):  testimonial/統計
6. CTA (0:55-1:00): コールトゥアクション + 連絡先

## Remotion 構造
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

例 2: オンボーディングウォークスルー

プロンプト:

スクリーンショットを使用した45秒のオンボーディングウォークスルーを生成し、
コールアウトとモバイル向けの9:16フォーマットで出力してください。

期待される出力:

  • 5つのステップからなるシーンプラン
  • アセットリスト (スクリーンショット、コールアウト矢印)
  • テキストオーバーレイとトランジション
  • モバイルセーフマージンの適用

ベストプラクティス

  1. 短いシーン: 各シーンを5〜10秒で明確に保つ
  2. 一貫したタイポグラフィ: タイポグラフィスケールを定義する
  3. オーディオ同期: ナレーションのキューをビジュアルに合わせる
  4. テンプレートの再利用: 再利用可能なコンポジションを保存する
  5. セーフゾーン: モバイルのアスペクト比に合わせて余白を確保する

よくある落とし穴

  • テキスト過多: シーンあたりのテキスト量を制限する
  • モバイルセーフゾーンの無視: 9:16出力の端を確認する
  • QA前の最終レンダリング: 必ずプレビューで最初に確認する

トラブルシューティング

問題: オーディオとビジュアルが同期しない

原因: フレームタイミングの不一致 解決策: フレームを再計算し、タイムスタンプを合わせる

問題: レンダリングが遅い、または失敗する

原因: 重いアセットやエフェクト 解決策: アセットを圧縮し、アニメーションを簡略化する

問題: テキストが読めない

原因: フォントサイズが小さすぎる、またはコントラストが不十分 解決策: 少なくとも24pxのフォントと高コントラストな色を使用する

出力形式

## 動画制作レポート

### 仕様
- 長さ: 60s
- アスペクト比: 16:9
- FPS: 30

### シーンプラン
| シーン | 長さ | ビジュアル | オーディオ | トランジション |
|--------|------|----------|----------|--------------|
| フック  | 0:00-0:05 | ロゴフェード | BGM開始 | フェード |
| ...    | ...  | ...      | ...      | ...          |

### アセット
- [ ] logo.svg
- [ ] スクリーンショット (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### レンダリングチェックリスト
- [ ] プレビューQA合格
- [ ] オーディオ同期確認済み
- [ ] セーフゾーン確認済み
- [ ] 最終レンダリング完了

マルチエージェントワークフロー

検証とレトロスペクティブ

  • ラウンド 1 (オーケストレーター): 仕様の完全性、シーンカバレッジ
  • ラウンド 2 (アナリスト): ナラティブの一貫性、ペーシングのレビュー
  • ラウンド 3 (エグゼキューター): レンダリング準備完了チェックリストの検証

エージェントの役割

エージェント役割
Claudeシーン計画、スクリプト作成
Geminiアセット分析、最適化提案
CodexRemotionコード生成、レンダリング実行

メタデータ

バージョン

  • 現在のバージョン: 1.0.0
  • 最終更新日: 2026-01-21
  • 互換性のあるプラットフォーム: Claude, ChatGPT, Gemini, Codex

関連スキル

タグ

#video #remotion #animation #storytelling #automation #react

Individual skills in this repo

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

Marve10s/Better-Fullstack

Scaffold production-ready full-stack apps in TypeScript, Rust, Python, Go, and Java with a visual builder and CLI. Choose your frontend, backend, database, auth, AI, payments, and DevOps integrations, all wired together.

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community