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…
Turn 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",
Claude Code
$ npx -y skills add charlie947/motion-graphics-skills --skill newsletter-promo --agent claude-code
Codex
$ npx skills add charlie947/motion-graphics-skills --skill newsletter-promo -a codex -y
Cursor
$ npx skills add charlie947/motion-graphics-skills --skill newsletter-promo -a cursor -y
Gemini CLI
$ npx skills add charlie947/motion-graphics-skills --skill newsletter-promo -a gemini-cli -y
GitHub Copilot
$ npx skills add charlie947/motion-graphics-skills --skill newsletter-promo -a github-copilot -y
OpenCode
$ npx skills add charlie947/motion-graphics-skills --skill newsletter-promo -a opencode -y
Windsurf
$ npx skills add charlie947/motion-graphics-skills --skill newsletter-promo -a windsurf -y
name: newsletter-promo description: Turn 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 edition", "get people to my Substack", "teaser video" or "promote this issue".
A promo does one job: make someone want the full edition. Show the best bits, never the whole thing.
**Before you start:** read `brand.md` and `MOTION.md` if they exist. If not, run `brand-intake` first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.
1. **The edition link** or the full text. Read it before anything else. 2. **The hook.** The one question or promise the edition answers. If none is given, propose three from the edition's own lines and wait for a pick. 3. **Three proof frames.** Real images, charts or clips from the edition. Attached files only. 4. **The ending card,** word for word: newsletter name, where to read it, and an optional subscriber count with its source.
| Time | Frame | |---|---| | 0-3s | The hook, big. A question works better than a statement. | | 3-11s | Three proof frames, about 2.5s each, each with a 3-5 word label. | | 11-15s | Newsletter name, "Read it free at [URL]", held still. |
Build one self-contained HTML file called index.html: a 15-second promo at [WIDTH] x [HEIGHT] for my newsletter edition, using only the files I attached. Hook (0-3s): "[HOOK]" in bold condensed type, [TEXT] on [BG], key words in [ACCENT]. Proof (3-11s): my three attached images in this order, each held about 2.5 seconds with a slow push-in and this label: [LABEL 1], [LABEL 2], [LABEL 3]. End card (11-15s): "[NEWSLETTER NAME]" and "Read it free at [URL]". Hold still, readable on a phone. Banned: typewriter text, glow, bouncing, gradients on text, any claim or number not in my brief. Build rules: every frame from the time alone, window.seek(seconds), wait for seek when the URL has ?render. Capture one frame per shot and check every label is readable at phone size.
Export 1080 x 1350 for LinkedIn and 1080 x 1920 for Stories and Reels. Put the edition link in the first line of the caption, not only the comments.
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…
The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your…
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…
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,…