charlie947/motion-graphics-skills

267 stars Качество 41 Тренд 41

13 Claude Code skills for launch-grade motion graphics. Every frame is code. No After Effects, no video generator.

Обзор

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. Then open Claude Code, pick Opus 5.5 with /model, and run brand-intake first. Download this repo (green button, then ) and unzip it, or clone it: 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: Zip one skill folder and upload it in Customise, then Skills. From motion-graphics-skills/skills: Start with brand-intake, then add the skills you need.

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.

See it work

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-intakebrand.md + MOTION.md"] --> P["Planmotion-brief-writer"]
  B --> L["Launchlaunch-video · apple-launch-film"]
  B --> E["Explainvox-explainer · animated-chartmilestone-reveal · motion-effects"]
  B --> O["Opentitle-sequence-3d"]
  B --> C["Comparemodel-showdown"]
  B --> R["Promotenewsletter-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

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

[!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

Licence

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

View this README on GitHub

Установка

npx skillfish add charlie947/motion-graphics-skills