When should I use Rive instead of Lottie?

Rive is superior for interactive, state-driven animations and performance-critical tasks (60fps), whereas Lottie is better if your workflow is centered around Adobe After Effects.

How does this skill handle animation performance?

It provides best practices for file size optimization, path simplification, and hardware-accelerated rendering to ensure animations run smoothly even on low-end devices.

Can I use this for React Native projects?

Yes, the skill includes specific implementation patterns and dependency guidance for using both Lottie and Rive within React Native applications.

Does it support AI animation generators?

Absolutely. It includes optimized workflows for using LottieFiles AI, Recraft, and Jitter to generate high-quality assets from text descriptions or vector designs.

Lottie & Rive Animation Expert

Name: Lottie & Rive Animation Expert
Author: willsigmon

bywillsigmon

•

Design Tools

Implements lightweight, interactive animations for web and mobile using Lottie and Rive frameworks.

This skill equips Claude with the expertise to guide developers through the creation, optimization, and implementation of modern vector animations. It provides deep technical insights into both Lottie (JSON-based) and Rive (.riv) formats, helping users decide which tool is best for their specific performance and interactivity needs. From AI-powered creation workflows to platform-specific code snippets for iOS, Web, and React Native, this skill ensures that animations are not only visually stunning but also accessible and performant.

Key Features

01Cross-platform implementation guides for iOS, Web, and React Native

02Accessibility-first animation patterns including reduced motion support

037 GitHub stars

04Performance optimization techniques for high-frame-rate interactions

05Comparative analysis of Lottie vs. Rive for specific project needs

06AI-assisted animation creation workflows using LottieFiles and Recraft

Use Cases

01Creating lightweight, high-performance loading states and empty states

02Building interactive onboarding flows and feature highlights

03Implementing complex micro-interactions and stateful UI elements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add willsigmon/sigstack lottie-rive-expert

For use in Claude.ai and ChatGPT

Download Skill