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.