motion-graphic-gen

Create and refine Remotion-compatible motion graphics for video projects.

751|69|Updated Jun 25, 2026
One-click install
npx skills add https://github.com/ChatCut-Inc/agent-plugin --skill motion-graphic-gen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: motion-graphic-gen
Source: https://github.com/ChatCut-Inc/agent-plugin/tree/main/claude/skills/motion-graphic-gen
Command: npx skills add https://github.com/ChatCut-Inc/agent-plugin --skill motion-graphic-gen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill turns motion-graphic ideas into production-ready animated assets while reducing uncertainty around visual direction, layout, timing, code generation, debugging, and editor placement.

Core Features & Use Cases

  • Visual Direction Alignment: Helps choose or confirm an aesthetic direction, coverage mode, background treatment, and project-level design language before generation.
  • Motion Graphic Generation: Composes structured briefs for AI generation, supports style and template references, coordinates role anchors for consistent batches, and tracks background jobs.
  • Editing and Debugging: Guides modification of existing motion-graphic code, editable property schemas, animation fixes, masking and compositing fallbacks, font handling, asset conversion, and in-editor review.
  • Use Case: Create a branded lower-third overlay, reuse its accepted visual system for several speakers, then inspect and repair the generated animation if it flickers or renders incorrectly.

Quick Start

Use the motion-graphic-gen skill to create a polished transparent lower-third motion graphic for the current video using the requested text and project style.

Frequently Asked Questions about motion-graphic-gen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a branded lower-third overlay for a video project?

To create a lower-third overlay, you provide a structured brief with text and project style. The system then generates production-ready, transparent motion graphics using valid Remotion-compatible JSX.

How can I fix motion graphics that flicker or render incorrectly in Remotion?

To fix flickering or incorrect rendering in motion graphics, you can use the system's editing and debugging features. It guides code modification, animation fixes, masking fallbacks, and in-editor visual verification.

Does motion graphic generation support batch consistency for multiple speakers?

Yes, motion graphic generation supports batch consistency by coordinating role anchors. This allows you to reuse an accepted visual system across several speakers while maintaining a unified design language.

What is the best way to align visual direction before generating animated title cards?

The best way to align visual direction for title cards is to confirm the aesthetic direction, coverage mode, and background treatment first. This establishes a project-level design language before generation.

Can I convert animated assets into transparent videos for video editing?

Yes, you can convert animated assets into transparent videos. The system supports transparent-video conversion alongside asset generation, ensuring safe references and editable property schemas for video editing.