An agent skill for Claude Code and Codex that turns AI-generated motion into web animations driven by scroll, mouse, drag, touch or device orientation.
frankxai/awesome-motion-design-agent-skills
A curated list of motion design resources and five installable agent skills for GSAP, Motion, Remotion, Lottie and Rive, usable in Claude Code, Codex and Copilot.
- Stars
- 69
- Forks
- 20
- Open issues
- 5
- Last commit
- 6 days ago
What is it?
This is an awesome-list of motion design resources aimed at AI coding agents. It collects web animation libraries such as GSAP, Motion, Anime.js and React Three Fiber, video tools like Remotion, and runtimes for Lottie and Rive, alongside third-party agent skill packs for the same stack.
The repository also ships five first-party skills in SKILL.md format. They cover product UI motion and stack choice, cinematic site choreography, deterministic video in React, generative media routing, and motion QA for reviewing and capturing web animation. A reduced-motion path and real-device verification are part of the stated guidelines.
Skills can be installed with npx skills add across many agents, through the Claude Code plugin marketplace, or by uploading zip files to Claude.ai. The project is released under CC0-1.0.
Key features
- 01Curated list of GSAP, Motion, Remotion, Lottie and Rive resources
- 02Five SKILL.md skills for UI motion, site choreography, React video and motion QA
- 03Installable with npx skills add, Claude Code plugin marketplace or zip upload
- 04Includes motion quality rubrics and site motion specs
- 05Lists third-party agent skill packs with install commands
Use cases
- Giving a coding agent guidance when building animated product interfaces
- Generating programmatic videos from React code with Remotion
- Reviewing web animations for motion quality before release
- Finding maintained animation libraries and skill packs for a motion stack
Quick start
- 1
Install all five skills into your agent with one command
npx skills add frankxai/awesome-motion-design-agent-skills - 2
Verify the installed skills
npx skills list
Things to know
- This repo is mainly a curated list of links, and many of its entries point to third-party projects that you would need to review separately.
- Installing skills runs instructions inside your agent, so the README advises scanning third-party packs before use.
Topics
FAQ
- What is awesome-motion-design-agent-skills?
- A curated list of motion design resources and five installable agent skills for GSAP, Motion, Remotion, Lottie and Rive, usable in Claude Code, Codex and Copilot. This is an awesome-list of motion design resources aimed at AI coding agents. It collects web animation libraries such as GSAP, Motion, Anime.js and React Three Fiber, video tools like Remotion, and runtimes for Lottie and Rive, alongside third-party agent skill packs for the same stack.
- Is awesome-motion-design-agent-skills free to use? What license does it have?
- awesome-motion-design-agent-skills is open source under the CC0-1.0 license. Check the license terms before using it in commercial products.
- Is awesome-motion-design-agent-skills still maintained?
- Actively maintained. The last commit to awesome-motion-design-agent-skills was on Oct 14, 2026.
- What can I use awesome-motion-design-agent-skills for?
- Giving a coding agent guidance when building animated product interfaces Generating programmatic videos from React code with Remotion Reviewing web animations for motion quality before release Finding maintained animation libraries and skill packs for a motion stack
- How do I install awesome-motion-design-agent-skills?
- Install all five skills into your agent with one command: npx skills add frankxai/awesome-motion-design-agent-skills Verify the installed skills: npx skills list
- Where can I get awesome-motion-design-agent-skills?
- The source code and installation instructions are on GitHub: https://github.com/frankxai/awesome-motion-design-agent-skills
Summary generated by AI from the project's README. GitHub stats refresh daily.
Related projects
A set of installable skills that give AI coding agents guidance on motion design, After Effects, Remotion video, logo animation, and motion backgrounds.
An agent skill that teaches AI coding agents motion design principles for UI animation, covering timing, easing, and choreography across any animation library.
An agent skill for Claude Code and Codex that turns your product pages into cinematic promo videos, built with Remotion code rather than generative AI.
A set of Agent Skills that teach AI coding agents such as Claude Code, Codex and Cursor best practices for building Remotion video projects.
A Claude Code skill that directs short films with 51 styles, each built entirely from code with no video generation model.