Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From open-agent-hub
Scaffolds a new Remotion video project with create-video, including React markup and TailwindCSS support. Starts Remotion Studio preview.
How this skill is triggered — by the user, by Claude, or both
Slash command
/open-agent-hub:remotion-createThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
These are instructions for making a new Remotion project and composition.
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 i
Replace my-video with a suitable project name.
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.
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 for using TailwindCSS in Remotion.
npx remotion studio --no-open
This will start a long-running process and print the server URL for the preview.
The video creation process has finished. For follow-up prompts, use Remotion Best Practices
npx claudepluginhub guanyang/open-agent-hub --plugin open-agent-hub3plugins reuse this skill
First indexed Jul 12, 2026
Creates production-grade videos with Remotion (React), including animations, audio sync, subtitles, charts, and 3D. Includes project scaffolding and render scripts.
Creates programmatic videos in React using Remotion, covering project scaffolding, React markup and animations, rendering, captions, Studio interactivity, SaaS deployment, and media metadata.
Provides Remotion best practices for video creation in React: animation patterns (useCurrentFrame, interpolate, Easing), proper use of Sequence, staticFile, and media components (Img, Video, Audio). Warns against CSS transitions, Tailwind animations.