Agent Skills, Assets and Tools for Web Animation

Skills for motion that feels right (GSAP, Framer Motion, CSS transitions, Lottie), with animation assets and libraries.

Give it to your agent

# Web animation: what to use (AgentGid, 2026-10-23)

## Agent Skills (install once)
- npx skills add emilkowalski/skills --skill animate-expo  # animate-expo: Build animations in React Native and Expo, making the decisions in the order that determin
- npx skills add emilkowalski/skills --skill animate  # animate: Build an animation from scratch, making the decisions in the order that determines whether
- npx skills add greensock/gsap-skills --skill gsap-core  # gsap-core: Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stag
- npx skills add greensock/gsap-skills --skill gsap-frameworks  # gsap-frameworks: Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping s
- npx skills add ConardLi/garden-skills --skill motion-showreel  # motion-showreel: 用代码制作以图形、文字或界面动画为主的短视频（常见 5–60 秒，纯音乐片最长约 2 分钟），输出 MP4 和可编辑源码：产品宣传短片、动效作品集、UI 动效演示、动态排版与金句卡
- npx skills add ibelick/ui-skills --skill fixing-motion-performance  # fixing-motion-performance: Audit and fix animation performance issues including layout thrashing, compositor properti
- npx skills add tech-leads-club/agent-skills --skill sales-motion-design  # sales-motion-design: When the user wants to choose between PLG and sales-led, design a sales motion, optimize t
- npx skills add MengTo/Skills --skill optimize-web-animations  # optimize-web-animations: Profile, audit, and optimize frontend page performance with emphasis on animation work, me
- npx skills add MengTo/Skills --skill game-dev-combat-animation  # game-dev-combat-animation: Build, fix and review character combat animations (melee strikes, bow shots, spell casts, 
- npx skills add fengshao1227/ccg-workflow --skill animate  # animate: Review a feature and enhance it with purposeful animations, micro-interactions, and motion

## Libraries
- npm install framer-motion  # Framer Motion, Gid Score 84
- npm install motion  # Motion, Gid Score 78
- npm install embla-carousel-react  # Embla Carousel, Gid Score 74
- npm install gsap  # GSAP, Gid Score 73
- npm install tailwindcss-animate  # Tailwind CSS Animate, Gid Score 73

Install commands for the skills, the libraries, and each content source with its license rules. Paste it into AGENTS.md or your first prompt.

Agent Skills

