Pack · #200 trending skills repo · ↗ +88 stars this week
Motion Graphics Skills
charlie947/motion-graphics-skills
13 Claude Code skills for launch-grade motion graphics. Every frame is code. No After Effects, no video generator.
- Stars
- 596
- This week
- +88
- Forks
- 74
- Open issues
- 0
- Skills inside
- 15
Get started
Install the skills
npx skills add charlie947/motion-graphics-skillsInstalls into Claude Code, Codex, Cursor, OpenCode and the other agents it finds on your machine.
git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git /tmp/motion-graphics-skills
cp -r /tmp/motion-graphics-skills ~/.claude/skills/motion-graphics-skillsClaude Code reads ~/.claude/skills/ (or .claude/skills/ in a project). Other agents read the same SKILL.md format from their own skills folder.
Inside this repo
15 skills
skills/animated-chartapple-launch-filmRebuild an Apple-style Mac launch film entirely in code with Claude Code. A thin menu bar, the black notch growing into widgets one scene at a time, full-screen gradient wallpapers and one short caption per scene. No screen recording, no After Effects. Use when someone says "Apple-style launch", "Maskills/apple-launch-filmbrand-intakeThe setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and MOTION.md (your colours, type, timing and motion rules), plus a rule in CLAUDE.md so Claude reads them before skills/brand-intakelaunch-videoMake a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split across scenes, real product screens with slow camera moves, a typed prompt, a proof beat and a clear call to action. Use when someone says "launch video", "promo video foskills/launch-videoloop-coverTurn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps. Only the one element you name moves, the loop is rotated so frame 1 shows the finished picture, and the seam is measured, not eyeballed. Use when someone says "animated cover", "make my cover move", "loopiskills/loop-covermilestone-revealMake a 12-second looping milestone clip in code with Claude Code. Thousands of tiny points drift like a night sky, pull together into your real number (followers, subscribers, revenue, customers), a line draws underneath and the label settles in. Premium, not a party. Use when someone says "milestonskills/milestone-revealmodel-showdownGive the same motion brief to three AI models, keep each first try, render all three the same way and stack them into one comparison video with model names and logos. Makes a 16:9 side-by-side for a newsletter and a 1080 x 1920 stacked reel for Instagram and TikTok. Use when someone says "compare thskills/model-showdownmotion-brief-writerTurns a rough idea for an animated graphic into a precise build brief for Claude Code, in your own brand. Asks for anything essential first (exact numbers, size, length, brand), keeps real results apart from sample data, and never invents a figure. Use when someone says "brief this animation", "writskills/motion-brief-writermotion-effectsBuild any of 16 premium motion effects from scratch in your own brand, as one 8-second looping HTML file with window.seek(seconds) so it exports frame-exact to MP4 or GIF. Interfaces (button to player, search to results, card to workspace, tabs to panels), data (chart morph, dashboard zoom, spring sskills/motion-effectsmotion-prompt-writerWrite a complete 8-part Claude Motion prompt (The bar, Format, The one rule, Look, Motion, Never, Before you finish, The scene) for one short looping motion graphic, in your own brand. Takes your brand (a website screenshot, a logo, hex codes, or nothing for the Apple-style default) and one moment yskills/motion-prompt-writernewsletter-promoTurn a newsletter edition into a 12-20 second promo clip for LinkedIn, Instagram or X that drives people to read and subscribe. Hook question, three proof frames from the edition, then the newsletter name and where to read it. Use when someone says "promo for my newsletter", "trailer for this editioskills/newsletter-promoreel-exportTurn any horizontal or square motion video into a 1080 x 1920 Instagram Reel or TikTok that uploads cleanly. Headline and logos inside the safe zone, H.264, yuv420p, limited colour range, bt709, a silent audio track when there is no sound, and an ffprobe check before upload. Use when someone says "mskills/reel-exportreference-to-motionTurn references you admire into a scene-by-scene Claude Motion prompt for your own topic and brand. Takes a video for the moves (screenshots, frames or a contact sheet of a reel or ad) and, optionally, a look reference for the style (a website, a brand, a moodboard). Use when someone says "make me sskills/reference-to-motiontitle-sequence-3dMake a cinematic 3D title sequence (8-15 seconds) in code with Claude Code and Three.js. A camera moves through a lit scene, such as a rainy street at night with brand names as neon signs, then a big question or title lands. Use when someone wants a scroll-stopping opener, a film-style intro, "3D inskills/title-sequence-3dvox-explainerMake a short Vox-style documentary explainer (30-60 seconds) entirely in code with Claude Code. Torn paper, halftone texture, bold condensed type, motion on twos. Use when someone says "make a Vox-style video", "explainer video about...", "why does X happen", or wants a documentary-style motion grapskills/vox-explainerDocumentation
README
Motion Graphics Skill Pack
15 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 15 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.
Manual copy into Claude Code
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 15 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
Claude Desktop (upload one skill)
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.
Codex
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.
Export to MP4
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
Fourteen skills, in the order you use them. Type the line on the right into Claude Code and the right skill picks it up.
| Stage | Skill | What you get | Say this |
|---|---|---|---|
| Set up | brand-intake | Builds brand.md and MOTION.md. Every other skill reads them first. | "Set up my brand for motion. Here are five frames I like." |
| Plan | motion-brief-writer | Turns a rough idea into a precise build brief in your brand. | "Write me a motion brief for my next milestone post." |
| Plan | reference-to-motion | Breaks down a video you admire for its moves, takes the look from a website or moodboard, then writes a scene-by-scene Claude Motion prompt. | "Break down this reference and turn it into a Motion prompt." |
| Plan | motion-prompt-writer | Turns your brand and one moment into a full 8-part Claude Motion prompt: the bar, format, one rule, look, motion, never, a self-check, and the scene. | "Write me a Motion prompt for a button that turns into a tick." |
| Launch | launch-video | A 30 to 45 second launch for a product, offer or cohort. | "Make a launch video for my new cohort." |
| Launch | apple-launch-film | A Mac-style launch film. Menu bar, notch and widgets, all code. | "Make it look like an Apple keynote launch." |
| Explain | vox-explainer | A 30 to 60 second documentary explainer. | "Make a Vox-style video: why do we dream?" |
| Explain | animated-chart | A looping chart. Every value stays exactly as you give it. | "Animate my chart. Here are my numbers." |
| Explain | milestone-reveal | A night sky of points that pulls into your real number. | "Make a milestone video for my follower count." |
| Explain | motion-effects | 16 premium effects in your brand, as 8-second loops. | "Build the search-to-results effect in my brand." |
| Open | title-sequence-3d | An 8 to 15 second 3D opener that stops the scroll. | "Make a cinematic 3D intro for my next video." |
| Compare | model-showdown | One brief, three AI models, stacked into one video. | "Same prompt, three AIs. Make a model showdown." |
| Promote | newsletter-promo | A 12 to 20 second promo that sends people to an edition. | "Make a promo for this week’s newsletter." |
| Promote | loop-cover | Your newsletter cover as a seamless looping GIF. | "Make my newsletter cover a looping GIF." |
| Promote | reel-export | Any video as a clean 1080 x 1920 Reel or TikTok. | "Make this a reel for Instagram." |
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
The brief behind my "Why do we dream?" film
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.
| File | What is in it |
|---|---|
| start-here.md | The one-line starter, the edit-by-describing lines and what to do tonight |
| brand-design-system.md | The MOTION.md prompt and the CLAUDE.md read-first block |
| briefs.md | The "Why do we dream?" brief and the real designer notes I gave |
| polish.md | The Apple motion audit, the real-components rule and the fix-one-thing prompt |
| effects.md | 16 prompts, one per effect, each built from scratch in your brand |
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
What each skill needs to run
Only install what the job needs. Nothing here needs an API key.
| Workflow | Needs | If it is missing |
|---|---|---|
| Any skill, on-brand | brand.md and MOTION.md from brand-intake |
The skill asks for hex codes, font and logo, and does not call the result on-brand |
| Build any animation | Claude Code on Opus 5.5 | Nothing to build with |
| MP4 export | HyperFrames, or ffmpeg plus Chrome | You get the HTML with window.seek(), export pending |
loop-cover measuring |
ffmpeg and Python 3 | GIF made, seam and motion unmeasured, so not called done |
reel-export and model-showdown stacking |
ffmpeg and ffprobe | Stacked layout as HTML, final encode and checks pending |
model-showdown |
Access to each model through your own accounts | Compare the models you can reach, and say which were left out |
apple-launch-film motion check |
The free apple-design skill |
Builds without it, motion unchecked against Apple's rules |
| Logos and screenshots | Your own files | The skill asks. It never redraws a logo from memory |
House rules every skill follows
- Facts first. Every name, date and number on screen comes from a list you approve. Nothing invented.
- Your brand, not the average. Colours and fonts come from
brand-intakeor from you. With nothing given, it asks. - Banned defaults: typewriter text, glow, bounce, gradients on text, purple-to-blue backgrounds.
- Motion on twos for anything hand-made in feel (hold each pose for 2 frames at 24fps).
- First 3 seconds carry the hook. If the first frame is empty, it's cut.
- Check before export. One frame from the middle of every shot, checked for cut-off text, overlaps and wrong facts.
- Real assets only. Logos and screenshots come from your files, never redrawn from memory.
Pairs well with: Apple's motion rules
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.
Pairs well with: real UI components
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.


