agentsclimarketplace

Rn animations gestures

Skill lukedj78/dev-flow/rn-animations-gestures

A filesystem contract (.workflow/meta.json) + 37 agent skills that take a product from idea to production: web (Next.js 16) & mobile (Expo/RN), plus an eve agent engine and Linear/scrum. Runs on Claude Code, Codex, Copilot, Gemini, Cursor.

Install
npx -y skills add lukedj78/dev-flow --skill rn-animations-gestures

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when adding animations or gestures to a React Native + Expo app: scale/opacity/translation transitions, layout animations (FadeIn/SlideIn/FadeOut), shared-value driven motion, swipe-to-delete, pan/pinch/long-press gestures, scroll-linked animations. Triggers on: "anima questo", "swipe to X", "fade in/out", "pinch zoom", "scroll-driven animation". Not for: styling (rn-styling), navigation transitions (Expo Router handles those — see rn-expo-router), CSS-only on web (Next.js stack).

SKILL.md

3.1 KB, as published. Nobody here has run it

rn-animations-gestures — guardrail for animations + gestures in RN/Expo

For the current Expo API and per-version details, verify against the Expo docs / MCP mcp.expo.dev / expo/skills (see rn-fundamentals → Source of truth).

The 5 rules (non-negotiable)

  1. Reanimated 4 is the default. Never the legacy Animated API from react-native for new code. Reanimated 4 also ships a web-style CSS Animations/Transitions API (transition: {...}, animationName keyframes) as a backward-compatible ADDITION to worklets — good for state-driven style changes, not a replacement for useSharedValue/useAnimatedStyle on gesture-driven motion (see references/patterns.md).
  2. Gestures via Gesture Handler 2. Never PanResponder. Use Gesture.Pan(), Gesture.Pinch(), Gesture.Tap(), Gesture.LongPress() with <GestureDetector>.
  3. Worklets run on the UI thread — they CANNOT access React state directly. To call back to JS use runOnJS(fn)(args). Inside worklets, only shared values, locals, and runOnUI/runOnJS are safe.
  4. Layout animations for enter/exit/move. Use entering={FadeIn}, exiting={FadeOut}, layout={Layout.springify()} from react-native-reanimated — they handle their own worklets correctly.
  5. useDerivedValue for computed shared values. Never useMemo on a shared value — useMemo runs on JS thread.

Quick decision tree

  • "What's the right tool — worklets or the CSS Animations/Transitions API?" → references/decision-tree.md
  • "How do I structure a worklet-driven animation?" → references/patterns.md
  • "What native module setup do I need?" → both Reanimated 4 + RNGH 2 are already in rn-bootstrap's install-stack.sh. No extra setup needed.

Common anti-patterns (NEVER do)

  • ❌ import { Animated } from "react-native" — use react-native-reanimated's Animated instead.
  • ❌ setMyState(newValue) from inside a worklet — wrap in runOnJS(setMyState)(newValue).
  • ❌ Reading props.foo directly inside useAnimatedStyle — capture into a shared value first.
  • ❌ PanResponder — deprecated for new code. Gesture Handler 2.
  • ❌ Animating height: 'auto' — impossible on the UI thread (no measure). Either measure with onLayout or use LayoutAnimation from Reanimated.
  • ❌ Chaining withTiming(...) inside useEffect without cancelAnimation — leaks on unmount.

Sources

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.