remotion-dev/skills · Official
Create a new Remotion video
npx skills add remotion-dev/skills --skill remotion-create
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working …
1.4K installsBest practices for Remotion - Video creation in React
1.2K installsPort an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an exp…
264.1K installsBest practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, an…
7.8K installsRender videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supp…
3.2K installsPartner security reviews for this skill.
Analyzed Aug 18, 2026
The skill is safe. It provides standard instructions for scaffolding and managing a Remotion video project using the official Remotion development tools and following best practices.
Analyzed Aug 18, 2026
No issues detected.
Analyzed Aug 18, 2026
0 alerts
Other skills from remotion-dev/skills · top by installs.
npx skills add remotion-dev/skills
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
main
Parsed from SKILL.md frontmatter.
Files included with this skill beyond the listing page.
SKILL.md
1,856 B
SUMMARY.md
50 B
Tutorials, guides, and showcases specifically about this skill.
These are instructions for making a new Remotion project and composition. If this is not the next task, see Remotion Best Practices
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 iReplace my-video with a suitable project name.
Keep the scaffold and add React Markup. Follow Remotion React Markup Best Practices and [Video Layout Rules](video-layout.md) for video-first layout and text sizing guidance.
If this is a video with multiple subsequence videos, follow guidance at Multi-scene videos.
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.
If Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.
Start the preview server after building the composition:
npx remotion studio --no-openThis will start a long-running process and print the server URL for the preview. If the server is already started, it will print the URL. If an in-harness browser is available, open it there. You can visit a specific composition by navigating to /[composition-id], for example http://localhost:3000/MapAnimation.
Only render if the user explicitly asks for it.
npx remotion renderFor more options, see Rendering.
The video creation process has finished. For follow-up prompts, use Remotion Best Practices