rive-web

rive-generator

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

```bash

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.

```bash

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.

```bash

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.

```bash

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

Add individual skills:

```bash

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:

```bash

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

```

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

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

• [Rive Documentation](https://rive.app/docs)
• [Rive Scripting Guide](https://rive.app/docs/editor/scripting)
• [Rive Web Runtime](https://