Agent Skills Hub · 60fps Code Motion

Agent Motion Skills for Claude & Cursor

Install motion design skills into Claude Code, Cursor, and Antigravity. Give your coding agent verified 60fps animation rules, closed-form damping springs, and complete Remotion video workflows in one terminal command.

Claude CodeCursor RulesAntigravityWindsurf

quick install · core motion skill

$curl -sSL https://promptmotion.io/api/skills/raw/motion-designer -o .claude/skills/motion-designer/SKILL.md

Verified Motion Skills for Coding Agents

Curated 60fps workflows and system instructions sourced from motion designers on X and GitHub.

Core EngineHTML5 Canvas

Claude CodeCursorAntigravityWindsurf

Motion Designer Core

The foundational 60fps code-motion skill for Claude Code & Cursor

Provides deterministic motion engineering rules for coding agents: absolute requestAnimationFrame timing, closed-form damping springs, safe-area responsive reflow, and single-file HTML delivery.

By Prompt Motion@promptmotion

Built-in Engineering Rules:

Pure single-file HTML output with zero external npm dependencies or CDN font requests
Absolute requestAnimationFrame timeline calculation (strictly prevents frame-delta drift)
Built-in closed-form spring mathematics: analytical step responses without numerical instability

Example Trigger:"Create a self-contained 60fps motion graphic for my hero section"

Full Documentation

Launch VideoRemotion

Claude CodeAntigravityCursor

SaaS Launch Film Director

Director-grade 20s product video workflow by Baptiste Kelano

Direct, stage, and render punchy 20-second animated launch films for Product Hunt and Twitter releases. Sourced from Baptiste Kelano’s viral Haiku release workflow.

By Baptiste Kelano@kelanoo

Built-in Engineering Rules:

Audio-first rhythm mapping: snaps key actions and transitions to musical beat onsets
Verification loops: strict silent-read cuts and side-by-side key-pose matching
Tight 6-color maximum palette and boiling redraw jitter for tactile indie quality

Example Trigger:"Make a 20-second animated launch film for my SaaS product"

Full Documentation

Story & NarrativeHyperFrames

Claude CodeCursorAntigravity

Agent Storytelling & HyperFrames

Warm watercolor storytelling workflow by Jake Moran & HeyGen

Creates charming, character-driven session stories with cozy paper textures, illustrated blocks, and synchronized props. Powered by the open-source HyperFrames community skills.

By Jake Moran@jake11moran

Built-in Engineering Rules:

Tactile paper textures and boiling watercolor displacement line filters
Physical paper props (such as paper planes for tasks) carrying narrative beats
Character facial expression sets modulated by state triggers

Example Trigger:"Tell an animated session story showing how an AI agent helped a user today"

Full Documentation

Typography & MorphSVG

Claude CodeCursorAntigravity

Kinetic Typography & Morph

Beat-synced continuous UI morphing workflow by zero (@twoclipping)

Continuous single-element morphing through buttons, toggles, charts, and command palettes on a 120 BPM grid. Created by zero (@twoclipping).

By zero@twoclipping

Built-in Engineering Rules:

One continuous element that never cuts: size, radius, and color morph simultaneously
Every style computed from elapsed time inside seek(t) with no CSS transition lag
Dual-spring mechanics: tab indicator edges ride distinct springs for organic stretch

Example Trigger:"Create a continuous morphing sequence across 8 UI states on 120 BPM"

Full Documentation

Technical ExplainerHTML5 Canvas

Claude CodeCursorAntigravity

Interactive 3D Explainer

Browser-disassembly engineering diagram skill by Konstantin Saifoulline

Generates interactive technical diagrams (inspired by the Raptor 3 rocket engine explainer) that users can disassemble, rotate, and inspect directly in the browser.

By Konstantin Saifoulline@konstantinsaifo

Built-in Engineering Rules:

Layered isometric rendering on pure 2D Canvas without heavy WebGL engine baggage
Direct manipulation: mouse drag controls rotation, slider controls exploded-view offset
Smart technical callout annotations with leader lines that dynamically follow part coordinates

Example Trigger:"Explain how a rocket engine works by building an interactive 3D model you can disassemble"

Full Documentation

Prefer instant parameter customization without coding?

Explore our tested visual templates. Customize copy, colors, and timing in your browser, then copy the ready-to-paste prompt.

Explore Motion Templates

Frequently Asked Questions

Everything You Need to Know About Agent Skills

How do I install motion skills into Claude Code?

Run the curl command in your project terminal. It saves the instructions into .claude/skills/<skill-name>/SKILL.md. Claude Code automatically reads the file and enforces its 60fps animation rules whenever you ask for motion designs.

How do I use these skills with Cursor rules (.mdc), Windsurf, or Antigravity?

For Cursor, place the skill markdown into .cursor/rules/<skill-name>.mdc. For Windsurf, add the text to .windsurfrules. For Antigravity, save it to .gemini/antigravity/skills/<skill-name>/SKILL.md. All skill files are pure Markdown instructions with zero vendor lock-in.

Do these motion skills require After Effects or heavy npm dependencies?

No. Every skill strictly enforces self-contained code output (pure HTML5 Canvas, responsive SVG, or Remotion) with zero remote CDN dependencies, guaranteeing instant rendering in browser sandboxes and headless renderers.

How do agent skills differ from standard Claude or Cursor prompts?

A standard prompt only provides guidance for a single chat turn. An agent skill file persists in your repository (.claude/skills/ or .cursor/rules/), giving Claude Code and Cursor continuous context on spring physics, frame-delta timing, and responsive safe areas whenever you generate motion graphics.

Are the animations and code generated by these skills free for commercial use?

Yes. All prompt templates, skill instruction files, and generated code run under CC0-1.0 or MIT open source licenses. You own 100% of the code your agent generates.