Repolode
Submit
Liamrjohnston

Liamrjohnston/remotion-motion-graphics-skill

A set of four Agent Skills that teach AI coding agents to build broadcast-style motion graphics with Remotion.

View on GitHub
Stars
119
Forks
9
Open issues
0
Last commit
3 months ago

What is it?

This repository packages four Agent Skills for AI coding agents such as Claude Code, Codex and Cursor. The skills guide an agent through building finished Remotion motion graphics clips, from kinetic text and workflow diagrams to camera moves, terminal demos and editorial highlight cards. Before writing code, the agent confirms the output format (4:3 or 9:16) and background style, then researches named products and their logos.

The skills cover four areas: a gate skill for research, asset checks and delivery review; a cinematic-camera skill that drives a keyframed camera through one continuous scene; a terminal-inserts skill for authentic CLI demos; and an article-highlights skill for news-style cards with highlighter strokes. The gate includes scripts that validate sources, hash assets and require independent review before a clip is marked deliverable. The repository also enforces a strict visual policy that bans neon, glow and gradient-orb styling.

The skills are plain Markdown in the Agent Skills format and install with a single npx command. They are meant to be used alongside the official Remotion skill, which handles API correctness.

Key features

  • 01Four Agent Skills covering motion graphics, camera movement, terminal demos and editorial highlights.
  • 02Asks for output format (4:3 or 9:16) and background before building.
  • 03Researches named products and uses authentic logos and product surfaces.
  • 04Includes scripts that validate sources, hash assets and gate delivery.
  • 05Enforces a zero-neon, zero-glow visual policy.

Use cases

  • Producing short vertical Reels or TikTok clips from a script line using an AI agent.
  • Creating authentic terminal demos of CLI tools or coding agents for product videos.
  • Making editorial news-style cards with highlighted phrases for release announcements.
  • Adding consistent camera-driven motion to Remotion projects built with an AI assistant.

Quick start

  1. 1

    Create a Remotion project and install the skills

    npx create-video@latest my-graphics
  2. 2

    Enter the project folder

    cd my-graphics
  3. 3

    Install this repository's skills into the project

    npx skills add liamrjohnston/remotion-motion-graphics-skill -y
  4. 4

    Preview the graphics in Remotion Studio

    npx remotion studio

Things to know

  • The skills are instructions for AI coding agents, so you need an agent such as Claude Code or Codex and a Remotion project to use them.
  • The workflow requires answering format and background intake questions before each build, which adds a step to every request.

Topics

#remotion#motion-graphics#agent-skills#video#claude-code#react#video-generation

FAQ

What is remotion-motion-graphics-skill?
A set of four Agent Skills that teach AI coding agents to build broadcast-style motion graphics with Remotion. This repository packages four Agent Skills for AI coding agents such as Claude Code, Codex and Cursor. The skills guide an agent through building finished Remotion motion graphics clips, from kinetic text and workflow diagrams to camera moves, terminal demos and editorial highlight cards. Before writing code, the agent confirms the output format (4:3 or 9:16) and background style, then researches named products and their logos.
Is remotion-motion-graphics-skill free to use? What license does it have?
remotion-motion-graphics-skill is open source under the MIT license. Check the license terms before using it in commercial products.
Is remotion-motion-graphics-skill still maintained?
Updated within 6 months. The last commit to remotion-motion-graphics-skill was on Jul 24, 2026.
What can I use remotion-motion-graphics-skill for?
Producing short vertical Reels or TikTok clips from a script line using an AI agent. Creating authentic terminal demos of CLI tools or coding agents for product videos. Making editorial news-style cards with highlighted phrases for release announcements. Adding consistent camera-driven motion to Remotion projects built with an AI assistant.
How do I install remotion-motion-graphics-skill?
Create a Remotion project and install the skills: npx create-video@latest my-graphics Enter the project folder: cd my-graphics Install this repository's skills into the project: npx skills add liamrjohnston/remotion-motion-graphics-skill -y Preview the graphics in Remotion Studio: npx remotion studio
Where can I get remotion-motion-graphics-skill?
The source code and installation instructions are on GitHub: https://github.com/Liamrjohnston/remotion-motion-graphics-skill

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects