remotion-to-hyperframes
installsforks
How to install remotion-to-hyperframes?
calesthio/openmontage/remotion-to-hyperframes
$npx -y skills add calesthio/OpenMontage --skill remotion-to-hyperframesPort an existing Remotion (React) composition to HyperFrames HTML. Use ONLY when the user explicitly asks to port/convert/migrate/translate a Remotion source. Do NOT use: (a) authoring a new HyperFrames composition; (b) Remotion mentioned in passing; (c) Remotion code shared as r
SKILL.md
| 1 | # Remotion to HyperFrames |
| 2 | |
| 3 | > **Confirm the route before you build.** Use this **only** to port an existing **Remotion** (React) composition's source into HyperFrames. Authoring a **new** composition (even one inspired by a Remotion video) → the creation workflows / `/general-video`. **Out of scope** (one-way, Remotion-only): no reverse export (HyperFrames → Remotion or any framework), and a **non-Remotion** source (After Effects, Framer Motion, plain React / CSS) has no Remotion source to translate → re-create via `/general-video`. Unsure, or only a passing Remotion mention? **Read `/hyperframes` first.** |
| 4 | |
| 5 | ## Overview |
| 6 | |
| 7 | 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](https://github.com/heygen-com/hyperframes/pull/214) instead. |
| 8 | |
| 9 | 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. |
| 10 | |
| 11 | ## When to use |
| 12 | |
| 13 | **Use this skill ONLY when the user explicitly asks to migrate from Remotion.** Example trigger phrases: |
| 14 | |
| 15 | - "port my Remotion project to HyperFrames" |
| 16 | - "convert this Remotion code to HyperFrames" |
| 17 | - "migrate from Remotion" |
| 18 | - "translate this Remotion comp" |
| 19 | - "rewrite this as HyperFrames HTML" |
| 20 | |
| 21 | **Do NOT use this skill when:** |
| 22 | |
| 23 | - (a) The user is authoring a **new** HyperFrames composition, even if they have or are A/B-testing a similar Remotion video. |
| 24 | - (b) The user mentions Remotion in passing without asking for migration. |
| 25 | - (c) The user shares Remotion code as reference material rather than asking for a translation. |
| 26 | - (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. |
| 27 | |
| 28 | **NOT SUPPORTED (decline — this is not what this skill does):** |
| 29 | |
| 30 | - **The reverse direction.** Exporting a HyperFrames composition back out _to_ Remotion (or to any other framework) is not a workflow — the translation is Remotion → HyperFrames only. Say so plainly. |
| 31 | - **Non-Remotion sources.** An After Effects project (`.aep`), a Framer Motion / plain-React / CSS animation, or any other tool's source is not a Remotion composition — there is no Remotion source to translate. Re-create it natively via `/general-video`, or decline if HyperFrames can't represent it. |
| 32 | |
| 33 | When in doubt, default to authoring a native HyperFrames composition with `/general-video` (the general HyperFrames authoring flow) instead. |
| 34 | |
| 35 | ## Workflow |
| 36 | |
| 37 | ### Step 1: Lint the source |
| 38 | |
| 39 | Run [`scripts/lint_source.py`](scripts/lint_source.py) over the Remotion source directory. The lint detects patterns that can't translate cleanly: |
| 40 | |
| 41 | - **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). |
| 42 | - **Warnings** (translate after dropping the construct): `@remotion/lambda` config, `delayRender`, `useCallback`, `useMemo`, custom hooks. |
| 43 | - **Info** (translate with note): `staticFile`, `interpolateColors`. |
| 44 | |
| 45 | If any blocker fires, **stop**. Read [`references/escape-hatch.md`](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. |
| 46 | |
| 47 | ### Step 2: Plan the translation |
| 48 | |
| 49 | Read [`references/api-map.md`](references/api-map.md) — the index of every Remotion API and its |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
