Skills
.Work. You
Rest

lottie-rive

Community

Ship interactive vector animations with React

Software Engineering#react#lazy loading#state machine#lottie#rive#reduced motion#animation performance
Authorandersoncollab
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Lottie and Rive reduce the cost of shipping rich vector animations by helping you replace GIFs and video with browser-ready assets that stay crisp and performant.

Core Features & Use Cases

  • Lottie integration for After Effects exports: Use Bodymovin JSON to render playback-only animations for loading spinners, success/error states, and onboarding illustrations.
  • Rive integration for interactive state machines: Use .riv files to drive hover/click/scroll-reactive UI behaviors via React-controlled inputs and triggers.
  • Production performance guardrails: Apply lazy loading, explicit sizing to prevent layout shift, renderer selection (WebGL vs Canvas), and reduced-motion fallbacks.

Quick Start

Ask the skill to generate a React component that plays a Lottie loading animation above the fold, lazily loads the animation below the fold, and uses a reduced-motion fallback.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: lottie-rive
Download link: https://github.com/andersoncollab/design-agent/archive/main.zip#lottie-rive

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.