Agent Skills › ChatCut-Inc/agent-plugin › create-motion-graphics

create-motion-graphics

GitHub

指导在ChatCut环境中通过内联JSX直接创建、编辑和放置动态图形资产，强调使用专用工具而非生成器，确保内容可编辑并遵循设计约束。

claude/skills/create-motion-graphics/SKILL.md ChatCut-Inc/agent-plugin

Trigger Scenarios

需要在ChatCut中创建新的动态图形JSX代码需要修改现有的动态图形JSX资产

Install

npx skills add ChatCut-Inc/agent-plugin --skill create-motion-graphics -g -y

More Options

Non-standard path

npx skills add https://github.com/ChatCut-Inc/agent-plugin/tree/main/claude/skills/create-motion-graphics -g -y

Use without installing

npx skills use ChatCut-Inc/agent-plugin@create-motion-graphics

指定 Agent (Claude Code)

npx skills add ChatCut-Inc/agent-plugin --skill create-motion-graphics -a claude-code -g -y

安装 repo 全部 skill

npx skills add ChatCut-Inc/agent-plugin --all -g -y

预览 repo 内 skill

npx skills add ChatCut-Inc/agent-plugin --list

SKILL.md

Frontmatter

{
    "name": "create-motion-graphics",
    "description": "Create, patch, or place direct-authored Motion Graphic JSX through the Codex ChatCut tool surface."
}

Create Motion Graphics

Codex's ChatCut workbench uses direct-authored Motion Graphics. It exposes create_motion_graphic_from_code instead of the paid submit_motion_graphic generator, so do not load or imitate the generator-only motion-graphic-gen workflow.

Before authoring, establish the content, intended timeline span, overlay versus full-frame role, and visual direction. Check the active Design Style and relevant composed frame when available. If style is unspecified and materially affects the result, use the widget-forms host adapter to align first.

Use create_motion_graphic_from_code for a new asset and edit_asset for existing JSX. Pass source inline through the tool; do not stage JSX in repository files, temporary files, local servers, or guessed backend workspaces. Follow the current tool descriptions for the full direct-authoring, natural-box, editable-property, and visual-mechanism constraints.

Keep visible text, colors, fonts, numbers, and media references editable when users may reasonably change them. Use renderer-supported fonts and project asset properties rather than hardcoded local fonts or media URLs. Give overlays a natural asset box; use timeline dimensions only when the design intentionally spans the frame.

Place or update timeline instances with edit_item. Re-read the affected item and inspect composed settled frames before claiming the graphic looks correct. A successful asset or timeline mutation is not visual proof.

For batches, make one representative graphic first unless the user already confirmed an active Design Style, preset, or accepted role anchor. Reuse an asset only for an intentionally recurring component with the same viewer task and information structure; shared palette or typography alone is not a reason to reuse one asset.