Remotion skills help a coding agent organize scenes, timing and assets, then refine the video through preview. Use them for product explainers and motion graphics; the Remotion project performs the final render.
Install and prepare
Create the project, install dependencies and official skills, then start its preview:
npx create-video --yes --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev
Prepare Node.js and a coding agent that can edit files. Existing Remotion projects can install the skills directly; the commands below create a blank project for a first attempt. After starting the preview, open the agent in the same project directory.
Your first task
Enter this in the agent conversation, adapting the files and goal to your task:
Use remotion-best-practices to create a 15-second, 1920×1080 course introduction. Open with “Turn an idea into something you can hold,” show three pottery photographs from public/photos, and finish with a booking message. Plan scenes and timing first, then implement with editable text and asset paths.
Plan the scenes before animation
Divide the fifteen seconds into an opening, work showcase and closing instead of putting all copy on one screen. Give each scene a purpose, assets and approximate duration. If narration is needed, prepare its audio or script before timing the visuals so the final text remains readable.
Let the router select task guidance
The current remotion-best-practices file routes tasks to specialized guidance for creation, captions, maps and rendering. Keep the supporting files through a full installation rather than copying one SKILL.md. Have the agent structure animation around Remotion’s frames and timeline.
Iterate in preview
Check opening readability, image aspect ratios and enough time for the closing action. Give a concrete adjustment, such as a photograph appearing too briefly or a title covering its subject. In dotta’s shared workflow, scripting, brand guidance and video execution were prepared separately—a useful way to organize your own inputs.
Check before delivery
After the preview is approved, ask the agent to render an MP4 using the project’s setup. Open that file to inspect visuals, audio, duration and the final frame; a successfully written file still needs a viewing check.
Common questions
Why did I only get a preview? Preview and rendering are separate; specify the export format and location.
An old tutorial copies one skill file. The current router needs supporting references, so install the complete set.
How long does export take? Resolution, frames, assets and hardware all matter; a single demonstration is not a general timing estimate.
Write a timeline that can be checked
For a fifteen-second course video, define an opening, a photo sequence, and a closing call to action. Ask the agent to list each segment's start and end frame, on-screen copy, and required assets before building the Composition. If narration or captions are added, confirm audio duration and caption source; generated words are not automatically proofread script.
Inspect cuts, cropping, and reading time in Studio, then render a short preview to check the actual output. If export loses a font, image, or audio track despite a correct preview, inspect asset paths and render logs before adjusting animation. Deliver the Remotion source project, assets, render command, and MP4 so future copy or aspect-ratio changes can be made in source. For automated video services or an online player, consult the appropriate specialized guidance rather than treating a local project as a SaaS backend.
Separate Studio preview from the delivered file
Because Remotion keeps timing, captions, and assets editable in code, give feedback with a frame or timestamp: “the subject is cropped at six seconds” or “the closing card lasts less than two seconds.” That lets the agent locate the Composition and asset rather than guessing. Play the rendered file from beginning to end and inspect sync, final frame, and resolution. A working Studio preview does not guarantee an encoded MP4 is identical. Specify target aspect ratios before publishing to different platforms and render those versions from source.