animated-chart
Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that…
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 Code
$ npx -y skills add charlie947/motion-graphics-skills --skill brand-intake --agent claude-code
Codex
$ npx skills add charlie947/motion-graphics-skills --skill brand-intake -a codex -y
Cursor
$ npx skills add charlie947/motion-graphics-skills --skill brand-intake -a cursor -y
Gemini CLI
$ npx skills add charlie947/motion-graphics-skills --skill brand-intake -a gemini-cli -y
GitHub Copilot
$ npx skills add charlie947/motion-graphics-skills --skill brand-intake -a github-copilot -y
OpenCode
$ npx skills add charlie947/motion-graphics-skills --skill brand-intake -a opencode -y
Windsurf
$ npx skills add charlie947/motion-graphics-skills --skill brand-intake -a windsurf -y
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.
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.
When someone asks for this, your first message is the Batch 1 questions. No summary of the skill, no preamble.
**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.
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
Read every frame in `examples`, then write MOTION.md with this brief to yourself:
Write one file called MOTION.md that any AI can read before it animates anything for me. It must cover: 1. Every colour as a hex code, and what each one is for 2. The fonts and the type sizes 3. Timing: how things come in, how long they hold, and how they leave 4. How things move: the frame rate, the easing, and anything that makes it feel handmade 5. Texture and finish 6. Five things my motion must never do, named plainly 7. One example, described shot by shot, of it done right Work only from what is in the frames. Where you cannot tell, write ASK ME rather than guessing.
Show the user the file before you save it. Colours in brand.md win over colours sampled from a frame.
Create CLAUDE.md if it does not exist, and add this block word for word:
Before designing, generating or animating anything, read MOTION.md in full. Every colour, font, timing and motion value comes from that file. The file sets the look, not the ambition. When I say go all out, go all out. If something I ask for is not covered there, ask me rather than choosing for yourself. When you have finished, check your own frames against MOTION.md, fix what fails, and only then show me.
Run the same one-line prompt twice, once in an empty folder and once in this project: "Make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are. Go all out." Put the two side by side. Both should go all out. Only one should look like yours.
Tell the user brand.md, MOTION.md and the CLAUDE.md rule are in place, then list what to try next: `launch-video`, `vox-explainer`, `animated-chart`, `milestone-reveal`. Until both files exist, no other skill may call its result on-brand.
13 Claude Code skills for launch-grade motion graphics. Every frame is code. No After Effects, no video generator.
Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that…
Rebuild an Apple-style Mac launch film entirely in code with Claude Code. A thin menu bar, the black notch growing into widgets…
Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split…
Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps. Only the one element you name…
Make a 12-second looping milestone clip in code with Claude Code. Thousands of tiny points drift like a night sky, pull together…
Give the same motion brief to three AI models, keep each first try, render all three the same way and stack them into one…
Overlay doctrine for captions in HyperFrames videos — the caption MODEL (drop / rail / embed) and the rule that captions are an…
AI music generation with ACE-Step 1.5 — background music, vocal tracks, covers, stem extraction for video production. Use when…
This skill should be used when a Seedance 2.0 prompt contains generic AI filler, hollow superlatives, vague cinematic language,…