数据与研究

animated-chart

charlie947/moti…s-skills

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.

  • 1744 次安装
  • 475 星标
  • 收录于

安装命令

npx skills add https://github.com/charlie947/motion-graphics-skills --skill animated-chart

SKILL.md

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], ...