Repolode
frankxai

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. 1

    Install all five skills into your agent with one command

    npx skills add frankxai/awesome-motion-design-agent-skills
  2. 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