App Store プレビュー動画を Remotion (React) で生成する Agent Team スキル。
video-director が構成を設計し、script-writer がナレーション台本を作成し、 motion-designer が Remotion コードを実装し、preview-reviewer がコードレビューし、 frame-inspector がレンダリング結果を目視検証する。
Use when: App Store プレビュー動画を作りたい、アプリのプロモーション動画を作りたい、 Remotion で動画を生成したい。Triggers: "プレビュー動画", "App Store 動画", "アプリ動画", "preview movie", "Remotion", "動画作成", "app preview"
インストールする前に、エージェントに与えられる指示の中身を確認できます。
リーダー（スキル実行者）は以下を 自分で行わない:
リーダーの役割は ヒアリング・チーム管理・最終判断 のみ。
以下を確認する（不明ならユーザーに質問）:
出力先ディレクトリに既存の Remotion プロジェクトがあるか確認する。 なければ motion-designer が初期化する（package.json + remotion.config.ts）。
TeamCreate で app-store-preview-movie チームを作成。
以下 5 エージェントを 1つのメッセージで並列に Task ツールで起動する。
| name | 役割 | subagent_type |
|---|---|---|
video-director | シーン構成・全体ディレクション | app-store-preview-movie:video-director |
motion-designer | Remotion コード実装 | app-store-preview-movie:motion-designer |
script-writer | 字幕・CTA テキスト作成 | app-store-preview-movie:script-writer |
preview-reviewer | コードレビュー・品質スコアリング | app-store-preview-movie:preview-reviewer |
frame-inspector | レンダリング結果の目視検証 | app-store-preview-movie:frame-inspector |
TaskCreate で 6 つのタスクを作成:
addBlockedBy: ["1", "2"]）
/Users/babashunsuke/Desktop/miravy/.claude/skills/remotion-best-practices/rules/compositions.md/Users/babashunsuke/Desktop/miravy/.claude/skills/remotion-best-practices/rules/animations.md/Users/babashunsuke/Desktop/miravy/.claude/skills/remotion-best-practices/rules/transitions.md/Users/babashunsuke/Desktop/miravy/.claude/skills/remotion-best-practices/rules/timing.md/Users/babashunsuke/Desktop/miravy/.claude/skills/remotion-best-practices/rules/fonts.mdaddBlockedBy: ["3"]）addBlockedBy: ["3"]）addBlockedBy: ["4", "5"]）subagent_type: "app-store-preview-movie:{role-name}"
team_name: "app-store-preview-movie"
mode: "bypassPermissions"
run_in_background: true
プロンプトに含める情報:
remotion still でキーフレーム抽出 → Read で目視確認 → motion-designer に視覚的問題を報告remotion render で MP4 生成 → ffprobe で仕様チェック（解像度・fps・長さ・コーデック） → ffmpeg でフレーム抽出 → Read で目視確認リーダーが以下を確認:
out/preview.mp4）shutdown_request を送信TeamDelete でチーム削除icon.png）を使う<Img src={staticFile("icon.png")} /> + borderRadius で角丸表示mobile/assets/icon.png から preview-video/public/icon.png にコピーして使用assets/logos/ ディレクトリに各種バリアントがあるfontSize: 48, fontWeight: 800 等）rgba(0, 0, 0, 0.65) 等）はスクリーンショットと被って見づらくなるため禁止PhoneMockup コンポーネントでスクリーンショットを表示する際のルール:
scale: 1.2 推奨）bottom: 120px 程度）bottom: 20px 等は NG）phoneWidth = 340px（フレーム幅の 38%）→ 小さすぎるscale = 0.7 → 小さすぎて画面内容が読めないbackgroundColor: "#1A1A2E" のベゼル → 端末フレーム不要boxShadow: "0 24px 80px rgba(0,0,0,0.35)" → 影が強すぎるbottom: 20 → 下に寄りすぎ、バランスが悪いscale = 1.2（フレーム幅の 73%）→ 大きくて見やすいbottom: 120 → 中央寄り、バランス良いborderRadius: 44, overflow: "hidden" のみ → シンプルで良いmotion-designer が実装時に参照:
/Users/babashunsuke/Desktop/miravy/.claude/skills/remotion-best-practices/rules/
詳細は references/app-store-video-specs.md を参照。 シーンテンプレートは references/scene-templates.md を参照。
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.
日本語の概要は準備中です。原文の説明を表示しています。
Agent Teams スキルを設計・構築するためのベストプラクティスガイド。 サブエージェント定義、SendMessage 通信プロトコル、タスク依存管理、 PostToolUse Hook によるログ、MCP ツール統合、コンテキストファイル設計を網羅。 7つの実績あるチームスキル（app-naming, ui-review, logo-design, persona-creation, skill-creator-team, ui-variations, aso-optimize）から抽出したパターン集。 Use when: Agent Teams を使ったスキルを新規作成したい、 既存のチームスキルの品質を改善したい、エージェント間通信のデバッグ、 チームスキルの設計パターンを知りたい。 Triggers: "agent team", "チームスキル", "エージェントチーム", "サブエージェント定義", "SendMessage パターン", "チーム設計", "エージェント間通信", "team skill", "swarm pattern"
アプリ名・サービス名の命名を、5つの専門エージェントチームで多角的に評価・決定するスキル。 ブランディング、商標/法的リスク、デジタルプレゼンス(SEO/ASO/SNS)、国際展開(多言語/発音)の 4観点から候補を提案・調査・議論し、コンテキストファイルと議事録で次回セッションへ引き継ぐ。 Use when: アプリ名を決めたい、サービス名を変更したい、プロダクト名を検討したい、 ネーミングブレスト、名前の商標チェック、アプリ名のリネーム。 Triggers: "アプリ名", "サービス名", "プロダクト名", "ネーミング", "名前を決め", "リネーム", "rename", "app name", "naming", "ブランド名", "商標チェック"
アプリのトーン&マナー（トンマナ）を8名のエージェントチームで設計するスキル。 ブランドアーキタイプ・パーソナリティ定義から、カラー・タイポグラフィ・ビジュアルスタイル・ トーン・オブ・ボイスまでを一貫設計し、Pencil (.pen) + Markdown で成果物を出力する。 「デザインテンション」（矛盾ペア）を核に、AIっぽくない独自のブランドアイデンティティを生成する。
仕様書・要件定義からソフトウェアアーキテクチャを設計するスキル。 5人の専門エージェント（Architecture Lead・Module Designer・Dependency Analyst・ Platform Expert・Devil's Advocate）が協議しながら、 モジュール分割・依存関係・データフロー・インターフェース設計を行う。 成果物は構造化されたアーキテクチャ設計書（Markdown）。 Use when: 仕様書からどう設計するか迷っている時、モジュール分割の方針を決めたい時、 技術スタックに合ったアーキテクチャパターンを選びたい時、 設計書を作成したい時。 Triggers: "アーキテクチャ設計", "arch design", "仕様書から設計", "モジュール分割", "設計書を作りたい", "アーキテクチャを考えて", "コンポーネント設計", "依存関係を設計", "どう設計する", "design the architecture", "design from spec"
コードベースのアーキテクチャを 6 つの専門エージェントチーム（Claude 5体 + Codex 1体）で 多角的に分析し、リスク・デグレしやすい箇所・改善ポイントを洗い出すスキル。 パフォーマンス、スケーラビリティ、信頼性、セキュリティ、運用、DX、データ整合性、依存関係の 8 観点を 5 グループに分担し、さらに Codex がクロスカットレビュアーとして横断分析する。 エージェント同士が反論・補足・自由な議論を行い、合意形成した結果をレポートとして出力する。 どのプロジェクトでも使える汎用スキル。 Use when: アーキテクチャを分析したい、リファクタリング前にリスクを把握したい、 デグレしやすい箇所を知りたい、コードの健全性を確認したい、大きめの実装前に注意点を洗い出したい、 技術的負債を可視化したい、コードベースの品質を監査したい。 Triggers: "arch review", "アーキテクチャ分析", "アーキテクチャレビュー", "リスク分析", "コード監査", "codebase audit", "技術的負債", "デグレしやすい", "architecture analysis", "risk analysis", "コードの健全性", "品質チェック", "実装前の確認"