The agent runs bun and the OpenRive command-line client and creates and exports files on disk
Remote MCP access is protected by a key, while the local desktop server runs without sign-in by default

This is third-party code. Review the repository files before installing.

What it does

OpenRive is an open-source editor for Rive (.riv) files with local storage, no accounts and no cloud. The repository gives an agent three product skills. openrive-create-animation creates, edits and exports a file through the editor's MCP server, and falls back to the command-line client without MCP. openrive-embed-animation puts a finished .riv into a web, React and Next.js, Flutter, Android Kotlin, iOS Swift, React Native, Unity, Unreal or C++ project. openrive-verify-animation checks the file, runtime controls, the host app lifecycle, the build, accessibility and attribution. The creation skill starts from the template list and picks the closest one instead of a blank file. The agent gives artboards, objects, timelines, state machines and properties meaningful names, and the embedding step later finds elements by those names instead of guessing indexes. The OpenRive MCP server itself has 42 tools and returns a link to watch the result appear in the editor. The same repository holds internal skills and subagents for developing OpenRive itself. Only contributors need them.

Who it is for. Frontend and mobile developers who ask an agent to build an interactive Rive animation and wire it into their app.

Good fit when

You need a loading animation of three bouncing dots that pauses on click
A button or toggle in the app should react to the pointer through a Rive state machine
A finished .riv has to go into a Flutter or React Native project with artboard and state names checked
Before release you want the animation checked for accessibility and the build, not only how it looks in the editor
A team wants a local replacement for a cloud editor with export that official Rive runtimes understand

Not a fit when

The animation has to be CSS or Lottie, since the skills work only with .riv files
You want an editor from Rive Inc. itself: OpenRive is independent and not affiliated with the company
You cannot install Bun on the machine, and the editor and its MCP server run through it
You only want to change OpenRive code, where the contributor skills fit rather than the product ones

Example request

Make a loading animation of three bouncing dots in brand purple that pauses on click, and embed it into my React project.

Limitations

The creation skill talks to a running OpenRive, which needs Bun 1.4 or newer and a clone of the repository. The install command adds the whole set, including internal skills for developing OpenRive itself, and the product ones are picked with the `--skill` flag. Every embedding must add an attribution comment to the source code, and no badges go into the animation interface. OpenRive is not affiliated with Rive Inc. On Windows and Linux the skills run through Bun, and where symlinks cannot be created, install them with the `--copy` flag.

How to disable. Delete the openrive-create-animation, openrive-embed-animation and openrive-verify-animation folders from the agent's skills directory. The MCP server is disabled by removing the openrive entry from .mcp.json.

FAQ

How do I install the OpenRive skills in Claude Code?

Run npx skills add UpstandPlatform/OpenRive and optionally add --agent claude-code. The command installs the whole set. To take only the product skills, list three --skill flags with their names.

Does OpenRive have to be running for the skills to work?

Yes, the creation skill works through the OpenRive MCP server or command-line client, so the editor must run locally or on your server. The embedding and verification skills also work with a ready .riv file.

How is OpenRive different from the Rive editor?

OpenRive reads and writes the real .riv format and draws the canvas with the official Rive WASM runtime, but runs locally with no accounts. It is an independent project not affiliated with Rive Inc.

Which platforms does the embedding skill support?

Web, React and Next.js, Flutter, Android Kotlin, iOS Swift, React Native, Unity, Unreal and C++. It takes artboard and state names from the get_project or inspect_riv response.

How does the agent verify the result?

It checks the saved file with diagnose_project and gets a PNG preview from render_preview. The agent makes several related edits in one apply_edit_plan call.

Discussion

No questions or reviews yet.

Skills

Oil Motion

A skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt

SkillBroad access2.9K

Motion For Anything You Draw

A skill that animates anything drawn in code: characters, water, smoke, icons and scenes in React Native and SwiftUI

SkillMinimal access803

