Rive Skills for Claude

Comprehensive Claude Code skills for working with the Rive interactive animation platform.

Overview

This skill package provides Claude with deep knowledge of the entire Rive platform:

• Rive Editor - Artboards, shapes, constraints, layouts, text, animation mode
• Rive Scripting (Luau) - All protocol types (Node, Layout, Converter, PathEffect, Test)
• State Machines - States, inputs, transitions, listeners, layers
• Data Binding - View Models, lists, converters, runtime data binding
• Events - Rive events, audio events, runtime event handling
• Web Runtimes - React/Next.js, vanilla JS, Canvas, WebGL
• Mobile Runtimes - Flutter, iOS (Swift), Android (Kotlin), React Native
• Game Runtimes - Unity, Unreal Engine, Defold

Installation

Option 1: Using npx (Recommended)

Install via skills.sh - the skills package manager by Vercel:

npx skills add bowtiedswan/rive-skills

Option 2: Clone and Install Locally

# Clone the repository
git clone https://github.com/bowtiedswan/rive-skills.git

# Copy to Claude skills directory
cp -r rive-skills ~/.claude/skills/

Option 3: Manual Installation

1. Download the repository
2. Copy the rive-skills folder to ~/.claude/skills/

Skill Contents

rive-skills/
├── SKILL.md                                    # Main skill file
├── README.md                                   # This file
└── references/
    ├── rive-scripting-api.md                   # Complete Luau scripting API
    ├── rive-react-runtime.md                   # React/Next.js runtime
    ├── rive-editor-fundamentals.md             # Editor interface & basics
    ├── rive-animation-mode.md                  # Timeline, keys, easing
    ├── rive-state-machine.md                   # States, inputs, transitions
    ├── rive-constraints.md                     # All constraint types
    ├── rive-layouts.md                         # Flexbox layouts, N-Slicing
    ├── rive-manipulating-shapes.md             # Bones, meshes, clipping
    ├── rive-text.md                            # Fonts, text runs, modifiers
    ├── rive-events.md                          # Rive & audio events
    ├── rive-data-binding.md                    # View Models & data binding
    ├── rive-web-runtime.md                     # Vanilla JS, WASM, Canvas/WebGL
    ├── rive-flutter-runtime.md                 # Flutter widgets & controllers
    ├── rive-mobile-runtimes.md                 # iOS, Android, React Native
    └── rive-game-runtimes.md                   # Unity, Unreal, Defold

Reference Guides

Editor Features

Runtimes

What This Skill Enables

When loaded, Claude can help you with:

Rive Editor

• Navigate the Rive interface and tools
• Create and organize artboards, shapes, and components
• Set up constraints (IK, Follow Path, etc.)
• Build responsive layouts with Flexbox-like system
• Work with bones, meshes, and deformations
• Configure text with fonts, runs, and modifiers

Animation Design

• Create timeline animations with keyframes and easing
• Build state machines with complex transition logic
• Set up data binding with View Models
• Implement events for app communication
• Design scroll-based and interactive animations

Runtime Integration

• Integrate Rive into React/Next.js applications
• Use vanilla JavaScript with Canvas or WebGL
• Build Flutter apps with Rive animations
• Develop iOS and Android native apps
• Create games with Unity, Unreal, or Defold

Scripting

• Write Node scripts for custom rendering
• Create Layout scripts for custom positioning
• Build Converter scripts for data transformation
• Implement PathEffect scripts for procedural paths
• Handle pointer events and user interactions

Usage Examples

Once installed, Claude will automatically use this skill when you ask about Rive:

"Help me create a scroll-based animation with Rive in Next.js"

"Write a Rive Node script that draws a custom particle system"

"How do I set up IK constraints for a character rig?"

"Implement data binding with View Models in Flutter"

"Create a state machine with hover and click states"

"How do I handle Rive events in Unity?"

Documentation Sources

This skill is based on official Rive documentation:

• Rive Editor Docs
• Rive Scripting Docs
• Rive Runtime Docs
• Rive Game Runtime Docs

Contributing

Contributions are welcome! If you find missing API methods or have improvements:

1. Fork the repository
2. Make your changes
3. Submit a pull request

License

MIT License - Feel free to use and modify.

Author

Created by @bowtiedswan