← All skills
motion-graphics
65 / 100 · Review before installing
Check before installing. Some of what it can do is expected: a coding skill usually runs build and test commands.
By coco-research/coco (GitHub) · coding · 628 stars · scanned at commit a9d6167
Use when the user wants a short, design-led, unnarrated motion graphic: kinetic type, stat count-up, chart hit, logo sting, lower-third, animated map, or UI animation. Longer or narrated: /general-video. Unclear: /hyperframes.
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 19 places.
Show 16 more
- systems/hyperframes/skills/motion-graphics/SKILL.md, line 115
Dispatch a subagent. prompt = full `agents/builder.md` + dispatch context (`shot-plan.json`, `catalog-map.md`, the category's `module.md`, `references/motion-vo - systems/hyperframes/skills/motion-graphics/SKILL.md, line 120
(cd "$PROJECT_DIR" && npx hyperframes lint .) - systems/hyperframes/skills/motion-graphics/SKILL.md, line 121
(cd "$PROJECT_DIR" && npx hyperframes check .) - systems/hyperframes/skills/motion-graphics/SKILL.md, line 122
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>) - systems/hyperframes/skills/motion-graphics/SKILL.md, line 132
(cd "$PROJECT_DIR" && npx hyperframes preview) - systems/hyperframes/skills/motion-graphics/SKILL.md, line 138
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4) - systems/hyperframes/skills/motion-graphics/agents/builder.md, line 9
- `npx hyperframes add <block>` (registry) → customize in place. Most blocks bake content/data into their own script (only a few expose CSS-var params), so reus - systems/hyperframes/skills/motion-graphics/agents/finalize.md, line 11
1. **Snapshots** — run `npx hyperframes snapshot --at <proof-times>` and inspect overflow, off-canvas content, text collisions, empty frames, wrong content, and - systems/hyperframes/skills/motion-graphics/agents/finalize.md, line 13
3. **Recheck** — rerun `npx hyperframes lint`, `npx hyperframes check`, and the affected snapshots. Return the result to the orchestrator without rendering. - systems/hyperframes/skills/motion-graphics/catalog-map.md, line 3
The Builder's **default is to compose existing HF catalog blocks, not hand-author.** `npx hyperframes add <block>` drops a block's source into `compositions/`; - systems/hyperframes/skills/motion-graphics/catalog-map.md, line 29
- `npx hyperframes add <block>` → source lands in `compositions/<block>.html`; inline it or reference via `data-composition-src`; customize content/data/palette - systems/hyperframes/skills/motion-graphics/categories/charts/module.md, line 17
Reuse `data-chart`: `npx hyperframes add data-chart` → edit the data arrays + scales + headline/labels + palette in place (its data is baked in the script, not - systems/hyperframes/skills/motion-graphics/categories/kinetic-type/module.md, line 17
- Prefer a **`caption-*` block** when one fits (`caption-kinetic-slam` / `caption-editorial-emphasis` / …): `npx hyperframes add` + set words / `emphasis_words` - systems/hyperframes/skills/motion-graphics/categories/maps/bake-basemap.mjs, line 56
" npx puppeteer browsers install chrome-headless-shell", - systems/hyperframes/skills/motion-graphics/categories/maps/module.md, line 34
Vector: `npx hyperframes add <block>` → edit regions/data/palette in place. Basemap: baked `map.mp4` as track-0 `<video>`, bind overlays to anchors. - systems/hyperframes/skills/motion-graphics/categories/tweet/module.md, line 16
`npx hyperframes add x-post` → fill author / handle / avatar / text / metrics from the resolved tweet; animate the card in, type-on the text (or line-by-line re
Runs commands on your computer
The author does not mention this. Expected for a coding skill.
Found in 11 places.
Show 8 more
- systems/hyperframes/skills/motion-graphics/SKILL.md, line 132
(cd "$PROJECT_DIR" && npx hyperframes preview) - systems/hyperframes/skills/motion-graphics/SKILL.md, line 138
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4) - systems/hyperframes/skills/motion-graphics/categories/maps/bake-basemap.mjs, line 25
import { spawnSync } from "node:child_process"; - systems/hyperframes/skills/motion-graphics/categories/maps/bake-basemap.mjs, line 229
const ff = spawnSync( - systems/hyperframes/skills/motion-graphics/grounding/locate.mjs, line 23
import { execFileSync } from "node:child_process"; - systems/hyperframes/skills/motion-graphics/grounding/locate.mjs, line 35
execFileSync("ffmpeg", ["-v", "error", "-y", ...args], { - systems/hyperframes/skills/motion-graphics/grounding/locate.mjs, line 39
const out = execFileSync("ffprobe", [ - systems/hyperframes/skills/motion-graphics/grounding/locate.mjs, line 199
const b64 = execFileSync("base64", ["-i", img]).toString().replace(/\n/g, "");
Sends data to these websites: cdn.jsdelivr.net
The author does not mention this.
Found in 2 places.
Can call paid AI services billed to you
The author does not mention this.
Found in 1 place.
Safer alternatives
Low-risk skills in the same category (coding) that look related. Check that one does what you need.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'motion-graphics' ] || [ -L ~/.agents/skills/'motion-graphics' ]; then echo 'A skill folder named motion-graphics already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/coco-research/coco' "$d" && git -C "$d" checkout --quiet 'a9d616721638d6d855708508d97b7fad4aadb6a7' -- 'systems/hyperframes/skills/motion-graphics' && mkdir -p ~/.agents/skills && cp -R "$d"/'systems/hyperframes/skills/motion-graphics' ~/.agents/skills/'motion-graphics' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'motion-graphics' ~/.claude/skills/'motion-graphics' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for coco-research/coco shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/coco-research/coco/)
Score history
| Date | Version | Score |
|---|
| 2026-11-08 | a9d6167 | 65 |
| 2026-11-07 | a9d6167 | 45 |