Menu
Remotionコンポジションを20項目チェックリストで品質レビューする。 「動画レビュー」「motion review」「Remotion品質チェック」等のリクエストで発動。
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/minicoohei/ai-agent-camp --skill motion-reviewThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
| name | motion-review |
| description | Remotionコンポジションを20項目チェックリストで品質レビューする。 「動画レビュー」「motion review」「Remotion品質チェック」等のリクエストで発動。 |
| triggers | ["動画レビュー","動画の品質チェック","motion review","motion-review","Remotion品質チェック","PVレビュー","video review"] |
Remotion コンポジションをプロの動画クリエイター視点でレビューし、品質改善指示を出すスキル。 GTM Manager / Campaign Orchestrator の Quality Review ステップで自動的に呼び出される。
motion review, video review, 動画レビュー, PVレビュー, Remotion品質チェック
.tsx）1. Read composition .tsx
2. Run 26-point checklist (A-I categories below)
3. Output structured review with P1/P2/P3 ratings
4. If any P1 exists → VERDICT: FIX_REQUIRED
5. If P2 only → VERDICT: FIX_RECOMMENDED
6. If P3 only → VERDICT: PASS
チェック: Sequence が OVERLAP フレーム分重なっているか？
from={starts[i]} が前シーンの終了と一致）from={starts[i] - OVERLAP}, durationInFrames={frames[i] + OVERLAP * 2}// NG
<Sequence from={starts[1]} durationInFrames={frames[1]}>
// OK
<Sequence from={starts[1] - OVERLAP} durationInFrames={frames[1] + OVERLAP * 2}>
チェック: フェーズ間が CrossFadeWrap（opacity fade + subtle scale）で滑らかに繋がっているか？
scale(1.0→1.03) で奥行き感 + 補助的な薄いフラッシュ(opacity 0.2)const XFADE = 10;
const CrossFadeWrap: React.FC<{children; isFirst?; isLast?}> = ({children, isFirst, isLast}) => {
const frame = useCurrentFrame();
const { durationInFrames: dur } = useVideoConfig();
const fadeIn = isFirst ? 1 : interpolate(frame, [0, XFADE], [0, 1], {extrapolateLeft:"clamp",extrapolateRight:"clamp"});
const fadeOut = isLast ? 1 : interpolate(frame, [dur-XFADE, dur], [1, 0], {extrapolateLeft:"clamp",extrapolateRight:"clamp"});
const scaleOut = isLast ? 1 : interpolate(frame, [dur-XFADE, dur], [1, 1.03], {extrapolateLeft:"clamp",extrapolateRight:"clamp"});
return <AbsoluteFill style={{opacity: fadeIn*, `(${})`}}>{children};
};
( i = ; i < frameDurations.; i++) {
offsets.(acc);
acc += frameDurations[i] - (i < frameDurations. - ? : );
}
チェック: 全シーンが同じ exit/entrance パターンになっていないか？
opacity fade のみチェック: Before→After 等の対比シーンで clipPath wipe が連動しているか？
チェック: 要素の重さに応じた異なる spring config が使われているか？
{ damping: 12, mass: 0.5, stiffness: 200 }// 最低限のプロファイル
const SP = {
snappy: { damping: 8, mass: 0.2, stiffness: 250 }, // アクセント線、バッジ
balanced: { damping: 12, mass: 0.4, stiffness: 180 }, // テキスト
weighty: { damping: 16, mass: 0.8, stiffness: 120 }, // ロゴ、ウィンドウ
liquid: { damping: 20, mass: 1.2, stiffness: 60 }, // 背景装飾
};
チェック: 以下のうち2つ以上が実装されているか？
チェック: sectionDurations とアニメーション delay がビートグリッドに乗っているか？
sectionDurations: [3, 3, 2.5, 3]（非整数ビート）、delay={14}（任意フレーム数）sectionDurations: [3, 3, 2.4, 3]（beat 倍数）、delay={beat(1)}（18フレーム単位）60 / BPM * fps = 1 beat のフレーム数const BEAT = 18; // 140 BPM @30fps
const beat = (n: number) => n * BEAT;
チェック: Film Grain が毎フレーム変化するか？
seed='2'）→ フリーズテクスチャ = ないほうがマシseed={frame % 5} でフレームごとにローテーションチェック: i2v / 画像背景に微ズーム（Ken Burns）があるか？
<OffthreadVideo> がそのまま（壁紙貼り付け感）scale(1.0 → 1.05-1.08) を interpolate で適用チェック: 以下の映像フィルターが適用されているか？
チェック: 1080p 動画で最小テキストが読めるか？
| 用途 | 最小サイズ | 推奨サイズ |
|---|---|---|
| メインタイトル | 52px | 58-72px |
| サブタイトル | 36px | 42-48px |
| 本文 | 18px | 20-24px |
| ラベル・キャプション | 14px | 16-18px |
| 数字（カウントアップ） | 80px | 100-120px |
チェック: 以下が設定されているか？
WebkitFontSmoothing: "antialiased"textRendering: "optimizeLegibility"lineHeight が明示的に指定されているletterSpacing が体系的（tight / normal / wide / label の4段階程度）alignItems: "baseline" で揃っているチェック: 全シーンが同じ色調でないか？
rgba(0,0,0,${overlay}) で同じ黒オーバーレイrgba(20,5,0,...), After=寒色寄り rgba(0,0,20,...), CTA=ゴールド rgba(10,5,0,...)チェック: 全シーンが中央揃えになっていないか？
alignItems: "center", textAlign: "center"v30-v36 の実制作イテレーションで発見された実践的バグを体系化。
チェック: TYPING_END が PAUSE_AT のフレーム数を含んでいるか？
TYPING_END = TYPING_START + text.length * TYPING_SPEED（ポーズフレーム未計上 → タイプ途中で切れる）TYPING_END = TYPING_START + Math.ceil(text.length * TYPING_SPEED) + PAUSE_AT.length * PAUSE_FRAMESTYPING_END の計算式に PAUSE_AT / PAUSE_FRAMES が含まれているか grep で確認チェック: interpolate() の結果を translateY/X に直接使っていないか？
transform: translateY(${interpolate(frame, [0, 100], [200, -400])}px) → 小数値でテキスト/チャートがぼやけるtransform: translateY(${Math.round(interpolate(frame, [0, 100], [200, -400]))}px)interpolate( を含む行で translateY|translateX|scrollY|top|left を検索 → Math.round() 未ラップなら NGopacity, scale, rotate は小数値が必要なので対象外チェック: テキスト色と背景色のコントラスト比が WCAG AA (4.5:1) 以上か？
color: "#FFF" → 読めないcolor: "#1E293B" → 同様に読めないtextShadow でコントラスト確保backgroundColor / background と color プロパティの組み合わせを目視チェックtextShadow: "0 4px 40px rgba(0,0,0,0.9)" を追加チェック: アルファチャンネル付き PNG が暗い背景で消えていないか？
backgroundColor: "#000" の上に直接配置 → ロゴが見えないbackground: "rgba(255,255,255,0.95)" を挿入<Img> / staticFile() で .png を読み込んでいるシーンの親要素の backgroundColor を確認チェック: parallax スクロールの interpolate 出力範囲がコンテンツ量に対して十分か？
[150, -350] → 下の画像が表示されないscrollRange = rows * (IMG_HEIGHT + IMG_GAP) を基準に設定columns 配列の行数 × (IMG_HEIGHT + IMG_GAP) の合計と interpolate の [start, end] 範囲を比較[250, -650] に拡大した実例チェック: index * staggerDelay の最大値がセクションの durationInFrames を超えていないか？
(items.length - 1) * staggerDelay + springSettleFrames < durationInFrames.map((item, index) を含むコンポーネントで index * を検索。(length - 1) * delay + 30f(settle) が親 Sequence duration 以下か計算cardStart = 10 + index * 55 に変更（6枚 × 55f = max 285f < 360f）チェック: BGM の再生時間がビデオの総尺以上か？
<Audio loop /> でループbgmSrc のファイルを ffprobe で尺確認 → durationInFrames / fps と比較showcase_bgm_60s.mp3（62秒）を使用チェック: 連続するデモセクションに統一されたラベルパターンがあるか？
USE CASE {NN} + サブタイトルの2段構成を追加した実例v26-v29 の TWIN PLANET PV制作（12シーン73秒）で発見された実践的な品質問題を体系化。
チェック: Remotion 4 の --props CLI オプションで defaultProps を上書きしようとしていないか？
npx remotion render Comp --props='{"bgmParts":["new.mp3"]}' → defaultProps が優先され無視されるffmpeg -y -i video.mp4 -i new_bgm.mp3 -map 0:v -map 1:a -c:v copy -shortest output.mp4--props を使っている箇所を grepチェック: IDE の linter/formatter が Root.tsx や Composition ファイルを自動的に古い状態に書き戻していないか？
git diff でファイル状態を確認、コミットされていない変更は定期的に stash/commitgrep sectionDurations で値が期待通りか確認チェック: interpolate で scale を 1.0 以上にする要素が画面端からはみ出していないか？
focusScale = interpolate(prog, [0,1], [1, 1.25]) → 右端/下端のボックスが見切れるfocusScale = 1.15 + translateX(-40px) で端のボックスを中央に寄せるチェック: テロップ（字幕テキスト）の表示時間が読み取りに十分か？
TELOP_DUR = Math.max(45, textLength * 3) フレーム（30fps基準）チェック: 同一シーン内のテロップで fontSize がバラバラでないか？
fontSize を一覧し、2種類以上のサイズが理由なく混在していないか確認チェック: 前フェーズのテロップが次フェーズの冒頭で一瞬表示されていないか？
sf > 8 && opacity: interpolate(sf, [8, 18], [0, 1])）チェック: 4-grid レイアウトに4枚しか画像がない場合、後半フェーズが1枚表示になっていないか？
heroImages = images.slice(4), heroDur = remainingFrames / heroImages.lengthチェック: AI BGM 生成で複数パターンを作る際、プロンプトが十分に差別化されているか？
fal-ai/stable-audio-25/text-to-audio で最大190秒一発生成（旧stable-audioの47秒制限は解消）ffmpeg -y -i video.mp4 -i bgm.mp3 -map 0:v -map 1:a -c:v copy -af "afade=t=out:st=70:d=3" -shortest out.mp4チェック: テロップの表示方式が内容に適しているか？
TaxAccountantDemo v15→v20、PersonalPMODemo v3 の制作で確立。GTM動画制作時に必ず適用。
チェック: Claude Code の UI表現が紫（Cursor風）ではなく黒（公式）になっているか？
rgba(99,102,241,...) (紫/インディゴ系)、#A5B4FC (薄紫テキスト)rgba(15,15,15,0.8) / rgba(20,20,20,0.9)、アクセント #D97757 (Claude orange)、スピナー stroke #D97757rgba(99,102,241 や #A5B4FC を grep で検索チェック: 同一ブランドの派生アイコンが親ブランドのアイコンと統一されているか？
github-actions.svg が GitHub octocat と異なるカスタムデザインgithub-actions.svg = github-issues.svg = github.svg (同一の octocat)チェック: フルスクリーンのSVG図（アーキテクチャ図、フロー図）が画面中央に配置されているか？
チェック: Slack/Gmail等のモックUIでコンテンツが上寄せになっていないか？
justifyContent: "center" で垂直中央に配置。サイドバー幅240-260px、本文フォント18px以上チェック: サービス名がテキストだけで表示されていないか？
<span>Claude Code</span> のみ<Img src={staticFile("logo.svg")} /> + テキストチェック: 静止すべき要素（ロゴ、タイトル、価格）に低damping springが使われていないか？
spring({ config: { damping: 12 } }) → 微振動が目立つinterpolate(frame, [5, 18], [0, 1]) で滑らかフェードインチェック: レシート・取引名・企業名が実在しそうか？
チェック: 1シーンにチャート/テーブル/テキストが3つ以上詰め込まれていないか？
チェック: 画面に大きくテキストが表示されるシーンで、同内容のキャプションが出ていないか？
チェック: AI自動処理シーンの項目数が少なすぎないか？
チェック: プロダクトデモ動画にユーザー操作/チャットアニメーションがあるか？
チェック: 動画のストーリーが以下の流れになっているか？
TaxAccountantDemo v34-v40 で確立。ナレーション付き動画の必須チェック。
チェック: ElevenLabs TTS の日本語ナレーションが正しく聞き取れるか？
genai.upload_file(mp3) + 書き起こし比較。全クリップ必須チェック: 音声の内容と画面キャプションが一致しているか？
チェック: ナレーション音声の長さがシーンの durationInFrames 以内か？
ffprobe で各ナレーション mp3 の尺を取得 → sectionDurations と比較チェック: ナレーションがBGMに埋もれていないか？
volume={0.35}, ナレーション volume={0.85} → BGMが勝つvolume={0.12}, ナレーション volume={0.85} → amixで相殺されナレーションが小さくなるvolume={0.18-0.25}, ナレーション volume={1.0-1.2}チェック: 複数パートをcrossfade結合したBGMで、結合点が不自然でないか？
fal-ai/stable-audio → fal-ai/stable-audio-25/text-to-audio に移行チェック: TTS が数字や専門用語を正しく読めているか？
静的なシーンを動的に進化させるためのチェック項目。
チェック: テキストだけが表示されるシーンが3秒以上続いていないか？
<Img> / <OffthreadVideo> / SVG / Canvas 要素がなく durationInFrames / fps >= 3 のシーンを特定<OffthreadVideo> で配置し、上にテキストをオーバーレイチェック: i2v背景使用時にオーバーレイの opacity が適切か？
opacity: 0.3（テキストが背景に埋もれる）、opacity: 0.9（背景が見えずi2vの意味なし）opacity: 0.5-0.7 の半透明オーバーレイで背景とテキストのバランスを確保<div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)' }} />OffthreadVideo を含むシーンで、兄弟/子要素の rgba( や opacity 値を確認チェック: 静的なPNG/JPG画像が3秒以上アニメーションなしで表示されていないか？
<Img> でそのまま3秒以上表示（紙芝居感）spring() でスタッガード登場する<rect>, <circle>, <text>, <line> で再実装 → spring() でスタッガードアニメーション<Img src={staticFile("...png")} を含むシーンで、親 Sequence の durationInFrames / fps >= 3 かつ interpolate / spring が画像に適用されていない場合## Motion Review Report
**対象**: {composition_file_path}
**評価**: {A+ / A / B+ / B / C+ / C / D}
**VERDICT**: {PASS / FIX_RECOMMENDED / FIX_REQUIRED}
### P1 Issues (Must Fix)
| # | Check | Issue | Fix |
|---|-------|-------|-----|
| 1 | A1 | シーン間に黒フレーム | Sequence を OVERLAP フレーム重ねる |
### P2 Issues (Should Fix)
| # | Check | Issue | Fix |
|---|-------|-------|-----|
### P3 Issues (Nice to Have)
| # | Check | Issue | Fix |
|---|-------|-------|-----|
### Passed Checks
A1 ✓, B1 ✓, B2 ✓, ..., F1 ✓, F2 ✓, F6 ✓, ...
### 総評
{1-2行のサマリー}
| Grade | 条件 |
|---|---|
| A+ | P1=0, P2=0, P3≤1 |
| A | P1=0, P2=0, P3≤3 |
| B+ | P1=0, P2≤1 |
| B | P1=0, P2≤3 |
| C+ | P1≤1, P2≤3 |
| C | P1≤2 |
| D | P1≥3 |
motion review mv-composer/src/compositions/AgentCampBrandPV.tsx
Quality Review ステップで channel = TikTok | YouTube の場合、
成果物の Remotion ソースファイルに対してこのスキルを自動実行する。
VERDICT が FIX_REQUIRED の場合、Auto-fix Loop に入る（max 3回）。
レンダリング後に自動で品質チェックし、問題を検出したら修正→再レンダリングを繰り返す。 max 3イテレーションで収束させる。
render and review, レンダリング＆レビュー, 自己改善ループ
[1] Render
npx remotion render src/index.ts {CompositionId} out/{Name}_v{N}.mp4
↓
[2] QA Frame Extraction
VIDEO=out/{Name}_v{N}.mp4
QA_DIR=data/qa_{Name}_v{N}
mkdir -p "$QA_DIR"
DURATION="$(ffprobe -v error -show_entries format=duration -of csv=p=0 "$VIDEO")"
ffmpeg -y -i "$VIDEO" -vf "fps=12/${DURATION}" -frames:v 12 "$QA_DIR/qa_%02d.png"
→ data/qa_{Name}_v{N}/ に12フレーム出力
↓
[3] Visual Review（QAフレーム目視）
Read ツールで各フレームを確認:
- 黒フレーム検出（opacity=0の遷移境界）
- テキスト見切れ・改行崩れ
- 要素重なり・余白不足
- 色彩・視認性の問題
↓
[4] Code Review（20項目チェックリスト）
対象 .tsx ファイルを Read → 本スキルの A1-H8 をチェック
↓
[5] VERDICT 判定
├─ PASS (P1=0) → 完了。ユーザーに結果報告
├─ FIX_RECOMMENDED (P2のみ) → 修正提案をユーザーに提示
└─ FIX_REQUIRED (P1あり) → 自動修正 → Step 1 に戻る（max 3回）
↓
[6] Auto-fix（P1の場合のみ自動実行）
- P1 の修正を .tsx に適用
- v{N+1} としてレンダリング
- 再度 Step 2-5
会話内で以下のように指示:
CCTrend-All をレンダリングしてレビューして
Claude Code が以下を自動実行:
npx remotion render src/index.ts CCTrend-All out/CCTrend-All_v1.mp4ffprobe / ffmpeg コマンドで12枚のQAフレームを抽出npx tsc --noEmit で型チェックdata/qa_{Name}_v{N}/ に世代管理（上書きしない）以下は A グレードの実装で確認された技法一覧。新規コンポジションはこれらを参考にすること:
| 技法 | 実装パターン |
|---|---|
| 文字単位スタッガー | chars.map((c, i) => spring({ delay: i * 4 })) + translateY(30→0) |
| 着地後呼吸 | p > 0.9 ? Math.sin(frame * 0.08) * 0.015 : 0 |
| clipPath ワイプ | clipPath: inset(0 ${x}% 0 0) で右→左に開示 |
| 確定的パンの多様性 | (i * 7 + 3) % 11 で seeded random motion |
| Ken Burns 微ズーム | scale(1.0 → 1.08) over 120 frames |
| Pulsing accent line | 着地後に sin(frame * 0.12) * 3 で幅パルス |
| 全画面フラッシュ | [0,3,8] → [1,0.9,0] で 8 フレームフェード |
| Count-up + pulse | cubic ease-out → 完了後 sin 波 ±3% |
| Blur 背景フォールバック | blur(30px) brightness(1.1) で背景穴埋め |
| 統一退場アニメーション | SceneWrap: zoom-out 6% + fade |
Based on SOC occupation classification
