Charlie Hills
← Motion graphics in code

Claude skill · Motion graphics pack

Animated Chart

/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 counts up, a before and after. Every value stays exactly as given.

Needs Brand Intake installed tooRuns in Claude Code

Free. Built and used by me, Charlie Hills.

Install it in two minutes

The same zip works in the Claude app and in Claude Code.

In the Claude app

  1. Download the zip. Keep it zipped.
  2. Open Settings → Capabilities and turn on Code execution and file creation.
  3. Go to Customize → Skills, press +, then Create skill → Upload a skill, and pick the zip.
  4. Type /animated-chart in any chat, or just ask for the job. Claude reaches for it on its own.

In Claude Code

  1. Download the zip to your Downloads folder.
  2. Run this in your terminal:
  1. Start a new session and type /animated-chart.

More on this shelf

Brand Intake

The setup step for the motion pack. A short interview and 3 to 5 reference frames become your brand files.

Apple Launch Film

Rebuild an Apple-style Mac launch film entirely in code with Claude Code.

Launch Video

Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day.

Loop Cover

Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps.

Milestone Reveal

Make a 12-second looping milestone clip in code with Claude Code.

Model Showdown

Give the same motion brief to three AI models, keep each first try.

See all 104 skills →