Rive Skills

AI coding skills for Rive - create interactive animations and graphics with best practices guidance.

These skills follow the Agent Skills open standard, providing AI coding assistants with domain-specific knowledge for Rive development.

Available Skills

rive-generator

Generate .riv files programmatically with TypeScript - no Rive editor required.

npx skills add stevysmith/rive-skills/skills/rive-generator
npm install @stevysmith/rive-generator

Triggers when:

• User wants to create a Rive animation programmatically
• User mentions "generate .riv file" or "create Rive animation"
• Working with programmatic animation generation

Covers:

• RiveFile API for building animations
• Shapes, paths, fills, strokes, gradients
• Keyframe animations
• Known constraints and workarounds

rive-scripting

Luau-based scripts that run inside Rive animations. Create procedural graphics, custom layouts, data converters, and path effects.

npx skills add stevysmith/rive-skills/skills/rive-scripting

Triggers when:

• Writing Luau scripts for Rive
• Creating Node, Layout, Converter, or PathEffect scripts
• Using Path, Paint, Renderer APIs for procedural drawing
• Handling pointer events in Rive scripts
• Files have .lua extension in a Rive project context

Covers:

• Script types and lifecycle (Node, Layout, Converter, PathEffect, Util)
• Drawing APIs (Path, Paint, Renderer, Vec2D, AABB, Mat2D)
• Blend modes and gradients
• Pointer event handling
• Data binding with ViewModel and Property
• Animation and Artboard control
• PathMeasure for path sampling
• Complete API reference

rive-web

Embed and control Rive animations on the web with JavaScript/TypeScript.

npx skills add stevysmith/rive-skills/skills/rive-web

Triggers when:

• Loading and displaying .riv files
• Using @rive-app/canvas or @rive-app/webgl packages
• Controlling state machines from JavaScript
• Reading/writing Rive inputs or handling events

Covers:

• Loading animations with various options
• State machine control
• Input types (Boolean, Number, Trigger)
• Event handling
• Cleanup patterns

rive-react

React components and hooks for Rive integration.

npx skills add stevysmith/rive-skills/skills/rive-react

Triggers when:

• Using @rive-app/react-canvas or @rive-app/react-webgl
• Using useRive hook or RiveComponent
• Building React components with Rive animations

Covers:

• useRive hook usage
• useStateMachineInput for typed input control
• Callback patterns (onLoad, onStateChange, onPlay, onPause)
• Layout, Fit, and Alignment configuration
• Scroll-based and parallax animations
• Component lifecycle and cleanup

Installation

Add individual skills:

npx skills add stevysmith/rive-skills/skills/rive-scripting
npx skills add stevysmith/rive-skills/skills/rive-web
npx skills add stevysmith/rive-skills/skills/rive-react

Or add all skills at once:

npx skills add stevysmith/rive-skills/skills/rive-scripting stevysmith/rive-skills/skills/rive-web stevysmith/rive-skills/skills/rive-react

Usage

Once installed, Claude Code (and other compatible AI assistants) will automatically apply these skills when working with Rive code. The skills provide:

• Best practices - Patterns that follow Rive conventions
• API references - Quick lookup for common operations
• Common pitfalls - Mistakes to avoid
• Code examples - Working snippets you can adapt

Examples

The examples/ directory contains sample Luau scripts demonstrating various techniques:

• procedural-shape.lua - Animated polygon with gradient stroke
• interactive-button.lua - Pointer event handling
• custom-layout.lua - Custom sizing and positioning

Documentation

• Rive Documentation
• Rive Scripting Guide
• Rive Web Runtime
• Rive React

Contributing

Contributions are welcome! If you find issues or want to add more best practices:

1. Fork the repository
2. Create a feature branch
3. Add or update rules in the skills/*/rules/ directories
4. Submit a pull request

License

MIT