create-motion-graphics
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.
Profile →npx skills add 0xsline/OpenChatCut --skill create-motion-graphics --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Allows an agent to directly author or patch Motion Graphic JSX assets for an OpenChatCut project using inline-code asset workflows. It instructs to use the direct-authoring path (not motion-graphic-gen or submit_motion_graphic) and to pass source inline through asset code tools. It covers intake, visual language, editable properties, asset binding, inline JSX authoring, updates, timeline placement, and verification.
How it works
- Do not use submit_motion_graphic when this workflow is active; for new JSX assets use
create_motion_graphic_from_code, and for existing assets useedit_asset. - If the direct-authoring tools are missing, report that the OpenChatCut tool surface is out of date.
- Pass the source inline through the asset code tools; avoid staging code in the repo or other temporary/workspace paths.
- Before coding, identify inputs under Before You Code: placement (start/duration/target layer/frame), role, content, timing, visual source, and editable fields.
- Align with the user and design language: evaluate active Design Style or catalog presets, and decide on batch vs. single MG strategy with proper gating.
- Choose the visual mechanism and placement based on the content and viewer task, updating palette, typography, motion, and materials accordingly.
- Expose editable properties for user-facing values and ensure assets reference registered images/videos via item.props.
- After changes, re-read project state and verify the frame after edits.
When to use it
Use when a task requires authoring or patching a Motion Graphic JSX asset directly in OpenChatCut, and when the update does not belong to the generator path (motion-graphic-gen) or submission path (submit_motion_graphic). Use this path for new JSX assets or existing MG updates, and fall back if direct tools are missing.
What it can touch
- Inline JSX asset code via
create_motion_graphic_from_codeandedit_assetfor MG assets. - Project asset bindings and editable properties defined in the design system.
- Timeline placement and frame composition according to the project timeline and visual language.
Caveats
- If the direct-authoring tools are missing, report tool surface out of date.
- Do not stage Motion Graphic code outside allowed inline workflows; avoid writing to temporary or local paths.
- License: AGPL-3.0
# 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; us
- Core Principles
- Before You Code
- Align With The User
- Project Visual Language
- Visual System And Placement
- Editable Properties
- Fonts
- Assets
- Design Principles
- Text Layout Safety
- Motion Graphic Code Contract
- Placement And Review
- Asset And Timeline Flow
- Create A New Asset
What does the create-motion-graphics skill do?
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.
How do I install it?
Run `npx skills add 0xsline/OpenChatCut --skill create-motion-graphics --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From 0xsline/OpenChatCut, a repository with 805 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.