Remotion Video

When the composition needs authorized SFX or audio analysis, ask Earshot through FrameCore Works Toolbox (toolbox:toolbox, in Codex toolbox) when it is in the skill list and follow sound through Toolbox. Keep the Remotion composition and frame clock; use measured sound anchors and return to the same Studio/FrameCut revision. Without it use Studio's sound.py/listen.py, named by the engine that ran.

Use native Superpowers support for React/TypeScript implementation planning, meaningful behavioral tests, render/timing/layout debugging and code review. Preserve the existing composition and engine choices. Verify actual frames and accessible playback before claiming visual completion.

Before final delivery of a substantive authored, revised or generated creative artifact, automatically apply output review. Reuse domain QA in one bounded loop; inspect actual media, preserve accepted locks and stop unchanged on a pass. This does not run for greetings, menus or onboarding questions. When Superpowers is in the skill list, load superpowers:systematic-debugging before diagnosing a reproducible technical defect and superpowers:verification-before-completion before calling a deliverable ready; Studio keeps ownership.

Read Studio integration authority before this method. It defines the active owner map, host capability rules and exceptions to the repository’s installation conventions. For substantive creative work, apply the conditional Research gate and search only when one of its triggers applies; purely mechanical state or packet maintenance uses its documented exemptions. Scale the artifact to the requested stage. Quick pitches remain short; known intent and valid scoped authorization do not need repeated confirmation.

Use this skill to turn an approved video brief, storyboard, or existing Remotion project into a testable code-driven composition. It supports planning on any host and local implementation in an actually shell-capable workspace without adding a permanent agent or activating an external media provider.

Language Policy

Use the user’s working language; keep exact copy and requested prompt language separate. Do not infer language or onboarding status from copied source instructions.

When To Use

Use this skill when:

• The final video should be authored as React or TypeScript code and rendered deterministically.
• A project needs reusable compositions, parameterized variants, data-driven scenes, captions, or repeatable exports.
• Existing Remotion code needs timing, layout, media, render, or maintainability review.
• A storyboard or Creative Video Production Pack must become a Remotion implementation contract.

Use opencut-video-studio for footage-first timeline editing. Use Motion Graphics for general motion planning and HTML/SVG/Canvas/GSAP composition, including HyperFrames when selected. Remotion may be recommended from project requirements and available capabilities without the user naming it; preserve explicit choices and existing project constraints.

Inputs

Required:

• video_contract: objective, audience, duration, aspect ratio, FPS, and delivery format.
• source_truth: approved copy, claims, brand, product, character, and continuity locks.
• scene_plan: ordered beats or scenes with timing intent and observable acceptance criteria.

Optional:

• existing Remotion project, package versions, composition IDs, props schema, storyboard, media manifest, captions, audio plan, visual references, export matrix, and prior render evidence.

Outputs

Produce one or more of:

• Remotion Production Brief
• composition and props architecture
• scene, sequence, and frame timing map
• implementation or repair plan
• React/TypeScript composition changes when a writable project is available
• preview, still, or render verification evidence when commands actually run
• render QA report, asset manifest updates, and delivery notes

Use templates/remotion-production-brief.md for nontrivial work. For a new 2D project, start from the kinetic type starter: it reads the shared motion-score.json contract, uses the motion craft easing and timing presets and includes a dependency-free contract check. Read references/remotion-implementation-notes.md before implementing or reviewing Remotion code.

For code-based motion graphics, kinetic typography, animated diagrams or brand motion, also use the shared storyboard → build → review method. Reuse its versioned frame/Style Lock contract, exact-copy and asset ledger, approval evidence, three stage prompts and QA record. Keep the installed Remotion APIs and one shared QA budget; do not restart onboarding for an approved build.

For a product packshot in 3D, start from the glTF product turntable with the client's approved model. For other 3D, use the Three.js/R3F example and runtime cards. D3 data geometry, approved Lottie assets and rendered Manim clips keep this composition owner and Remotion frame/export authority. See toolkit routing before adding a dependency.

For motion quality and execution technique once the idea is chosen, use quality direction and the prompt library, whose Opus 5.5 gallery includes many Remotion films; credit the creator and never paste a source prompt. Preserve Remotion frame/export authority and current approvals; optional sound/material adapters do not add another clock.

Process

