HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
要在视频上加一段动效图形时用：下横栏（姓名职务）、关键词字幕、大数字与图表、标注与引导、品牌贴片与片尾、倒计时与进度。不选模板，按规则写一个自包含的 HTML 画面（时间的纯函数），打包成代码包导入后放上时间线。只加静态文字、贴纸或已有的文字动画预设时不用；整条成片的规划看「从简报到成片」。
Install Motion Graphics
$ npx skills add JimLiu/baocut --skill motion-graphics -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install JimLiu/baocut motion-graphics --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/JimLiu/baocut.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/motion-graphics .claude/skills/motion-graphics && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "motion-graphics" agent skill from https://github.com/JimLiu/baocut/tree/main/skills/motion-graphics into .claude/skills/motion-graphics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-graphics", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/JimLiu/baocut/tree/main/skills/motion-graphicsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add JimLiu/baocut --skill motion-graphics -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install JimLiu/baocut motion-graphics --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/JimLiu/baocut.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/motion-graphics .agents/skills/motion-graphics && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "motion-graphics" agent skill from https://github.com/JimLiu/baocut/tree/main/skills/motion-graphics into .agents/skills/motion-graphics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-graphics", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add JimLiu/baocut --skill motion-graphics -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install JimLiu/baocut motion-graphics --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/JimLiu/baocut.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/motion-graphics .cursor/skills/motion-graphics && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "motion-graphics" agent skill from https://github.com/JimLiu/baocut/tree/main/skills/motion-graphics into .cursor/skills/motion-graphics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-graphics", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/JimLiu/baocut.git --path skills/motion-graphics--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add JimLiu/baocut --skill motion-graphics -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install JimLiu/baocut motion-graphics --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/JimLiu/baocut.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/motion-graphics .gemini/skills/motion-graphics && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "motion-graphics" agent skill from https://github.com/JimLiu/baocut/tree/main/skills/motion-graphics into .gemini/skills/motion-graphics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-graphics", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install JimLiu/baocut motion-graphicsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add JimLiu/baocut --skill motion-graphics -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/JimLiu/baocut.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/motion-graphics .github/skills/motion-graphics && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "motion-graphics" agent skill from https://github.com/JimLiu/baocut/tree/main/skills/motion-graphics into .github/skills/motion-graphics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-graphics", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add JimLiu/baocut --skill motion-graphics -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install JimLiu/baocut motion-graphics --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/JimLiu/baocut.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/motion-graphics .opencode/skills/motion-graphics && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "motion-graphics" agent skill from https://github.com/JimLiu/baocut/tree/main/skills/motion-graphics into .opencode/skills/motion-graphics/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-graphics", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
motion-graphics- GitHub stars
- 611
- Token cost
- ~1.4k tokens
- SKILL.md length
- 400 words
- Files
- 16 (incl. scripts, references)
- Skills in repo
- 17
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
要在视频上加一段动效图形时用：下横栏（姓名职务）、关键词字幕、大数字与图表、标注与引导、品牌贴片与片尾、倒计时与进度。不选模板，按规则写一个自包含的 HTML 画面（时间的纯函数），打包成代码包导入后放上时间线。只加静态文字、贴纸或已有的文字动画预设时不用；整条成片的规划看「从简报到成片」。
- Works in 6 steps: 定类别与时长 → 骨架与范例 → 填三个槽 → …
- Tasks that involve Motion graphics
- SKILL.md covers 1. 定类别与时长, 2. 骨架与范例, 3. 填三个槽 and 4. 自检, plus 2 more sections
- Calls node
What it does
Motion Graphics is an agent skill from JimLiu/baocut. 要在视频上加一段动效图形时用：下横栏（姓名职务）、关键词字幕、大数字与图表、标注与引导、品牌贴片与片尾、倒计时与进度。不选模板，按规则写一个自包含的 HTML 画面（时间的纯函数），打包成代码包导入后放上时间线。只加静态文字、贴纸或已有的文字动画预设时不用；整条成片的规划看「从简报到成片」。
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files, including scripts and reference files (for example `references/grammar.md` and `references/scaffold.md`).
It sits in Media & Creative, covering Motion graphics. The repository describes itself as: BaoCut: an AI video agent with an editable timeline. Transcribe, subtitle, translate, dub, cut and animate.
When your agent uses it
- Tasks that involve Motion graphics
Example prompts
- “/motion-graphics”
Workflow steps
6 steps, taken from the step headings in SKILL.md.
- 定类别与时长
- 骨架与范例
- 填三个槽
- 自检
- 导入与上时间线
- 验收
What it can do on your machine
Read from SKILL.md and the folder at commit 9ccb7be. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Motion Graphics loads about 1.4k tokens when it runs, and up to ~6k if it reads all its reference files. Until then it costs about 41 tokens; SKILL.md has 400 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 400 words (~1,350 tokens).
“一段动效图形就是一个按时间 seek 的纯函数画面：给它第 t 秒，它画出第 t 秒该有的样子。不从模板库里挑，而是按本 skill 的规则把骨架的三个槽填上：结构（有哪些元素）、布局（放在哪）、动效（每个元素怎么进、停、出）。同一份槽换一行布局就是竖版，换三个颜色 token 就是另一套皮肤。顺序：”
- name
- motion-graphics
- version
- 1.0.0
Files
SKILL.md and 15 other files (scripts, references) in skills/motion-graphics of JimLiu/baocut.
- SKILL.md
- exemplars/big-number/16x9.html
- exemplars/big-number/9x16.html
- exemplars/callout-pin/16x9.html
- exemplars/callout-pin/9x16.html
- exemplars/keyword-caption/16x9.html
- exemplars/keyword-caption/9x16.html
- exemplars/logo-sting/16x9.html
- exemplars/logo-sting/9x16.html
- exemplars/lower-third/16x9.html
- exemplars/lower-third/9x16.html
- references/grammar.md
- references/scaffold.md
- scaffold.html
- … and 2 more
Open the folder on GitHubat commit 9ccb7be
Compare with similar skills
Motion Graphics next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Motion Graphics this skillJimLiu/baocut | 611 | — | ~1.4k | Automated safety check: Pass | Custom licence | |
| HyperFrames Animationheygen-com/hyperframes | 60k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Slack GIF Creatoranthropics/skills | 180k | 29 repos | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills | 8.5k | 6 repos | ~3.2k | Automated safety check: Notes | Apache-2.0 | |
| Faceless Explainer Videoheygen-com/hyperframes | 60k | 3 repos | ~7.7k | Automated safety check: Notes | Apache-2.0 | |
| Video ShotcraftVincentwei1021/video-shotcraft | 11k | — | ~2.6k | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
Slack GIF Creator
anthropics/skills
Provides Slack size and frame limits, Python animation helpers and validators for building animated GIFs sized for emoji and messages.
- Official
Stitch to Remotion Walkthrough Videos
google-labs-code/stitch-skills
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
Faceless Explainer Video
heygen-com/hyperframes
Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.
Video Shotcraft
Vincentwei1021/video-shotcraft
Makes cinematic product videos with Remotion from shot recipe cards, a ready template, real page screenshots, camera moves and sound design, or builds a single animated shot.
Figma to HyperFrames
heygen-com/hyperframes
Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.
More from JimLiu/baocut
All 17 skills in this repoBaocut
JimLiu/baocut
用 BaoCut 处理视频与音频：转录、字幕、翻译、配音、剪口播、切短视频、分章、总结写稿、从链接下载、压缩转码、导出成片，或从零做一条成片。有媒体文件、视频链接、字幕文件或 BaoCut 视频时用；只翻译纯文本、与视频无关的写作或作图、别的剪辑器与 FFmpeg 的用法、BaoCut 源码开发不用。
Bcut Release
JimLiu/baocut
Release BaoCut Electron desktop apps through GitHub Actions tags by default; use local/manual packaging only when explicitly requested.
Talking Head Cut
JimLiu/baocut
一两个人对着镜头说话的录音要剪成能发布的视频时用：去掉口癖、长停顿、录废重来的部分和离题的话，在几遍重录里挑一遍，收紧句间停顿，把最有力的原话挪到开头，再按需要加放大强调、B-roll、竖屏取景和配乐闪避。需要视频的转写。只想从长视频里挑几段短视频时用切短视频。
Titles And Description
JimLiu/baocut
用户要为准备发布的视频起标题、要几个标题候选、再来一批或照某个再来几个，或要写视频简介（视频页标题下的说明文字、章节列表、标签）时用。写给发布视频的人：吸引人，并且每句都由视频兑现。需要视频的转写。不用于给文章起标题等与视频无关的写作。
Video Blog
JimLiu/baocut
用户要把一个视频写成博客文章、公众号或专栏文章、图文稿时用：一篇不看视频也能读明白的完整文章，分作者视角（用户自己的视频，以用户名义发布）与观众视角（别人的视频，带出处的转述）。需要视频的转写。不用于只要摘要要点（用视频内容总结），也不用于与视频无关的写作。
Video Production
JimLiu/baocut
从零做一条完整成片时用：推广短片、知识讲解、故事短片、发布片、资讯快评、数据故事、排版动效，或用户选了场景模板、作品示例说「做一条视频」。简报定下后，先写风格与角色设定、分镜与声音规划，再出参考图，逐镜用素材、生成图片或代码画面做出来，配旁白、混音、导出验收。只转录、加字幕、翻译、配音或剪已有视频时不用。
Related
Categories
Questions about Motion Graphics
What does Motion Graphics do?
要在视频上加一段动效图形时用：下横栏（姓名职务）、关键词字幕、大数字与图表、标注与引导、品牌贴片与片尾、倒计时与进度。不选模板，按规则写一个自包含的 HTML 画面（时间的纯函数），打包成代码包导入后放上时间线。只加静态文字、贴纸或已有的文字动画预设时不用；整条成片的规划看「从简报到成片」。. Motion Graphics is an agent skill from JimLiu/baocut.
When should I use Motion Graphics?
Motion Graphics fits situations like: tasks that involve Motion graphics.
How do I install Motion Graphics in Claude Code?
Run `npx skills add JimLiu/baocut --skill motion-graphics -a claude-code`. Or copy the skill folder (skills/motion-graphics in JimLiu/baocut) into .claude/skills/motion-graphics in your project. Claude Code loads it when a task matches its description.
How do I install Motion Graphics in Codex?
Run `npx skills add JimLiu/baocut --skill motion-graphics -a codex`. Or copy the skill folder (skills/motion-graphics in JimLiu/baocut) into .agents/skills/motion-graphics in your project. Codex loads it when a task matches its description.
Can I use Motion Graphics in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add JimLiu/baocut --skill motion-graphics -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/motion-graphics, .gemini/skills/motion-graphics, .github/skills/motion-graphics and .opencode/skills/motion-graphics in your project.
What does Motion Graphics need to run?
Going by SKILL.md and its folder, Motion Graphics needs the command-line tools its instructions call (node).
Does Motion Graphics access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Motion Graphics safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Motion Graphics use?
Motion Graphics has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Motion Graphics use?
About 1.4k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.7k tokens, read only when the agent opens those files.
What are the alternatives to Motion Graphics?
Skills that share tags, products or a category with Motion Graphics: HyperFrames Animation (heygen-com/hyperframes, 60k stars), Slack GIF Creator (anthropics/skills, 180k stars), Stitch to Remotion Walkthrough Videos (google-labs-code/stitch-skills, 8.5k stars) and Faceless Explainer Video (heygen-com/hyperframes, 60k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Motion Graphics?
JimLiu (a GitHub user) maintains it in JimLiu/baocut, which has 611 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 10, 2026.
Source: JimLiu/baocut on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.