/remotion-create
Create a new Remotion video
$ npx -y skills add guanyang/open-agent-hub --skill remotion-create --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/remotion-create
Context preview
The summary Claude sees to decide when to auto-load this skill.
Create a new Remotion video
SKILL.md
remotion-create.SKILL.mdname: remotion-create
description: Create a new Remotion video
version: 4.0.507
These are instructions for making a new Remotion project and composition. If this is not the next task, see [Remotion Best Practices](../remotion-best-practices/SKILL.md)
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](../remotion-markup/SKILL.md) and [Video Layout Rules](video-layout.md) 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](../remotion-markup/multi-scene-video.md).
Interactivity Best Practices
By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md), you allow the user to make edits in the Studio which write back to code.
TailwindCSS
If Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.
Open the preview
Start the preview server after building the composition:
npx remotion studio --no-open
This 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`.
Render the video
Only render if the user explicitly asks for it.
npx remotion render
For more options, see [Rendering](../remotion-render/SKILL.md).
Follow-up
The video creation process has finished. For follow-up prompts, use [Remotion Best Practices](../remotion-best-practices/SKILL.md)
Read more
name: remotion-create description: Create a new Remotion video version: 4.0.507
These are instructions for making a new Remotion project and composition. If this is not the next task, see [Remotion Best Practices](../remotion-best-practices/SKILL.md)
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](../remotion-markup/SKILL.md) and [Video Layout Rules](video-layout.md) 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](../remotion-markup/multi-scene-video.md).
Interactivity Best Practices
By structuring the React Markup following [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md), you allow the user to make edits in the Studio which write back to code.
TailwindCSS
If Tailwind is requested, see [tailwind.md](tailwind.md) for using TailwindCSS in Remotion.
Open the preview
Start the preview server after building the composition:
npx remotion studio --no-open
This 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`.
Render the video
Only render if the user explicitly asks for it.
npx remotion render
For more options, see [Rendering](../remotion-render/SKILL.md).
Follow-up
The video creation process has finished. For follow-up prompts, use [Remotion Best Practices](../remotion-best-practices/SKILL.md)
A lightweight, zero-dependency CLI tool to manage and activate capabilities for AI coding assistants (such as Claude Code, Cursor, Trae, etc.).
Repo: guanyang/open-agent-hub
Other skills on open-agent-hub.
- /advanced-evaluation
This skill should be used for advanced LLM evaluation: LLM-as-judge systems, direct scoring, pairwise comparison, rubric calibration, evaluator bias mitigation, confidence scoring, and automated quality assessment.
Open skill - /algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing
Open skill - /baoyu-article-illustrator
Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style × Palette three-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
Open skill - /baoyu-comic
Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed panel layouts and batch-capable image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
Open skill - /baoyu-compress-image
Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "compress image", "optimize image", "convert to webp", or reduce image file size.
Open skill - /baoyu-cover-image
Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 11 color palettes and 7 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article
Open skill

