Motion Graphics Skill Pack
Fifteen Claude Code skills for launch films, animated charts and reels made entirely from code, with no After Effects
- 476 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skills write animation code that HyperFrames then renders through npx
- Copying folders into ~/.claude/skills changes the agent's skill set for every project
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/motion-graphics-skill-packDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills write animation code that HyperFrames then renders through npx
- Copying folders into ~/.claude/skills changes the agent's skill set for every project
This is third-party code. Review the repository files before installing.
What it does
Motion Graphics Skill Pack collects the author's working methods: Claude Code writes the animation as code, draws every frame and renders an MP4. The rules in the skills came out of real rejected drafts. brand-intake runs first: from five frames you like it builds the brand.md and MOTION.md files that every other skill reads. You then pick a job. Planning is covered by motion-brief-writer, reference-to-motion (breaks down a reference video and a site's look) and motion-prompt-writer (an eight-part prompt). Launch films come from launch-video at 30–45 seconds and apple-launch-film in the style of an Apple keynote. For explaining there are vox-explainer at 30–60 seconds and animated-chart with exact values. milestone-reveal builds a night sky of points, and motion-effects offers 16 eight-second effects. Openers and promotion are covered by title-sequence-3d, model-showdown to compare three models and newsletter-promo. loop-cover makes a GIF cover, and reel-export makes a 1080 by 1920 vertical clip.
Who it is for. For newsletter authors, marketers and founders who need launch films, animated charts and reels without a video editor.
Good fit when
- You need a 30–45 second launch film for a course, product or offer
- You want an animated chart where every value stays exactly as you gave it
- You reached 250,000 followers and want a milestone clip: a night sky of points resolves into the number
- A newsletter cover has to become a looping GIF and a video has to become a 1080 by 1920 reel
- You are studying someone else's video and want to carry its moves into a scene prompt for your brand
Not a fit when
- You need to edit filmed footage with people: here code draws every frame
- You need a text-to-clip generator: scene code builds the frames without a video model
- You need ready After Effects templates: the output is code and MP4
Example request
Make a launch video for my new cohort, 40 seconds, in my brandLimitations
The author recommends running the pack in Claude Code on Opus 5.5, chosen with /model, and starting with brand-intake. MP4 export needs HyperFrames installed separately: npx skills add heygen-com/hyperframes. The skills also work in Codex, but you copy the folders into .agents/skills yourself.
Some pieces ship as standalone zip files in the downloads folder: motion-prompt-writer.zip and reference-to-motion.zip, which can be uploaded to Claude Desktop as a skill.
How to disable. Delete the skill folders you no longer want from ~/.claude/skills or the project's .claude/skills, for Codex from its skills folder. The brand.md and MOTION.md files stay in your project, so delete them by hand if you do not need them.
FAQ
How do I install the Motion Graphics Skill Pack in Claude Code?
Run npx skills add charlie947/motion-graphics-skills. Then open Claude Code, pick a model with /model and run brand-intake. You can also copy the folders from skills/ into ~/.claude/skills by hand: the copy loop from the instructions skips folders that already exist and overwrites nothing.
Which skill do I start with?
brand-intake. It builds brand.md and MOTION.md from sample frames, and every other skill reads those files first. For a quick check without skills, paste the one-line 15-second animation request from the Start here section into Claude Code on Opus 5.5.
How do I get an MP4 from the animation code?
Add HyperFrames, a free open-source tool: npx skills add heygen-com/hyperframes. The skills write animation as code and it renders the video. Without HyperFrames the result stays scene code.
Can I use the pack in Codex or Claude Desktop?
Yes. For Codex clone the repository and copy the skills/ folders into the project's .agents/skills, then open a new task. For Claude Desktop zip one skill folder and upload it under Customise, Skills, for example brand-intake.skill.
How is animated-chart different from an ordinary animation?
Every value stays exactly as you gave it and the animation only shows growth. The chart loops. For a night sky of points and a follower count there is a separate skill, milestone-reveal, which pulls the points into your real number.
Discussion
No questions or reviews yet.
Related
SkillsA skill for promo films and kinetic type: idea and storyboard before the build, MP4 rendered through Chrome and ffmpeg, checked by six gates
A Claude Code and Codex skill that turns a topic into a narrated motion-graphics explainer video on Remotion with subtitles and chapters
Motion Skills for AI agents
motion-skills
Over 50 open skills for motion graphics, animation and video: kinetic typography, charts, explainers, TikTok and Reels, WebGL, Manim
A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render
A skill for Claude Code and Codex that builds cinematic product videos with Remotion from shot recipe cards, a ready template and audio assets
A set of SKILL.md skills for short-video and content production: topic, script, voice, avatar, editing, covers and motion graphics
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Motion Graphics Skill Pack (this entry) | no | 476 | |
| Motion Skills for AI agents | no | 1,072 | over fifty open skills for animation, kinetic typography and video, with no shared brand layer |
| anything2explainer | no | 2,835 | turns a topic into a narrated explainer clip; this pack has fifteen skills for different formats |
| opus-video-skills | no | 380 | two Claude Code skills for videos made entirely in code |
README in short
Two demos come first: a 20-second launch film and a 12-second loop that resolves into a follower count. A table sorts the skills by work stage with a trigger phrase for each, and the prompts folder holds ready prompts.
README badge
Original SKILL.md
--- name: brand-intake description: The 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 it animates anything. Use at the start of any motion project, or when someone says "set up my brand", "brand intake", "build my motion design system", "make it look like my brand", "onboard me", "write my MOTION.md" or drops a batch of brand frames into chat. --- # Brand intake Every other skill in this pack reads the two files this one writes. Without them, Claude picks its own colours, its own type and its own idea of motion. Run this once per brand. ## Start straight away When someone asks for this, your first message is the Batch 1 questions. No summary of the skill, no preamble. ## Step 1: The interview, in two batches **Batch 1.** Ask these four together, then wait: 1. What is the brand called, and what do you do, in one line? 2. Who is it for? One sentence on the person watching. 3. What do you sell or promote in your videos? The offer, the product or the newsletter, with its real link. 4. What should people feel in the first second? Pick up to three: calm, premium, playful, urgent, technical, warm, bold. **Batch 2.** Then ask these three, and wait: 5. Your colours as hex codes, your font names, and your logo files (SVG or PNG, attached). No hex codes? Say "sample them from my site" and give the link. 6. 3 to 5 reference frames: screenshots of motion you already like, from Dribbble, Pinterest or your own work. Put them in a folder called `examples`. 7. One thing your motion must never do. If an answer is blank, ask for it once more, then move on. Never fill a gap with a guess. ## Step 2: Write brand.md Save it in the project root, under 300 words: ``` # Brand ## Name and what we do ## Audience ## What we promote (with the real link) ## The feeling ## Assets Colours (hex, typed by me or sampled from a named source), fonts, logo file names ## Never ``` ## Step 3: Write MOTION.md from the frames