Description
remotion-markup is an agent skill from the remotion-dev skills collection that gives guidance for writing Remotion React markup, meaning the content, animation and effects inside a composition. Its general rules cover how to handle timing. Inside a composition or scene component, the agent should take fps from useVideoConfig() for every seconds-to-frames calculation, including props such as from, trimBefore, durationInFrames and premountFor. Keeping the expression on the JSX node, for example trimBefore set to 4 times fps, lets Remotion Studio edit the timing and keeps it correct if the frame rate of the composition changes. The skill also says to preserve user changes: people may edit code outside the conversation, so if the agent sees a surprising change it should not overwrite it, and should assume it was intentional or ask for confirmation. If the work is not about markup, the skill points to the broader Remotion Best Practices guidance. It is installed with the skills CLI, and the skills.sh page showed about 156.1K installs and passing results from three security audits at the time of the scan.…
Highlights
- Guidance for Remotion React content, animation and effects
- Frame timing from useVideoConfig fps
- Timing expressions kept on JSX nodes for Studio editing
- Does not overwrite user edits made outside the chat
- Installs with the skills CLI
Ratings & Reviews
No ratings yet
Be the first to rate remotion-markup.
People also visit
remotion-best-practices
Domain-specific knowledge base for building videos with Remotion and React
remotion-markup FAQ
What does this skill cover?
Writing the React markup of a Remotion composition: its content, animation and visual effects.
How should timing be handled?
Take fps from useVideoConfig() and use it for all seconds-to-frames calculations, such as from, trimBefore and durationInFrames.
Why keep timing expressions on the JSX node?
So Remotion Studio can edit the timing, and the values stay correct if the composition's frame rate changes.
What if I edited the code myself?
The agent is told not to overwrite surprising changes. It assumes they were intentional or asks you to confirm.
How do I install it?
Run npx skills add https://github.com/remotion-dev/skills --skill remotion-markup.
What security audits does it have?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Pass.
What are the best remotion-markup alternatives?
Popular alternatives to remotion-markup include remotion-best-practices, remotion-render and remotion-create. See all remotion-markup alternatives