fy-code-animation

A skill that turns copy, a style brief and sound into coherent code animation: storyboard, style choice, Remotion and review.

SkillExtended access333

Raphael Salaja Skills

A skill set for agent UI work: scope, restraint and motion rules plus checks of the result in the live app

PluginExtended access67

Motion2Code

Motion2Code includes a web-animation skill: the agent checks output against source frames and shows both versions side by side.

SkillExtended access353

Open 3D Skills

Eight skills for 3D and animated websites: three.js scenes from code, scroll films, transparent video, exploded machine views

SkillExtended access353

Comparison with similar tools

Cards that share the main search query, and how they differ.

Tool	Official	Repository stars	Main difference
OpenRive: skills for Rive animations (this card)	yes	79
Remotion Agent Skills	no	6,903	builds video in React rather than interactive animations for apps
Spine Animation AI	no	673	drives 2D character animation in Spine rather than Rive files

README in short

The README presents OpenRive as a local .riv editor with a web app, desktop build, terminal UI, MCP server and REST API. The skills are described in a separate document on working with agents and install through the skills utility.

README badge

Original SKILL.md

---
name: openrive-create-animation
description: Create, inspect, edit, and export production-ready Rive animations through OpenRive's MCP server or CLI. Use when an agent needs to author a .riv file, add interactivity, or prepare an animation for another application.
---

# Create an animation with OpenRive

Use this skill when the requested result is a real `.riv` asset, not a mockup or a CSS-only animation.

## Choose the connection

1. Prefer the OpenRive MCP server when the agent has an MCP connection.
- Local stdio uses the configured `openrive` server in `.mcp.json`.
- HTTP MCP uses the deployment's `/api/mcp` endpoint and a scoped bearer key.
- Remote MCP requests must send `.riv` bytes as `dataBase64`; filesystem paths are local-stdio only.
2. Use the OpenRive CLI when MCP is unavailable:

```bash
bun run cli templates
bun run cli new "Animation name" --template interactive-button
bun run cli info "Animation name" --json
bun run cli export "Animation name" ./animation.riv
bun run cli validate ./animation.riv
```

3. If neither interface is available, explain the missing connection and provide the exact setup needed. Do not invent a `.riv` binary or silently substitute an unrelated format.

## Work on Windows and Linux

- Use `bun` commands and agent file tools; do not require Bash, `sed`, `grep`, `chmod`, `/tmp`, or Unix-only process behavior.
- Quote paths that contain spaces. Use `./relative/path` in documentation when a shell path is needed, and let the host shell resolve the absolute path.
- Keep web asset URLs and paths inside generated JavaScript in forward-slash form. Host application code must use its platform path API rather than concatenating backslashes or slashes.
- Local stdio MCP works on both Windows and Linux when the client launches `bun` from the repository. If an agent cannot create symlinks, install skills with `--copy`.

## Build the file

1. Call `list_templates` first. Pick the smallest template or example that teaches the requested behavior; use `blank` only when no existing starter fits.
2. Create one named project and keep its project id/ref for the entire task.
3. Name every artboard, object, timeline, state machine, state, property, and theme that the host application will need to address later. Names are the stable handoff API.
4. Use the high-level OpenRive API through MCP tools. Do not edit the internal serialized document directly.
5. For interaction, prefer data-binding properties with `add_property` and `set_property_value`. Use `add_input` only when preserving a legacy file that already depends on deprecated state-machine inputs. Add transitions and listeners against the named property.
6. For visual customization, define theme colors and bind fills/strokes to them. This gives the host application a safe way to recolor the animation.
7. For motion, create a timeline, add keyframes, then connect it to an animation state. Use explicit easing and duration. For pointer interaction, add a named hit-area shape and listener rather than relying on an invisible DOM overlay.
8. Keep the artboard bounds and origin intentional. Confirm the requested animation fits the artboard at its default size.

Report a problem

Install

Access and checks