1. Confirm whether the task is planning-only, implementation, repair, review, or render verification.
2. Inspect the existing project, installed Remotion version, package manager, composition registry, scripts, asset layout, and repository instructions before changing code.
3. Lock the composition contract: ID, width, height, FPS, duration, input props, defaults, output codec or container, and required variants.
4. Convert the approved scene plan into named components and explicit frame ranges. Keep editorial timing separate from reusable visual components.
5. Drive animation from Remotion's frame and video configuration APIs. Use deterministic interpolation or spring behavior instead of browser-time CSS animation.
6. Route local assets through the project asset convention, validate media availability, and preserve approved copy, captions, logos, product details, and continuity anchors.
7. Implement the smallest coherent composition or patch. Preserve the project's versions and conventions instead of rewriting the scaffold.
8. Verify representative frames, scene boundaries, captions, audio sync, safe zones, and required variants. Run a full render only when the environment supports it and the user requested implementation or rendering.
9. Record commands actually run, output paths, failed checks, bounded repair targets, and final delivery status.

Decision Rules

• Use Remotion when deterministic React/TypeScript composition, reusable props, data-driven variants, or code reviewability is a primary requirement.
• Use a storyboard or creative-video-producer first when story, shot order, timing intent, copy, or asset authority is unresolved.
• Use caption-studio when subtitle segmentation, timing, styling, safe zones, or caption QA needs dedicated work.
• Use asset-manifest before rendering when source files, versions, rights, or output naming are unclear.
• In an existing project, prefer its installed Remotion APIs and package versions. Check current official documentation before introducing an API that is absent from the project.
• In a chat-only environment, return the brief, architecture, code guidance, and QA plan; do not claim files, previews, or renders were created.
• A local preview is evidence for interaction and representative frames. A successful final render and inspected output are separate acceptance checks.

Guardrails

• This skill does not activate external providers, hosted rendering, uploads, API keys, publishing, or global installs.
• Do not scaffold a new project, install dependencies, start a server, or render unless the active environment permits it and the task requires execution.
• Do not use unseeded randomness, wall-clock time, CSS transitions, or CSS keyframe animation for render-critical motion.
• Do not fetch private assets through remote URLs or expose tokens, signed URLs, cookies, credentials, or local absolute paths.
• Do not invent media rights, font licenses, music clearance, trademark approval, or Remotion license compliance. Record unresolved rights or licensing questions.
• Do not claim Studio, still, render, or media verification passed without command output or inspected artifacts.
• Keep the patch scoped to the requested composition and avoid unrelated framework upgrades.

Handoff

Review gate: execution_manifest_fit, followed by post_execution_fit when preview or render outputs exist.

Hand off through existing workflow roles with:

• task_mode
• composition_contract
• project_and_version_state
• scene_timing_map
• props_and_variant_schema
• asset_and_caption_plan
• implementation_scope
• commands_run
• preview_or_render_evidence
• qa_status
• loopback_target
• delivery_outputs
• known_limitations

FrameCut handoff

For FrameCut, honor the requested stage: before its storyboard is accepted, produce designed still states and motion notes for the full-sequence contact sheets. A video sample runs only on user request or acceptance of an offer. Final rendering follows acceptance of the current complete board; a brief, delegated style choice or local sample acceptance cannot substitute. Return creative changes to FrameCut's board revision loop; keep technical repairs faithful to the accepted design. Still rendering does not require a video sample or a second intake.

For a FrameCut job, reuse its working agreement and motion-request. Return the local composition at origin 0, exact frame count/FPS, dimensions and alpha convention, plus the authoring contract, original request and actual review/limitations. FrameCut verifies the return with attach-motion --request and owns global placement and delivery. Do not restart intake, silently stretch a changed request or create a second global timeline.

QA Checklist

• Composition ID, dimensions, FPS, duration, props, and required variants are explicit.
• Scene boundaries and nested timing are frame-accurate and free of accidental gaps or overlaps.
• Motion is driven by frame state and remains deterministic across preview and render.
• Text, captions, logos, products, characters, and source-truth locks remain legible and consistent.
• Assets resolve through the project's declared asset path and missing media fails visibly.
• Representative first, middle, transition, caption, and final frames were checked when execution occurred.
• Audio, captions, transitions, and scene changes agree with the timing map.
• The report distinguishes planned work, implemented code, preview evidence, and completed renders.
• Failed checks have a minimal repair target and regression check before delivery.