reanimated-skia-performance

SKILL.md

High-performance React Native animations and 2D graphics with Reanimated v4 and Shopify Skia.

Covers gesture-driven interactions, spring/timing transitions, layout animations, and Reanimated CSS transitions/keyframe animations without custom worklets

Supports Skia Canvas scenes with runtime effects, shader uniforms, path interpolation, and animated drawing primitives

Includes dev-mode tuning panels with sliders for real-time animation config and shader uniform adjustment

Provides performance diagnostics for animation jank, JS thread stalls, excessive re-renders, and per-frame memory allocation

Enforces UI-thread state management via useSharedValue and useDerivedValue to minimize JS↔UI crossings

Reanimated + Skia Performance

Defaults

Keep animation state on the UI thread: useSharedValue, useDerivedValue, worklets.

Prefer Reanimated v4 declarative APIs; avoid legacy Animated.

Prefer shared.get() / shared.set() over shared.value in app code (React Compiler friendly).

Minimize JS↔UI crossings: avoid scheduleOnRN/runOnJS except for unavoidable side effects.

For Skia, avoid per-frame React renders: pass SharedValues directly to Skia props/uniforms.

Workflow