Guide
6 animation skills for Claude: download the archive and install it in minutes
The short version
Download the archive, copy the six folders into ~/.claude/skills/ and type a skill with your own line in Claude Code, for example /graph World population, 1800 → 2025. Each skill writes a short vertical animation (1080×1920, 4.5 seconds) as code and renders it on your computer.
How to install
- Download the archive claude-animation-skills.zip (2 MB) and unzip it.
- Copy the six skill folders into
~/.claude/skills/, so each one sits at~/.claude/skills/<name>/SKILL.md. Claude Code picks them up on its next start. - You need Node.js 22 or newer and ffmpeg. On macOS:
brew install node ffmpeg. The skills run HyperFrames throughnpx, so nothing else has to be installed. - In the Claude desktop app (Code tab) or in Claude Code, type the skill with your own line. Examples below.
The six skills, one command each
/voxel-skit Ask Claude to fix one tiny bug
A 3D voxel cartoon: a developer and Claude act out a joke.
/minimal-line Nobody sees day one
Black-and-white line art with one moving dot.
/stick-figure Why do astronauts get taller in space?
A stick figure acts out the story.
/exploded-view My MacBook, every part labelled
An exploded view with every part labelled.
/map-route Home to the coworking, 2.4 km
A 3D city where the route draws itself.
/graph World population, 1800 → 2025
A smooth line graph with one number counting up.
Good to know
- No paid video model is involved: Claude writes the animation as code and HyperFrames renders it on your computer. Rendering is free, and on a laptop a 4.5-second clip takes about a minute.
- Facts in a graph or an exploded view come from real sources: each skill tells Claude to name the source on screen and never to invent numbers.
- They work with English and Russian prompts. The on-screen text comes out in the language of your prompt, and the fonts in the templates cover Cyrillic.
- The HyperFrames version is pinned inside the skills: 0.8.185, the one they were built and tested with.
- I tested them on a Mac. I did not test Windows or Linux.
Questions people also ask
What is a skill in Claude?
A folder with a SKILL.md file: instructions Claude follows when a task fits or when you call the skill with a slash command, such as /graph. Personal skills live in ~/.claude/skills/ and are available in all your projects.
What is HyperFrames, and does it cost anything?
HyperFrames renders video from an HTML page and is built for AI agents; its GitHub project is licensed Apache-2.0. The skills run it through npx, so there is nothing separate to install or pay for. No paid video model is in this chain.
Do the skills work in Cursor or other tools?
SKILL.md is the format of Claude skills. I tested only in the Claude desktop app (Code tab) and in Claude Code, so I cannot say anything about other tools.
Is it safe to install skills from an archive?
A skill is instructions for your AI, and it can run commands on your computer. Open each skill's SKILL.md and its template and read them before you install, as you would any code from someone else.
Why did I get a different clip from the one I wanted?
A skill makes an animation from one line, so the result depends on how you worded it. Try rewriting the line more precisely, or name concrete numbers and dates: graphs and exploded views are built from real data.
Sources
- Claude Code: skills (Anthropic documentation)
- HyperFrames on GitHub: Write HTML. Render video. Built for agents.
Other companies’ features and prices change. Every statement about them rests on these pages, as they read on the date above.