Motion Graphics Skill Pack

13 skills that make launch-grade motion graphics with Claude Code. Every frame is code.

Install  ·  See it work  ·  The skills  ·  How they fit  ·  Prompts  ·  Newsletter

I make launch videos, animated charts and reels without After Effects or a video generator. Claude Code writes the animation as code, draws every frame and renders an MP4. These 13 skills are the workflows I use, with the rules that came out of real rejected drafts.

Install

One line, about 30 seconds:

npx skills add charlie947/motion-graphics-skills

Then open Claude Code, pick Opus 5.5 with /model, and run brand-intake first.

Download this repo (green Code button, then Download ZIP) and unzip it, or clone it:

git clone https://github.com/charlie947/motion-graphics-skills.git

Copy the 13 folders inside skills/ into ~/.claude/skills/ (every project) or your project's .claude/skills/ (one project). This loop keeps any skill folder you already have:

mkdir -p ~/.claude/skills
for skill in motion-graphics-skills/skills/*; do
  [ -f "$skill/SKILL.md" ] || continue
  destination="$HOME/.claude/skills/$(basename "$skill")"
  if [ -e "$destination" ]; then
    printf 'Preserved existing skill: %s\n' "$destination"
  else
    cp -R "$skill" "$destination"
  fi
done

Zip one skill folder and upload it in Customise, then Skills. From motion-graphics-skills/skills:

zip -r brand-intake.skill brand-intake

Start with brand-intake, then add the skills you need.

From your project's root, after cloning this repo into it:

test -d motion-graphics-skills/skills || { printf 'Missing source skills folder\n'; exit 1; }
mkdir -p .agents/skills || exit 1
for skill in motion-graphics-skills/skills/*; do
  [ -f "$skill/SKILL.md" ] || continue
  name="$(basename "$skill")"
  destination=".agents/skills/$name"
  if [ -e "$destination" ] || [ -L "$destination" ]; then
    printf 'Preserved existing skill: %s\n' "$destination"
  else
    cp -R "$skill" "$destination" || exit 1
  fi
done

Open a fresh Codex task and check the skills load from .agents/skills/<name>/SKILL.md.

Add HyperFrames once (free, open source): npx skills add heygen-com/hyperframes.

See it work

A 20-second launch film. Deep blue glass, one glow, every word from a fact list I approved. No screen recording.	A 12-second milestone loop. A night sky of points pulls into my real number.

Start here: one line, 60 seconds

Before any skill, paste this into Claude Code on Opus 5.5:

Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are. Go all out.

Then change it by describing the edit:

• "Slow down the second scene."
• "Swap the text for mine: [your words]."
• "Use my brand colours: [hex codes]."
• "Make it 1080 x 1350 for LinkedIn."

When you want a specific job done properly, pick a skill below.

The skills

Thirteen skills, in the order you use them. Type the line on the right into Claude Code and the right skill picks it up.

See each skill's SKILL.md for its trigger phrases, the inputs it asks for and what it learned the hard way.

How they fit together

Run brand-intake once. It writes brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), and adds a rule to CLAUDE.md so Claude reads both before it animates anything. Every other skill reads those two files first. Without them, a skill asks for your hex codes, font and logo, and never calls its result on-brand.

flowchart TD
  B["brand-intake<br/>brand.md + MOTION.md"] --> P["Plan<br/>motion-brief-writer"]
  B --> L["Launch<br/>launch-video · apple-launch-film"]
  B --> E["Explain<br/>vox-explainer · animated-chart<br/>milestone-reveal · motion-effects"]
  B --> O["Open<br/>title-sequence-3d"]
  B --> C["Compare<br/>model-showdown"]
  B --> R["Promote<br/>newsletter-promo · loop-cover · reel-export"]

Use it

Run brand-intake first, then say what you want. The right skill loads itself:

"Set up my brand" → brand-intake
"Brief this animation" → motion-brief-writer
"Make a launch video for my coaching programme" → launch-video
"Make an Apple-style launch for my app" → apple-launch-film
"Why does every logo look the same now?" → vox-explainer
"Animate my Q3 chart" → animated-chart
"Celebrate 10,000 subscribers" → milestone-reveal
"Build the chart morph with my numbers" → motion-effects
"Make a button that turns into a video player" → motion-effects
"Give me a cinematic opener" → title-sequence-3d
"Same prompt, three AIs" → model-showdown
"Promo for this edition" → newsletter-promo
"Make my cover move" → loop-cover
"Make this a reel" → reel-export

One line gets you close. A proper brief gets you something people share. This is exactly what I typed (with vox-explainer installed):

Why do we dream? And then someone suddenly wakes up, zooms out of the eye, and goes into outer space. There are neural networks of interconnectivity to convey the brain.

It found a source for every fact before it drew anything, wrote the script, added a voice and rendered it. Then give it notes like you would a designer.

Prompts

Every prompt from the edition, ready to paste, one file per job. Each one says when to use it.

Want the 16 effects as one editable animated board, plus a PDF guide? Get it free at https://charliehills.substack.com/p/opus-55-motion-graphics

Only install what the job needs. Nothing here needs an API key.

1. Facts first. Every name, date and number on screen comes from a list you approve. Nothing invented.
2. Your brand, not the average. Colours and fonts come from brand-intake or from you. With nothing given, it asks.
3. Banned defaults: typewriter text, glow, bounce, gradients on text, purple-to-blue backgrounds.
4. Motion on twos for anything hand-made in feel (hold each pose for 2 frames at 24fps).
5. First 3 seconds carry the hook. If the first frame is empty, it's cut.
6. Check before export. One frame from the middle of every shot, checked for cut-off text, overlaps and wrong facts.
7. Real assets only. Logos and screenshots come from your files, never redrawn from memory.

A free skill (not mine) that turns Apple's design guidelines into rules Claude follows:

npx skills add emilkowalski/skills --skill apple-design

Then ask: "Use the apple-design skill to audit this animation. Give me a ranked list of everything that feels off, worst first." Paste the fixes back as notes.

If your video shows a product, don't let Claude draw the buttons and cards from scratch. It guesses the spacing and the UI looks fake. 21st.dev publishes real components with a prompt under each one. Paste this once, then paste any component prompt straight in:

Add this rule to CLAUDE.md: whenever I paste a component prompt or third-party component code, treat it as a structural donor only. Keep its engineering. Replace its demo copy with my real copy, and translate every colour, border, shadow, font and timing to MOTION.md.

[!NOTE]
One honest limit: a photoreal human face. Code draws motion, type and UI brilliantly, but a lifelike person still needs an image model (for now).

Contributing

Found a way to improve a skill? Open a PR. Stuck? Open an issue.

Run bash validate-skills.sh before you submit. It checks every skill's frontmatter, that the name matches the folder, the description length, and the house style (no em dashes or semicolons in prose, no local paths) across every skill, its reference files and the prompts folder.

Built by

Charlie Hills I write the MarTech AI newsletter for 71,000 readers and share what I build with Claude every week. MarTech AI newsletter  ·  LinkedIn  ·  More repos

Licence

MIT. Use these however you like. If they help you, a link back to the newsletter is appreciated.