reanimated-skia-performance — Claude Code skill for RN animations

What reanimated-skia-performance does

The skill sets the rules an agent follows when writing or reviewing animation code: state stays on the UI thread via useSharedValue, useDerivedValue and worklets, and the declarative Reanimated v4 API replaces legacy Animated. App code should call shared.get() and shared.set() rather than touch .value, which keeps React Compiler happy. JS-to-UI crossings are kept to a minimum, and runOnJS or scheduleOnRN is reserved for side effects that cannot be avoided.

With Skia the rule is blunt: no React render per frame. A SharedValue goes straight into props and uniforms, the runtime effect is compiled once with useMemo, and shader time comes from useClock wrapped in useDerivedValue. The skill also covers the usual jobs — gesture handling through the Gesture Builder API, CSS transitions and keyframes in Reanimated v4, Layout Animations for mount and unmount, and a __DEV__ slider panel for tuning configs. A pitfalls list names the common ones: reading a shared value during render, allocating arrays or paths every frame, a uniform declared in the shader but never passed.

Four reference files ship with it: Reanimated v4 patterns, Skia shaders, the dev tuning panel, and a performance checklist. Worth installing if your project already runs react-native-reanimated v4 or newer alongside @shopify/react-native-skia — on older Reanimated the CSS transition and keyframe examples will not compile.