Rive Interactive

If you need animations with real interactivity and state logic, not just playback, this is the Rive skill. It covers state machines, two-way data binding through ViewModels, input handling, and event systems that let animations talk back to your code. You get practical patterns for things like interactive buttons that respond to hover and click states, dashboards that update animated properties from live data, and event listeners that trigger app logic from animation events. The skill knows when to use boolean inputs versus triggers, how to bind real-time data to animated visualizations, and includes preloading strategies. Think of this as the step up from Lottie when your designer's animation needs to branch, respond, and maintain state instead of just playing through a timeline.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 7
skills.sh installs: 2.8K
GitHub stars: 1.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add freshtechbro/claudedesignskills --skill rive-interactive --agent claude-code

Installs into .claude/skills of the current project.

Files

Rive Interactive - State Machine-Based Vector Animation

Overview

Rive is a state machine-based animation platform that enables designers to create interactive vector animations with complex logic and runtime interactivity. Unlike timeline-only animation tools (like Lottie), Rive supports state machines, input handling, and two-way data binding between application code and animations.

Key Features: