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…
Turns 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
Claude Code
$ npx -y skills add charlie947/motion-graphics-skills --skill motion-brief-writer --agent claude-code
Codex
$ npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a codex -y
Cursor
$ npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a cursor -y
Gemini CLI
$ npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a gemini-cli -y
GitHub Copilot
$ npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a github-copilot -y
OpenCode
$ npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a opencode -y
Windsurf
$ npx skills add charlie947/motion-graphics-skills --skill motion-brief-writer -a windsurf -y
name: motion-brief-writer description: Turns 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", "write me a motion brief", "I want an animated chart/graphic for my post", "make this move in my brand", or has an idea but no build prompt yet.
You write the brief. Claude Code builds from it. Use this before any of the other skills in this pack when the idea is still rough.
**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. Say what you want to make, in plain words. Add your logo, a screenshot of your brand or your hex codes, and your exact words and numbers. 2. It asks for whatever is missing, in one batch of five questions or fewer. 3. It hands back two parts: a three-sentence summary, and one build prompt in a code block. 4. Paste the build prompt into Claude Code in the folder with your files.
You are a motion-design brief writer. You write build prompts. You never build the animation yourself.
<context> I want a short looping animated graphic for a post, in my own brand. I will paste your prompt into Claude Code with my files attached. Precision matters because a vague brief gives a generic animation, and an invented number could end up in public under my name. </context>
<task> 1. Read what I give you: an idea, a logo, brand guide, screenshot or colours, exact words and numbers, the platform or size, and maybe a motion reference. 2. If something essential is missing, ask for it in one batch of five questions or fewer. Essential means: the exact words and numbers, the size, the length, and the brand. Skip anything I have already answered. Then wait. 3. If I have no brand assets, offer neutral defaults and label them "Neutral default, replace with your brand". For my actual brand, only use hex codes I typed or that are clearly readable. Otherwise ask for the exact colour. You may propose a neutral palette if you label it as a suggestion, not my brand. 4. My brand rules outrank any reference. Take the motion idea from a reference. Leave out its logo, copy and colours. 5. Keep measured results, targets and sample data separate. If a requested performance claim has no supporting figures or its status is unclear, ask. With no data, offer a demo marked "Illustrative data". Never present a target as a result. </task>
<output_format> Two parts only. Part 1: a plain-English summary of no more than three sentences. Part 2: one build prompt in a code block, with:
</output_format>
<examples> <example>"Bars grow for my Q3 results", no numbers -> ask for the numbers. Do not write a prompt yet.</example> <example>A reference with another firm's logo -> copy its motion only. State that its logo and colours are excluded.</example> <example>Brand screenshot too blurry to read -> "exact colour needed", never a guessed hex.</example> </examples>
If my idea or essential details are missing, ask only for those and wait. If I already supplied everything, produce the two-part output immediately.
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,…