SKILL0:56HyperFrames: write HTML, get a video
Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k/
SubmitLottieFiles motion-design principles skill
Timing, easing, choreography and Disney principles packaged so agents stop making stiff animations.
Try it in 60 seconds
npx skills add LottieFiles/motion-design-skill
Install command copied from the project README. Check the README for the latest version.
What it does
Timing, easing, choreography and Disney principles packaged so agents stop making stiff animations.
Universal motion design principles for AI agents. Philosophy-first, implementation-agnostic.
Teaches agents to think like motion directors — choosing the right timing, easing, choreography, and emotional intent before writing a single line of animation code. Works with any animation system (CSS, Framer Motion, GSAP, Lottie, Spring, etc.).
Quoted from the README of LottieFiles/motion-design-skill.
Inside the repo
InstallWhat's includedWhen it activatesExample promptsSkill structureLicense
Step by step
- Open the GitHub repo and skim the README (install commands change often).
- Install it: copy the skill folder into ~/.claude/skills/ (Claude Code) or ~/.codex/skills/ (Codex), or use the plugin/marketplace command from the README.
- Restart Claude Code or Codex.
- Ask for the job in plain words; the skill loads when your request matches.
Sources & credit
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
Related
SKILL0:56Claude Code +1★ 63.8k
SKILL0:34/brag: turn a finished project into a launch video
Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16k
SKILL0:28Anatomy: interactive isometric illustrations
Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.
Claude Code +1★ 10.6k
SKILLGSAP official agent skills
Official skills from GreenSock that teach agents to write correct, smooth GSAP animations.
Claude Code +1★ 16.4k
SKILLmotion-skills: 50 packs (Reels, explainers, data-viz, Manim)
Install a pack and your agent works like a motion designer for TikTok/Reels, explainers, charts and WebGL.
Claude Code +2★ 812
SKILLanimate: single-file procedural videos with a storyboard
Makes short canvas videos in any style, planning story, look and storyboard as it goes.
Claude Code★ 703Coming soon
AgentsUses Weekly
A free weekly email with the best new skills and agent workflows is coming soon. Want a heads-up when the first issue goes out? Email [email protected] and we will let you know.