animations-nativelisted

Authors performant React Native / Expo animations with Reanimated and gesture handling with react-native-gesture-handler, running motion on the UI thread so it stays at 60/120 fps. Covers worklets, shared values, useAnimatedStyle, withTiming/withSpring, layout animations, the Gesture API (pan/pinch/drag/swipe), Moti, Lottie, Rive, reduced motion, haptics, and UI-thread profiling. Use when building RN motion, wiring a gesture, or when an RN animation feels janky. For WEB animations (CSS, Motion, View Transitions) use the `animations` skill instead. Triggers on "reanimated", "gesture handler", "react native animation", "expo animation", "useSharedValue", "withSpring", "moti", "swipe gesture", "drag", "pinch to zoom", "/animations-native".
mthines/agent-skills · ★ 13 · Web & Frontend · score 79

Install: claude install-skill mthines/agent-skills

# Animations (React Native / Expo) Produces or reviews React Native animations that hold 60/120 fps by running motion on the **UI thread** via Reanimated worklets, respect the OS Reduce Motion setting, and use the cheapest tool for the job — the Reanimated CSS API first, the worklet/hooks API for interactive motion, gesture-handler for touch, and asset runtimes (Lottie / Rive) only for designer-authored art. > **This `SKILL.md` is a thin index.** Detailed rules live in > [`rules/*.md`](./rules) and load on demand. > This is the **native** sibling of the [`animations`](../animations/SKILL.md) skill — that one owns **web** (CSS, Motion, View Transitions); this one owns **React Native / Expo**. --- ## Core Bet **Animate `transform` and `opacity`, and drive the value from the UI thread.** Those are the properties the New Architecture applies to a mounted view without a Yoga layout recalculation — the RN analog of the web "composite-only" rule. Layout props (`width`, `height`, `top`, `left`, `flex`, `margin`) recompute layout every frame and jank. Driving the value from the UI thread (a Reanimated shared value, not React `useState`) keeps motion smooth even when the JS thread is busy. Full property table and the threading model in [`rules/reanimated-core.md`](./rules/reanimated-core.md). --- ## Brainstorm Mode — interaction → feedback When the question is **what** the motion should be (not **how** to build it), the reasoning is platform-agnostic and already lives in the `a