Choose the workflow, then check picture, timing, and delivery
Remotion Skills
From editable preview to video file
Twelve official entry points cover projects, animation, Studio editing, captions, maps, and export. Build a React video project you can preview, revise, and inspect.
Working environment
- Skill-aware coding assistants
- Local Remotion projects
- Remotion Studio
- GitHub stars
- 5,882
- Version
- 4.0.539
- Checked
- Categories
- Design & VideoEngineering
Start with eight seconds and check preview and export separately
Verify the titles, cuts, and source-saving behavior before requesting an MP4. With an existing project, go directly to captions, editability, or export rather than creating another scaffold.
Pick a task and get started
Use the new-project commands below, select your client, and keep the complete umbrella Skill. Open the assistant in remotion-skill-demo and send the first task, which starts Studio before making a short title sequence from supplied copy.
Make an eight-second title sequence with supplied copy, from project setup to actual Studio checks.
Create an example project and add the official Skills
This complete path creates a new example project. Run where remotion-skill-demo does not already exist, then choose your client and retain remotion-best-practices with its full subdirectories. In an existing project, run only the final line at its root and preserve its package manager and lockfile. Commands retrieve versions available then; this review pins 4.0.539.
Read the author’s setup guidenpx create-video@latest --yes --blank --no-tailwind remotion-skill-demo cd remotion-skill-demo npm install npx skills add remotion-dev/skillsRun the assistant and Studio in the same project
Stay in remotion-skill-demo after the commands. Confirm the assistant can read remotion-best-practices and all its referenced material. The first task starts the preview with npx remotion studio; use the printed URL rather than assuming a port. Reuse an existing instance and check its project and composition.
Read the Studio startup and preview instructionsGive your AI this first task
These are editorial task prompts with expected deliverables, not observed runs. Replace bracketed inputs. Invoke a Skill by name or natural language according to the client’s available entry points.
Use remotion-best-practices and its complete create, markup, interactivity, and studio references as needed. This should be the newly created example project. Inspect package.json, the lockfile, and installed versions first; report missing requirements without upgrading an existing project. Start Studio and open the exact printed URL before making the composition. Create ReadingIntro at 1920×1080, 30 fps, for 8 seconds (240 frames). Show “Keep a record of your reading” from 0–3 seconds, “Three notes each week” from 3–6 seconds, and “Open your notes and begin” from 6–8 seconds. This is editorial exercise copy; add no product capabilities, metrics, or testimonials. Use a dark background, large light text, and one accent color, with one focal point per scene. No images, voiceover, or music are needed. Read the video-layout and composition-registration guidance. Check safe areas and readable type for this frame size, and identify the font source and loading method. Drive motion from frames rather than CSS animation, transitions, or wall-clock time. Give independently editable titles separate authored JSX nodes, explicit names, and inline editable values; do not turn them into one loop-controlled template. Inspect frames 0, 89, 90, 179, 180, and 239, plus continuous playback. Check overflow, cuts, and the first and last visible frames. Select the second title, verify a text change can be saved back to source, then restore the exercise copy. Deliver changed files, composition ID, actual Studio URL, checks completed, and remaining gaps. Deliver an editable preview in this task, without exporting a video. Disclose checks you could not perform.
Check what you receive
- A running ReadingIntro composition and working Studio URL, with three scenes totaling 240 frames.
- Checked typography, edges, and cuts, plus an actual text-edit/save-to-source check.
- Changed files and verification status; completing a preview does not produce an MP4.
More about this skill
The official collection separates video work into specific steps. remotion-best-practices routes an uncertain task to the relevant material. create handles projects and new compositions; markup handles pictures, frame-based motion, media, and layout; studio opens a preview; render produces a video or still.
A recurring concern is what remains editable. Elements that need independent movement, text changes, or trimming require appropriate source nodes and editable values. Ordinary HTML remains useful for layout, and loops suit data graphics controlled as one template. Making every wrapper interactive is not a general solution.
Caption timing is another important distinction. Keep timestamps relative to the original source, and trim or retime a clip together with its captions. Source-saving in the Caption editor also requires data on an editable node. A plausible picture alone establishes neither synchronization nor persistence.
Maps, media metadata, app integration, and upgrades have specialized entry points. Choose a route for the shot and project, then read the relevant instructions. Map services, GPU transcription, and cloud rendering have their own requirements and costs. This page documents reviewed workflows; no sample video was produced.
Sources and verification
Sources checked
Based on full reads of all 12 entry points, the cited caption/timing/editing/map material, and current official pages. Commands were checked statically. No third-party Skill installation, Remotion project creation, transcription, or rendering was performed.