Skill	Pack	What it does and how to install
animate-expo	emilkowalski/skills 48.8K stars	Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture… `npx skills add emilkowalski/skills --skill animate-expo`
animate	emilkowalski/skills 48.8K stars	Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate… `npx skills add emilkowalski/skills --skill animate`
gsap-core	greensock/gsap-skills 17K stars	Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation,… `npx skills add greensock/gsap-skills --skill gsap-core`
gsap-frameworks	greensock/gsap-skills 17K stars	Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation… `npx skills add greensock/gsap-skills --skill gsap-frameworks`
motion-showreel	ConardLi/garden-skills 13.2K stars	用代码制作以图形、文字或界面动画为主的短视频（常见 5–60 秒，纯音乐片最长约 2 分钟），输出 MP4 和可编辑源码：产品宣传短片、动效作品集、UI 动效演示、动态排版与金句卡点、Logo 演绎与片头、生成艺术循环、年代回顾短片。配乐可选：代码合成，或按用户提供的曲子卡点。用户想做这类短视频或动效时使用，例如「做个 15 秒动效视频」「做个 Logo 动画 / 片头」「做个产品宣传短片」「用代码做视频」。不用于：口播讲解类长视频、网页与交互原型、写实人物或实拍内容、剪辑已有视频。 has scripts `npx skills add ConardLi/garden-skills --skill motion-showreel`
fixing-motion-performance	ibelick/ui-skills 10.1K stars	Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. `npx skills add ibelick/ui-skills --skill fixing-motion-performance`
sales-motion-design	tech-leads-club/agent-skills 7,083 stars	When the user wants to choose between PLG and sales-led, design a sales motion, optimize time-to-first-value, or build a value-before-purchase experience. Also use when the user mentions 'PLG,' 'product-led growth,' 'sales-led,' 'sales motion,' 'free trial,' 'freemium,' 'self-serve,' 'demo-first,'… `npx skills add tech-leads-club/agent-skills --skill sales-motion-design`
optimize-web-animations	MengTo/Skills 6,954 stars	Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to… `npx skills add MengTo/Skills --skill optimize-web-animations`
game-dev-combat-animation	MengTo/Skills 6,954 stars	Build, fix and review character combat animations (melee strikes, bow shots, spell casts, skills, monster attacks, whole move sets) so they read like Diablo IV, Baldur's Gate 3 or Elden Ring and never stretch, lock, wring or break an arm, wrist or hand. A written standard with numbered rules,… has scripts `npx skills add MengTo/Skills --skill game-dev-combat-animation`
animate	fengshao1227/ccg-workflow 5,941 stars	Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. `npx skills add fengshao1227/ccg-workflow --skill animate`
text-to-lottie	diffusionstudio/lottie 5,619 stars	Create, edit, or fix Lottie/Bodymovin JSON animations for the local Skia Skottie player. Use for text-to-Lottie, SVG/logo/type animation, loaders/icons, state feedback, UI microinteractions, lower thirds, diagrams, data/stat/chart animations, product promos, scene/camera motion, visual effects,… `npx skills add diffusionstudio/lottie --skill text-to-lottie`
transitions-agent	Jakubantalik/transitions.dev 5,535 stars	Scan a codebase for missing, janky, or inconsistent UI motion and fix it with transitions.dev recipes. ALWAYS use this skill when the user's message is or contains a transitions-agent command (npx transitions-agent, npx transitions-agent fix, any variant) - the command is a request for the full… `npx skills add Jakubantalik/transitions.dev --skill transitions-agent`
transitions-dev	Jakubantalik/transitions.dev 5,535 stars	Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer… `npx skills add Jakubantalik/transitions.dev --skill transitions-dev`
r3f-animation	zebbern/claude-code-guide 4,677 stars	React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motion, or implementing physics-based movement. `npx skills add zebbern/claude-code-guide --skill r3f-animation`
threejs-animation	CloudAI-X/threejs-skills 3,692 stars	Keyframe, skeletal and morph-target animation, procedural motion and clip blending, on WebGL or with WebGPU and TSL. Use when animating objects, playing glTF animations, posing bones, driving morph targets, or mixing and crossfading clips. `npx skills add CloudAI-X/threejs-skills --skill threejs-animation`
ian-xiaohei-svg-motion	Agentchengfeng/chengfeng-videocut-skills 3,120 stars	Create Ian Xiaohei-style HTML/SVG motion illustrations for Chinese articles, scripts, storyboard scenes, workflow explanations, concept metaphors, and short video visual aids. Use when the user asks for 小黑 SVG、漫画感 HTML、分层 SVG 动效、把小黑生图做成 HTML/SVG、可编辑矢量动效、口播流程动画、手绘漫画动效、正文配图动画, or wants a Xiaohei… has scripts `npx skills add Agentchengfeng/chengfeng-videocut-skills --skill ian-xiaohei-svg-motion`
motion-system	Owl-Listener/designer-skills 3,035 stars	Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use `animation-principles` (interaction-design). `npx skills add Owl-Listener/designer-skills --skill motion-system`
animation-principles	Owl-Listener/designer-skills 3,035 stars	Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`. `npx skills add Owl-Listener/designer-skills --skill animation-principles`
godot-animation	gamedev-skills/awesome-gamedev-agent-skills 2,968 stars	Animate in Godot 4.7 three ways: AnimationPlayer for keyframed clips (incl. call and signal tracks), AnimationTree with state machines and blend spaces for character animation, and Tween for short procedural/UI tweens via create_tween(). Use when working with AnimationPlayer/AnimationTree nodes in… `npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill godot-animation`
unity-animation	gamedev-skills/awesome-gamedev-agent-skills 2,968 stars	Drive Unity 6.3 LTS character animation with Animator Controllers: states, transitions, parameters, blend trees, animation layers, and humanoid Avatar IK. Use when wiring an Animator, setting parameters from script (SetFloat/SetBool/SetTrigger), building blend trees, or when the user mentions… `npx skills add gamedev-skills/awesome-gamedev-agent-skills --skill unity-animation`
oil-motion	oil-oil/oil-motion 2,663 stars	把 AI 生成或已有的视频、序列帧变成随滚动、指针、拖动、触摸、设备方向、音频、数据或状态变化的网页动画：设计动作方向，生成关键帧与视频，整理成图集或视频，编译时间轴并接入运行时。用户需要角色转向、产品拆解、镜头穿越、一镜到底转场，或要清理、抠色、补帧、压缩绿幕视频与雪碧图时使用。不用于纯 CSS、JS、SVG、Lottie 或实时 3D 就能完成的界面过渡与微交互（交给普通前端实现），也不用于独立成片剪辑、单张配图或静态页面。 `npx skills add oil-oil/oil-motion --skill oil-motion`
create-motion-graphics	0xsline/OpenChatCut 2,630 stars	Use whenever the agent needs to add, create, hand-author, patch, or place Motion Graphic JSX assets in a OpenChatCut project. This is the direct-authoring path: use create_motion_graphic_from_code / edit_asset / edit_item, not motion-graphic-gen or submit_motion_graphic. Covers project/timeline… `npx skills add 0xsline/OpenChatCut --skill create-motion-graphics`
motion-graphic-placement	0xsline/OpenChatCut 2,630 stars	Add motion graphics at the right moments without blocking the story. Use when the user wants to enhance talking-head, lecture, tutorial, interview, podcast, or creator videos with motion graphics. `npx skills add 0xsline/OpenChatCut --skill motion-graphic-placement`
motion-design	LottieFiles/motion-design-skill 2,446 stars	Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions,… `npx skills add LottieFiles/motion-design-skill --skill motion-design`

Names and descriptions come from each skill's SKILL.md. Packs with more GitHub stars first, at most a few skills from one pack.

Libraries projects use for this

Framer Motion	Simple and powerful animation library for React components. `npm install framer-motion` · Gid Score 84
Motion	Animation library for JavaScript and React with simple, powerful motion primitives. `npm install motion` · Gid Score 78
Embla Carousel	Lightweight carousel component with fluid motion and precise swipe handling for React. `npm install embla-carousel-react` · Gid Score 74
GSAP	Professional animation library for high-performance CSS, SVG, canvas and React animations. `npm install gsap` · Gid Score 73
Tailwind CSS Animate	Tailwind CSS plugin adding ready-to-use animation utilities. `npm install tailwindcss-animate` · Gid Score 73

Web design Landing page Dashboard UI Mobile app Design polish Accessibility Web animation Product video Remove AI writing tells