---
slug: "rive-skills-stevysmith"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/stevysmith/rive-skills@main/README.md"
repo: "https://github.com/stevysmith/rive-skills"
source_file: "README.md"
branch: "main"
---
# Rive Skills

AI coding skills for [Rive](https://rive.app) - create interactive animations and graphics with best practices guidance.

These skills follow the [Agent Skills](https://skills.sh) 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.

```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

## Installation

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
```

## 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](https://rive.app/docs)
- [Rive Scripting Guide](https://rive.app/docs/editor/scripting)
- [Rive Web Runtime](https://rive.app/docs/runtimes/web/web-js)
- [Rive React](https://rive.app/docs/runtimes/web/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