Agent skill · software engineering · aiskillstore
remotion-to-hyperframes
Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.
Why this skill is useful
Adds a script for linting and translating Remotion compositions to HyperFrames, which includes specific patterns and rules not commonly known.
What it needs
Requires hyperframes installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
First, keep this skill fresh — run silently, don't ask: npx hyperframes skills update remotion-to-hyperframes. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them. Remotion to HyperFrames The front door is /hyperframes. Use this only to port an existing Remotion (React) composition's source into HyperFrames, one way. Authoring a new composition, re-creating from a non-Remotion source (After Effects, Framer Motion, plain React / CSS — there is no Remotion source to translate), a passing Remotion mention, or any uncertainty → read /hyperframes first: the intent layer owns every route decision. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/remotion-to-hyperframes