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

remotion-to-hyperframes

Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition. Use ONLY when the user explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames (e.g. "port my Remotion project to HyperFrames"). Do NOT use when (a) authoring a NEW HyperFrames composition (even if A/B-testing a Remotion video); (b) Remotion is mentioned in passing; (c) Remotion code is shared as reference, not for translation; (d) the user wants "the same video as my Remotion one" without explicitly asking to migrate the source — treat as a fresh HyperFrames build. When in doubt, default to the `hyperframes` skill. Detects unsupported patterns (useState, useEffect side effects, async calculateMetadata, third-party React component libraries, `@remotion/lambda`) and recommends the runtime interop escape hatch instead of a lossy translation.

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

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

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

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して remotion-to-hyperframes.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → remotion-to-hyperframes フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 この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
同梱ファイル
63

📖 Skill本文(日本語訳)

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

[スキル名] remotion-to-hyperframes

RemotionからHyperFramesへ

概要

Remotion（Reactベース）のビデオコンポジションをHyperFrames（HTML + GSAP）のコンポジションに変換します。ほとんどのRemotionのイディオムには直接的なHyperFramesの同等物があり、一般的なコンポジションの約80%は機械的に変換できます。このスキルは、マッピングをエンコードし、HFのシーク駆動モデルに適合しないパターンを変換せず、代わりにPR #214からのランタイム相互運用パターンを推奨することで、失われる可能性のある20%を防ぎます。

このスキルには、階層化されたテストコーパス（T1～T4、合計4つのフィクスチャ）が付属しており、測定されたSSIMしきい値に対して翻訳を評価します。評価を実行せずに翻訳しないでください。「正しく見える」が検証済みのベースラインより0.05 SSIM低いレンダリングは、サイレントに間違っています。

使用するタイミング

このスキルは、ユーザーがRemotionからの移行を明示的に要求した場合にのみ使用してください。 例となるトリガーフレーズ：

  • 「RemotionプロジェクトをHyperFramesに移植してください」
  • 「このRemotionコードをHyperFramesに変換してください」
  • 「Remotionから移行してください」
  • 「このRemotionコンポジションを翻訳してください」
  • 「これをHyperFrames HTMLとして書き直してください」

以下の場合は、このスキルを使用しないでください。

  • (a) ユーザーが新しいHyperFramesコンポジションを作成している場合。たとえ類似のRemotionビデオを持っているか、A/Bテストしている場合でも。
  • (b) ユーザーが移行を要求せずにRemotionに言及した場合。
  • (c) ユーザーが翻訳を要求するのではなく、参考資料としてRemotionコードを共有した場合。
  • (d) ユーザーがソースの移行を明示的に要求せずに「Remotionのビデオと同じビデオ」を要求した場合。これは新しいHyperFramesビルドとして扱ってください。

迷った場合は、代わりにhyperframesスキルを使用してネイティブなHyperFramesコンポジションを作成することをデフォルトとしてください。

ワークフロー

ステップ1: ソースをLintする

Remotionのソースディレクトリに対してscripts/lint_source.pyを実行します。このLintは、きれいに翻訳できないパターンを検出します。

  • ブロッカー（拒否 + 相互運用を推奨）：useState、useReducer、非空のdepsを持つuseEffect/useLayoutEffect、非同期のcalculateMetadata、サードパーティのReact UIライブラリ（MUI、Chakra、Mantine、antd、shadcn、Radix、NextUI）。
  • 警告（構成を削除した後に翻訳）：@remotion/lambda設定、delayRender、useCallback、useMemo、カスタムフック。
  • 情報（メモ付きで翻訳）：staticFile、interpolateColors。

いずれかのブロッカーが発動した場合、停止してください。references/escape-hatch.mdを読み、推奨メッセージを提示してください。警告は翻訳を停止しません。ステップ3で問題のある構成を削除し、TRANSLATION_NOTES.mdにそのギャップをメモしてください。@remotion/lambda設定は典型的な警告ケースです。このスキルはインポートとrenderMediaOnLambda(...)呼び出しを削除しますが、コンポジションの残りの部分は翻訳します。

ステップ2: 翻訳を計画する

references/api-map.mdを読んでください。これは、すべてのRemotion APIとそのHFの同等物、またはトピックごとのリファレンスのインデックスです。ソースが使用しているものに基づいて、どのトピックリファレンスが必要かを特定してください。

