Introduction to Remotion Agent Skills
- The video introduces Remotion's new Agent Skills feature.
- It enables making videos just by prompting AI agents like Claude Code.
- The initial demonstration shows a fully animated video created through prompting.
Setting Up a Remotion Project
- Create a folder for the project.
- Inside the folder, run
bun create video. - Select the "Blank" template and opt to add Tailwind CSS.
- Install dependencies by running
bun i. - Start the Remotion Studio by running
bun dev, which opens a local server (e.g.,localhost:3000). - If the Studio opens to a gray area, click on the "MyComp" composition to view the canvas.
Adding Agent Skills
- Install Remotion-dev/skills by running
bunx skills add remotion-dev/skills(ornpx skills add remotion-dev/skills). - Select "Claude Code" from the list of agents to install its skills.
Prompting Claude Code for Video Generation
- Run Claude Code via the terminal (e.g.,
claude --ddas dangerously-skip-permissions). - Initial Prompt: Instruct Claude to "create a web window interface that is opened inside of a YouTube video (Leonard Grigorje channel), the video shows the Claude Code terminal interface (like the image, but without my email) and it starts typing in 'This is way too cool'."
- A screenshot of the Claude terminal is provided as visual context for the AI.
- Claude Code then proceeds to generate code for the video based on the prompt.
- The Remotion Studio updates to show the generated animation, including a YouTube header, search bar, video player, and the Claude Code terminal typing animation.
Iterative Refinement and Debugging
- Issue 1: Multiple
npm run devinstances: Claude tried to runnpm run devagain, causing issues. The presenter instructed Claude: "don't run npm run dev as it is already running, and don't use npm use bun." - Refinement 1: Adding user interaction: The presenter provided a new prompt: "Make sure that at the end when its done typing 'This is way too cool!', it seems as if the user is scrolling down inside the YouTube page and it shows a cursor clicking on the like button then on the subscribe button."
- The video is updated to include scrolling and a cursor, but the cursor position is inaccurate.
- Refinement 2: Correcting cursor position: A screenshot of the incorrect cursor position is sent to Claude with the prompt: "the cursor should be bigger and it isn't exactly on top of the buttons."
- Claude adjusts the cursor's size and positioning, leading to a more accurate animation of clicking the like and subscribe buttons.
Conclusion
- The presenter expresses excitement about the ability to build complex animations by conversing with an AI agent.
- Highlights Remotion's potential and encourages viewers to explore the platform and the provided GitHub links for prompt references and example code.