/create-motion-graphics

name: create-motion-graphics
description: "Use whenever the agent needs to add, create, hand-author, patch, or place Motion Graphic JSX assets in a OpenChatCut project. This is the direct-authoring path: use create_motion_graphic_from_code / edit_asset / edit_item, not motion-graphic-gen or submit_motion_graphic. Covers project/timeline intake, project visual language, editable properties, asset binding, inline JSX authoring, existing asset updates, timeline placement, and verification."

Create Motion Graphics

Use this skill when a OpenChatCut task requires a Motion Graphic asset that the agent will author or patch as inline JSX.

This skill is for direct authoring. Do not translate the request into a Gemini prompt or generation brief, and do not call `submit_motion_graphic`, when this workflow is active.

Even though `submit_motion_graphic` exists in the tool list, treat it as the generation route, not this one. Ignore that path for MG work; use `create_motion_graphic_from_code` for new JSX assets and `edit_asset` for existing MG JSX. If the direct-authoring tools are missing, stop and report that the OpenChatCut tool surface is out of date.

Pass source inline through the asset code tools. Do not stage Motion Graphic code in the OpenChatCut repository, `ai-working/`, `/tmp`, a local HTTP server, generated code files, or guessed backend workspace paths.

Core Principles

• Inspect project state when canvas size, fps, existing visual language, placement, or timeline conflicts are not already known.
• Identify the required inputs in **Before You Code** before authoring JSX.
• Create or update Motion Graphic assets through the available inline-code asset workflow; use current tool schemas for exact payload shapes.
• Place or move assets through the timeline editing workflow when the edit requires timeline placement.
• Re-read project state and verify the visible frame after structural or visual changes.

Before You Code

Before writing JSX, identify only the information needed for this edit:

• **Placement**: start time, duration, target layer if known, and the target frame the graphic must compose with.
• **Role in the edit**: what job this Motion Graphic performs in the video.
• **Content**: exact text, numbers, media, or visual facts that must appear.
• **Timing**: whether internal motion should sync to speech, music, or a visual event.
• **Visual source**: user-provided style, project Design Style, brand colors/fonts, or an accepted existing Motion Graphic.
• **Editable fields**: which text, colors, numbers, booleans, image, or video values should become properties.

Ask only for missing high-leverage inputs that would materially change the result.

Align With The User

You are the junior designer; the user is the manager. Direction is the high-leverage choice — surfacing it before authoring is much cheaper than reauthoring after.

Style alignment gate:

Separate visual direction from batch permission. A user-named text/custom style can choose the direction, but it does not permit multiple MGs until the user has confirmed a representative MG. Batch authoring is permitted only by an active Design Style, a selected visual preset, or a previously accepted representative MG.

• If there is no active Design Style and the user has not named a style, stop before authoring and ask the user to choose a direction.
• Generic quality adjectives are goals, not a named visual style. If the user only says the MGs should feel clean, premium, modern, professional, polished, or similar, offer catalog presets instead of inventing a direction.
• Prefer catalog Design Style presets: call `manage_design_style` with `action: "list"`, present 3-6 reasonable choices, and let the user pick or override.
• Load the `widget-forms` skill and use `ask_followup_questions` with a single-select field of preset names; this build has no preset thumbnails, so concise numbered choices are the standard route.
• You may recommend one choice, but still show the choice set. The point is visual alignment, not a single best guess.
• When it isn't obvious, also ask whether the MG sits over the video as an overlay or takes the whole frame.

Before authoring, choose the branch:

• One MG: use the active Design Style, accepted example, or user-named direction and proceed.
• Multiple MGs with an active Design Style, selected visual preset, or previously accepted representative MG: proceed with a batch design map.
• Multiple MGs with only a textual/custom direction, however clear: create exactly one representative MG, place it, render its composed frame, then stop for confirmation. Do not create a second MG asset or item before the user confirms.
• Multiple MGs with only generic quality adjectives: use the visual preset picker first.

When the task needs visual style alignment, check the active project Design Style first. If there is no active Design Style and the user has not given a clear style direction, use the style alignment gate above.

Saved user design styles are a library, not project confirmation. If `manage_design_style list` shows saved styles but no active project Design Style, do not infer or choose one silently; use `action: "list"` and explicit alignment unless the user selects a saved style or asks you to use one.

Catalog Design Style presets are named starting points with style summaries (no image previews in this build). When no active Design Style or user style is set, first look at the available catalog candidates with `action: "list"` and show 3-6 reasonable starting points as concise numbered choices (name + one-line summary). They do not need to match every detail of the user's request; presets set useful expectations and can be adapted in authoring. Do not force catalog presets when none are reasonably close; use text directions only then.

When using catalog presets, call `manage_design_style` with `action: "list"`. Pick 6 matches using each preset's `description` as agent-facing matchi