
Description
Create a new Remotion video
SKILL.md
These are instructions for making a new Remotion project and composition.
If this is not the next task, see Remotion Best Practices
Scaffold a project
If a project already exists, skip this. Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.
Scaffold one using:
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
Replace my-video with a suitable project name.
Designing a video
Keep the scaffold and add React Markup. Follow Remotion React Markup Best Practices and Video Layout Rules for video-first layout and text sizing guidance.
Is this a multi-scene video?
If this is a video with multiple subsequence videos, follow guidance at Multi-scene videos.
Interactivity Best Practices
By structuring the React Markup following Remotion Interactivity Best Practices, you allow the user to make edits in the Studio which write back to code.
TailwindCSS
If Tailwind is requested, see tailwind.md for using TailwindCSS in Remotion.
Starting preview
npx remotion studio --no-open
This will start a long-running process and print the server URL for the preview.
If server is already started, it will print the URL.
You can visit a specific composition by navigating to /[composition-id], for example http://localhost:3000/MapAnimation.
Follow-up
The video creation process has finished. For follow-up prompts, use Remotion Best Practices
More skills from the skills repository
View all 7 skillsremotion-captions
manage video captions in Remotion
Jul 30RemotionTranscriptionVideoremotion-docs
search Remotion documentation
Jul 30DocumentationReferenceRemotionremotion-maps
animate maps using Remotion
Jul 30AnimationMapsRemotionVideoremotion-markup
write Remotion React markup
Jul 30FrontendReactRemotionVideoremotion-render
render videos with Remotion
Jul 30DeploymentPerformanceRemotionVideoremotion-upgrade
upgrade Remotion projects and dependencies
Jul 21EngineeringMigrationRemotion
More from Remotion
View publisherremotion-best-practices
build programmatic videos with Remotion
remotion
Jul 27AnimationReactRemotionTypeScript +1remotion-interactivity
create interactive Remotion animations
remotion
Jul 30AnimationDesignReactRemotionremotion-multimedia
interact with Mediabunny in Remotion
remotion
Jul 27MediaRemotionVideoremotion-saas
build Remotion-powered SaaS applications
remotion
Jul 27ReactRemotionSaaSVideo +1