← All skills
motion-graphics
65 / 100 · Review before installing
Check before installing.
By J-StaR-Films-Studios/VibeCode-Protocol-Suite (GitHub) · design · 26 stars · scanned at commit bb9e238
Use when the user wants a short, design-led motion graphic where motion is the message: kinetic typography, stat or number count-up, chart/data-viz hit, logo sting, brand lockup, lower-third, callout, social overlay, animated headline/tweet/news item, motion poster, or quick captured-page highlight. Usually under 10s and up to ~30s, with no narration arc, voice-over, or live-action subject. Can render to MP4 or transparent overlay. Not for longer, multi-scene, narrated, or brand-reel pieces (us…
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 16 places.
Show 13 more
- assets/.agent/skills/hyperframes/motion-graphics/SKILL.md, line 126
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q draft -o ./renders/video.mp4) - assets/.agent/skills/hyperframes/motion-graphics/SKILL.md, line 133
(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .) - assets/.agent/skills/hyperframes/motion-graphics/SKILL.md, line 143
(cd "$PROJECT_DIR" && npx hyperframes preview) # Studio UI; or `npx hyperframes play` for a shareable link - assets/.agent/skills/hyperframes/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 - assets/.agent/skills/hyperframes/motion-graphics/agents/finalize.md, line 11
1. **Snapshots** — `npx hyperframes inspect . --at <beat times>`; eyeball for: overflow / off-canvas, text collisions, empty frames, wrong content, motion that - assets/.agent/skills/hyperframes/motion-graphics/agents/finalize.md, line 13
3. **Render** — `(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q <quality> -o ./renders/video.mp4)` (add `--format webm` for an alpha - assets/.agent/skills/hyperframes/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/`; - assets/.agent/skills/hyperframes/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 - assets/.agent/skills/hyperframes/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 - assets/.agent/skills/hyperframes/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` - assets/.agent/skills/hyperframes/motion-graphics/categories/maps/bake-basemap.mjs, line 56
" npx puppeteer browsers install chrome-headless-shell", - assets/.agent/skills/hyperframes/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. - assets/.agent/skills/hyperframes/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.
Found in 11 places.
Show 8 more
- assets/.agent/skills/hyperframes/motion-graphics/SKILL.md, line 133
(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .) - assets/.agent/skills/hyperframes/motion-graphics/SKILL.md, line 143
(cd "$PROJECT_DIR" && npx hyperframes preview) # Studio UI; or `npx hyperframes play` for a shareable link - assets/.agent/skills/hyperframes/motion-graphics/categories/maps/bake-basemap.mjs, line 25
import { spawnSync } from "node:child_process"; - assets/.agent/skills/hyperframes/motion-graphics/categories/maps/bake-basemap.mjs, line 229
const ff = spawnSync( - assets/.agent/skills/hyperframes/motion-graphics/grounding/locate.mjs, line 23
import { execFileSync } from "node:child_process"; - assets/.agent/skills/hyperframes/motion-graphics/grounding/locate.mjs, line 35
execFileSync("ffmpeg", ["-v", "error", "-y", ...args], { - assets/.agent/skills/hyperframes/motion-graphics/grounding/locate.mjs, line 39
const out = execFileSync("ffprobe", [ - assets/.agent/skills/hyperframes/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 (design) 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/J-StaR-Films-Studios/VibeCode-Protocol-Suite' "$d" && git -C "$d" checkout --quiet 'bb9e2387e4c7cb850ab9795fd8630486991c0337' -- 'assets/.agent/skills/hyperframes/motion-graphics' && mkdir -p ~/.agents/skills && cp -R "$d"/'assets/.agent/skills/hyperframes/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 J-StaR-Films-Studios/VibeCode-Protocol-Suite shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/J-StaR-Films-Studios/VibeCode-Protocol-Suite/)
Score history
| Date | Version | Score |
|---|
| 2026-11-12 | bb9e238 | 65 |