ソースに含まれるもの リファレンスを読み込む
Composition、defaultProps、schema、calculateMetadata parameters.md
Sequence、Series、Loop、AbsoluteFill、Freeze sequencing.md
useCurrentFrame、interpolate、spring、Easing、interpolateColors timing.md
Audio、Video、Img、IFrame、staticFile、delayRender media.md
TransitionSeries、@remotion/transitions transitions.md
@remotion/lottie lottie.md
@remotion/google-fonts/<Family>、Font.loadFont、@font-face fonts.md

すべてを読み込むのではなく、特定のソースが必要とするものだけを読み込んでください。

ステップ3: HFコンポジションを生成する

index.htmlを次のように出力します。

  • コンポジションのdata-composition-id、data-start="0"、data-duration（秒単位）、data-fps、data-width、data-height、およびスカラープロパティごとのdata-*を保持するルートの<div id="stage">。
  • data-start / data-duration / data-track-indexを持つシーンdivのフラットリスト。
  • レイアウト用のインライン<style>。CSSはすべてのアニメーションプロパティのfrom状態を設定します。
  • 下部に1つの<script>タグがあり、一時停止されたgsap.timeline({paused: true})が含まれています。すべてのRemotionのuseCurrentFrame()派生は、このタイムライン上の適切なオフセットでトゥイーンになります。
  • window.__timelines["<composition-id>"] = tl;は、タイムラインをHFのランタイムに登録します。

カスタムReactサブコンポーネントは、プロパティインターフェースをテンプレートとして使用して、繰り返されるHTMLとしてインライン化されます（インスタンスごとのdata-*パターンについてはparameters.mdを参照してください）。

ステップ4: 検証

評価ハーネスを実行します。完全なガイドはreferences/eval.mdを参照してください。簡単なパス：

# Remotionベースラインをレンダリング（フィクスチャでnpm install後）
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4

# HF翻訳をレンダリング
cd ../hf-src && npx hyperframes render --output ../hf.mp4

# SSIM差分
../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff

しきい値：ソースの複雑度ティアのp05より約0.02低い値（eval.mdの検証済みしきい値テーブルを参照）。差分が失敗した場合は、scripts/frame_strip.shを実行して、どのフレームが分岐したかを確認し、関連するタイミング/シーケンス/メディアのリファレンスを再読してください。

重要：両方のレンダリングで一致するピクセル形式を使用する必要があります。Remotionソースのremotion.config.tsでConfig.setVideoImageFormat("png") + Config.setColorSpace("bt709")を設定してください。

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

Remotion to HyperFrames

Overview

Translate Remotion (React-based) video compositions into HyperFrames (HTML + GSAP) compositions. Most Remotion idioms have direct HyperFrames equivalents — the translation is mechanical for ~80% of typical compositions. This skill encodes the mapping and guards against the lossy 20% by refusing to translate patterns that don't fit HF's seek-driven model and recommending the runtime interop pattern from PR #214 instead.

The skill ships with a tiered test corpus (T1–T4, 4 fixtures total) that grades translations against measured SSIM thresholds. Don't translate without running the eval — a translation that "looks right" but renders 0.05 SSIM lower than the validated baseline is silently wrong.

When to use

Use this skill ONLY when the user explicitly asks to migrate from Remotion. Example trigger phrases:

  • "port my Remotion project to HyperFrames"
  • "convert this Remotion code to HyperFrames"
  • "migrate from Remotion"
  • "translate this Remotion comp"
  • "rewrite this as HyperFrames HTML"

Do NOT use this skill when:

  • (a) The user is authoring a new HyperFrames composition, even if they have or are A/B-testing a similar Remotion video.
  • (b) The user mentions Remotion in passing without asking for migration.
  • (c) The user shares Remotion code as reference material rather than asking for a translation.
  • (d) The user asks for "the same video as my Remotion one" without explicitly asking to migrate the source — treat that as a fresh HyperFrames build.

When in doubt, default to authoring a native HyperFrames composition with the hyperframes skill instead.

Workflow

Step 1: Lint the source

