animated-chart
Skill247 starsChanged 36 days agoMITView on GitHub
Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code. Bars that become a line, a number that counts up, a before and after. Every value stays exactly as given. Use when someone says "animate my chart", "animated graph", "make my results move", "stat animation" or wants a data graphic that loops.
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 10
Before you start: read brand.md and MOTION.md if they exist.
≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Animated chart, built in code
Three prompts from a blank page: build it, make it look again, export it.
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.
Step 1: Ask for the numbers, then wait
The title, the labels, the exact values, and whether they are real results or sample data. Sample data gets an "Illustrative data" label on every frame. Never round, reformat or add a number.
Prompt 1: build it
I want one animated graphic for a LinkedIn post. Build it as a single HTML file I can open in my browser.
Title: "[TITLE]". [If sample data: keep "Illustrative data" visible.]
Values: [LABEL 1: VALUE 1], [LABEL 2: VALUE 2], ...
The motion has four states:
1. Start: [what it looks like first].
2. Change: [the one thing that moves]. Nothing fades out and gets replaced.
3. Hold: the finished chart, with [the headline value] labelled.
4. Return: it eases back to the start, so the loop has no jump.
Timing: 8 seconds in total. About 2 seconds for the change, 4 holding, 1.5 to return.
Look: background [BG], text [TEXT], accent [ACCENT], [FONT]. No external fonts or images. No gradients, no glow, no bouncing.
Size: 1080 x 1350 pixels.
Rules for the build:
- Work out every frame from the time alone. Add window.seek(seconds).
- The title, labels and axis never move. Only the chart changes.
- The last frame must match the first frame exactly.
After you build it, take screenshots at 0, 1, 2, 4 and 7 seconds. Check them for overlapping text or anything cut off. Fix what you find and tell me what you changed.Prompt 2: make it look again
Inspect the five captured frames and the loop boundary. Check that the values stay the same, labels are readable, nothing overlaps, and each element appears only when it should. Report only problems you actually observe. Fix any you find, preserve the earlier version, and capture the same frames again. If no problems are found, say so and do not invent a revision.Prompt 3: export it
Now turn this into a video and a GIF I can post. Use tools already on this computer. If you need something that is not installed, stop and tell me what it is before you install anything. Give me an MP4 (1080 x 1350, 8 seconds) and a GIF that loops forever. Then show me three frames from the finished GIF so I can check it came out right.Other versions3 projects use a version of this.
Word for word · 2
- imMamdouhaboammar/motion-graphics-skills★ 15100% same
- BlackAngel242/skill-market★ 0100% same
Edited · 0
None found.
Wrote their own version · 1
- alharkan7/agent-skills★ 8same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository14 other files it gives its agents.
- apple-launch-filmSkill
- brand-intakeSkill
- launch-videoSkill
- loop-coverSkill
- milestone-revealSkill
- model-showdownSkill
- motion-brief-writerSkill
- motion-effectsSkill
- motion-prompt-writerSkill
- newsletter-promoSkill
- reel-exportSkill
- reference-to-motionSkill
- title-sequence-3dSkill
- vox-explainerSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

