nathankim0/riv-editor/rive-editor

Rive Editor

Overview

Use this skill for direct .riv asset work. Prefer editing the Rive file itself over Flutter/React/native overlays when the user asks to change a Rive character or animation.

The bundled script is dependency-light Python and works on Rive runtime binary files by parsing object type keys, property keys, names, parent ids, color fields, opacity/scale, and selected visibility fields.

Safety Model

Do not physically delete bytes from a .riv file. Rive object ids are positional; removing bytes usually shifts ids and breaks parent, draw-order, animation, and target references.

For “delete this part”, prefer one of these in order:

1. --nullify-pattern REGEX --include-descendants: change matching objects and descendants to an unused 1-byte type key so the runtime reads them as null objects while object ids stay stable.
2. --hide-paint-pattern REGEX: set existing ShapePaint.isVisible fields to false when those fields exist.
3. Color patching only when the user explicitly accepts color/alpha hiding.

Always inspect first, patch a copy or use backups, then verify the app or renderer can still load the file.

Script

Use:

python3 /Users/jinyeob/.claude/skills/rive-editor/scripts/riv_editor.py inspect path/to/file.riv --match 'fire|flame' --colors

Patch examples:

# Recolor body-like parts to app primary while keeping eyes/mouth readable.
python3 /Users/jinyeob/.claude/skills/rive-editor/scripts/riv_editor.py patch asset.riv \
  --in-place --backup \
  --primary-character 'body|face|head|ear|tail|leg|foot|eye|mouth|tongue' \
  --primary F19100 \
  --primary-dark 8A5200 \
  --primary-light FFCC80
 
# Remove fire-like objects without changing file length or ids.
python3 /Users/jinyeob/.claude/skills/rive-editor/scripts/riv_editor.py patch asset.riv \
  --in-place --backup \
  --nullify-pattern 'fire|flame|small_f|big_f' \
  --include-descendants
 
# Set exact colors by path regex.
python3 /Users/jinyeob/.claude/skills/rive-editor/scripts/riv_editor.py patch asset.riv \
  --in-place \
  --color-rule 'body|face=F19100' \
  --color-rule 'eye|mouth=8A5200'

Workflow

1. Confirm the user wants direct .riv edits and not runtime code.
2. Run inspect --match for likely part names and inspect --colors to map visible color fields.
3. Identify the displayed artboard. Many .riv files include nested or unused artboards, so inspect paths and state-machine names before patching broadly.
4. Patch with the narrowest regex that covers the requested part.
5. Re-run inspect or a byte/color check to confirm unwanted parts/colors are gone.
6. Run the project’s normal asset loading/build verification. For Flutter projects, follow project rules; do not run Flutter tests if the repo forbids them.

Practical Notes

• Rive colors are 32-bit AARRGGBB, stored little-endian in the file.
• Component name property key is 4; parent id is 5; color fields commonly include 37, 38, 88, 555, 638, and 651.
• WorldTransform.opacity key is 18; scaleX/scaleY are 16/17; ShapePaint.isVisible is 41; Drawable.drawableFlags is 129.
• --nullify-pattern only changes 1-byte object type keys. If a target has a multi-byte type key, the script skips it instead of corrupting the file.
• Keep a backup when working on user assets unless version control already protects the file.