Run scripts/lint_source.py over the Remotion source directory. The lint detects patterns that can't translate cleanly:

  • Blockers (refuse + recommend interop): useState, useReducer, useEffect/useLayoutEffect with non-empty deps, async calculateMetadata, third-party React UI libraries (MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI).
  • Warnings (translate after dropping the construct): @remotion/lambda config, delayRender, useCallback, useMemo, custom hooks.
  • Info (translate with note): staticFile, interpolateColors.

If any blocker fires, stop. Read references/escape-hatch.md and surface the recommendation message. Warnings don't stop translation — drop the offending construct in step 3 and note the gap in TRANSLATION_NOTES.md. @remotion/lambda config is the canonical warning case: the skill drops the import + renderMediaOnLambda(...) calls but translates the rest of the composition.

Step 2: Plan the translation

Read references/api-map.md — the index of every Remotion API and its HF equivalent or per-topic reference. Identify which topic references you'll need based on what the source uses:

Source contains Load reference
Composition, defaultProps, schema, calculateMetadata parameters.md
Sequence, Series, Loop, AbsoluteFill, Freeze sequencing.md
useCurrentFrame, interpolate, spring, Easing, interpolateColors timing.md
Audio, Video, Img, IFrame, staticFile, delayRender media.md
TransitionSeries, @remotion/transitions transitions.md
@remotion/lottie lottie.md
@remotion/google-fonts/<Family>, Font.loadFont, @font-face fonts.md

Don't load all of them — load only what the specific source needs.

Step 3: Generate the HF composition

Emit index.html with:

  • Root <div id="stage"> carrying the composition's data-composition-id, data-start="0", data-duration (in seconds), data-fps, data-width, data-height, plus one data-* per scalar prop.
  • A flat list of scene divs with data-start / data-duration / data-track-index.
  • Inline <style> for layout; CSS sets the from state of every animated property.
  • A single <script> tag at the bottom containing one paused gsap.timeline({paused: true}). Every Remotion useCurrentFrame() derivation becomes a tween on this timeline at the right offset.
  • window.__timelines["<composition-id>"] = tl; registers the timeline with HF's runtime.

Custom React subcomponents inline as repeated HTML using the prop interface as the template (see parameters.md for the per-instance data-* pattern).

Step 4: Validate

Run the eval harness — references/eval.md for the full guide. Quick path:

# Render Remotion baseline (after npm install in the fixture)
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4

# Render HF translation
cd ../hf-src && npx hyperframes render --output ../hf.mp4

# SSIM diff
../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff

Threshold: ~0.02 below p05 of the source's complexity tier (see eval.md's validated thresholds table). If the diff fails, run scripts/frame_strip.sh to see which frames diverged, then re-read the relevant timing/sequencing/media reference.

Critical: both renders must use matching pixel format. Set Config.setVideoImageFormat("png") + Config.setColorSpace("bt709") in the Remotion source's remotion.config.ts — otherwise the diff measures encoder differences (~0.05 SSIM hit), not translation fidelity.

Step 5: Document gaps

Anything that didn't translate cleanly (volume ramps dropped, custom presentations approximated, fonts substituted) gets a TRANSLATION_NOTES.md written next to the HF output. See references/limitations.md for the format.

What this skill explicitly does NOT do

  • Translate React state machines. Compositions that drive animation via useState + useEffect are not deterministic frame-capture targets in HyperFrames' seek-driven model. Recommend the runtime interop pattern.
  • Run Remotion's render pipeline alongside HyperFrames. That's the runtime interop pattern from PR #214 — a separate solution for compositions that fail this skill's lint.

(@remotion/lambda is not a blocker — Lambda config is deployment, not animation. The skill drops it as a warning and translates the rest. See references/escape-hatch.md.)

How to grade your own translation

Run the test corpus orchestrator:

./assets/test-corpus/run.sh

It runs T1, T2, T3 (render + diff) and T4 (lint validation), prints a per-tier pass/fail table, and emits an aggregate JSON report. Use this to verify the skill is working end-to-end on a clean checkout — and as a regression check after editing any reference.

Validated baseline (as of 2026-04-27):

Tier Composition shape Mean SSIM Threshold
T1 single-element fade-in 0.974 0.95
T2 multi-scene + spring + audio + image 0.985 0.95
T3 data-driven, custom subcomponents, count-up 0.953 0.90
T4 escape-hatch (8 lint cases) 8/8 pass n/a

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。