mastra-ai/mastra-demo-skill

Mastra デモスキル

プロフェッショナルな製品デモ動画を、以下を組み合わせて作成します：

• ブラウザ自動操作によるGIF録画（claude-in-chrome MCP経由）
• ElevenLabsによるナレーション音声生成
• Remotionによる動画合成

コマンド

コマンド	目的
/mastra-demo:init <名前>	テンプレートから新しいデモプロジェクトを作成
/mastra-demo:script	DEMO_SCRIPT.md を生成または検証
/mastra-demo:record	ブラウザ操作をGIFとして録画
/mastra-demo:audio	ElevenLabs経由でナレーション音声を生成
/mastra-demo:compose	Remotion合成を構築
/mastra-demo:render	最終動画をエクスポート
/mastra-demo:status	進捗と次のステップを表示

クイックスタート

# 1. 新しいデモプロジェクトを作成
/mastra-demo:init my-awesome-demo

# 2. DEMO_SCRIPT.md を編集（または対話的に生成）
/mastra-demo:script

# 3. 各セグメントのブラウザGIFを録画
/mastra-demo:record

# 4. ナレーション音声を生成
/mastra-demo:audio

# 5. 動画合成を構築
/mastra-demo:compose

# 6. 最終動画をレンダリング
/mastra-demo:render

前提条件

• claude-in-chrome MCP: GIF録画用のブラウザ自動化拡張機能
• ElevenLabs APIキー: ナレーション音声生成用
• Node.js 18+: Remotion用
• ffprobe: 音声時間検出用（ffmpegに同梱）

プロジェクト構造

このスキルで作成されたデモプロジェクトは、以下の構造を持ちます：

my-demo/
├── .env                    # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # 実行状態
├── DEMO_SCRIPT.md          # セグメントを含むスクリプト
├── package.json            # Remotion依存関係
├── public/                 # アセット（GIF、音声）
│   ├── segment-01.gif
│   ├── segment-01.mp3
│   └── ...
├── out/                    # レンダリング出力
│   └── demo.mp4
└── src/
    ├── Root.tsx
    ├── DemoVideo.tsx
    └── scenes/

スクリプト形式

DEMO_SCRIPT.md はデモを定義します：

# デモ: 機能名

## ナラティブ
まず、全体のストーリーを連続した散文として記述します。
これにより、セグメント間の自然な流れが確保されます。

## 設定
fps: 30
voice: Daniel

## タイトル
text: "機能名"
subtitle: "タグライン"
duration: 5s

## セグメント

### segment-01-intro
url: http://localhost:4111
voiceover: |
  これは上記のナラティブに自然に接続する
  開始ナレーションです。
actions:
  - navigate: http://localhost:4111
  - wait: 2s
  - find: "サインインボタン"
  - click: found element

## アウトロ
heading: "始める"
command: "npx create-mastra@latest"
links:
  - mastra.ai/docs

ナラティブフロー

優れたデモの鍵はナラティブフローです。個別のGIFと音声セグメントを録画しても、ナレーションは一貫したストーリーを語る必要があります。

良いトランジション：

• 「ログインしたので…」
• 「ここが興味深いところです…」
• 「Mastra Studioに戻ると、その違いがすぐにわかります…」

悪いパターン：

• 文脈なしの唐突なセグメント開始
• 箇条書きスタイルのナレーション
• セグメント間のつながりがない

ブラウザアクション

録画に使用可能なアクション：

アクション	形式	例
ナビゲート	navigate: <url>	navigate: http://localhost:4111
待機	wait: <時間>	wait: 2s
検索	find: "<クエリ>"	find: "サインインボタン"
クリック	click: <ターゲット>	click: found element
入力	type: "<テキスト>"	type: "Hello world"
スクロール	scroll: <方向>	scroll: down

音声設定

プロフェッショナルなデモにおすすめのElevenLabs設定：

• 音声: Daniel、Brian、George、Chris
• モデル: eleven_multilingual_v2
• 安定性: 0.5
• 類似性ブースト: 0.75

リファレンス

詳細なドキュメントについては：

• references/script-format-reference.md - 完全なDEMO_SCRIPT.md形式
• references/gif-recording-reference.md - ブラウザ自動化パターン
• references/audio-generation-reference.md - ElevenLabs連携

テンプレート

templates/ ディレクトリにはRemotionプロジェクトファイルが含まれます：

• シーン用Reactコンポーネント（タイトル、DemoGif、アウトロ）
• ブラウザフレームコンポーネント
• 音声生成スクリプト
• パッケージ設定