Docs
Make it with your agent
Every component page has a Prompt tab. Paste it into your agent and it recreates the animation in your project, with your texts and colors. This page explains the skills behind those prompts.
What is a skill
A skill is a folder with a SKILL.md file that teaches an agent a technique: which API to use, the order of the steps, and the mistakes to avoid. Claude Code loads the skills it finds and reads the right one when a task needs it.
Skills used by Motionshelf
GSAP skills
MITAnimation on the page. Used by every component except the Sales Funnel.
Official skills from GreenSock: the core API, timelines, React (useGSAP), plugins and performance. They are what the prompts rely on to write the timelines.
Repository: github.com/greensock/gsap-skillsanatomy
MITIsometric illustrated figures. Used by the Sales Funnel.
Turns an idea into a small machine drawn in isometric view, with real parts that move. Needs Node 20.10+ and Chrome for its checks.
Repository: github.com/wheresryan22/anatomyHyperFrames
Apache-2.0Video, optional. Turns the same animation into an MP4.
Renders HTML + GSAP frame by frame into a video for ads, stories or WhatsApp status. Rendering needs FFmpeg, or Docker (about 3.3 GB the first time).
Repository: github.com/heygen-com/hyperframesInstall in Claude Code
Run these in a terminal. The prompts also ask your agent to check and install what is missing, so you can skip this step.
npx skills add https://github.com/greensock/gsap-skillsnpx skills add wheresryan22/anatomy -g -a claude-codeclaude plugin marketplace add heygen-com/hyperframesclaude plugin install hyperframes@hyperframesOther agents
The skills installer also supports agents such as Codex, OpenCode and Antigravity: in the commands below, replace your-agent with the name of yours. In Cursor, add the GSAP skills as a Remote Rule (Settings → Rules → Remote Rule (GitHub) → greensock/gsap-skills). If your agent cannot load skills, open the SKILL.md files in each repository and give them to it as instructions. Each component's Prompt tab has a version that tells the agent to do this by itself.
npx skills add https://github.com/greensock/gsap-skills --agent <your-agent>npx skills add wheresryan22/anatomy -g -a <your-agent>npx skills add heygen-com/hyperframesLicenses
GSAP skills and anatomy are MIT licensed; HyperFrames is Apache-2.0. Each one belongs to its authors; Motionshelf only points to them.