React Native Reanimated Animations Skill
Agent Skills–compliant skill for React Native Reanimated. Expert guidance for animations: transitions, gestures, scroll-linked effects, layout animations, CSS animations (v4), shared element transitions, worklets, and real-world component patterns.

What is this?
This skill provides comprehensive guidance for creating performant animations in React Native using Reanimated, including:
- ✅ SKILL.md – Core patterns, animation selection, quick snippets, version detection (v3/v4)
- ✅ 8 reference docs – API reference, gesture patterns, layout animations, CSS animations, shared element transitions, component patterns, worklets & advanced APIs, testing & properties
- ✅ Version support – Both Reanimated v3 (Legacy + New Architecture) and v4 (New Architecture only)
- ✅ Real-world patterns – Accordion, bottom sheet, flip card, parallax, FAB, collapsing header
Installation
Using npx skills
# Install from GitHub
npx skills add estevg/skills --skill creating-reanimated-animations
# Or with full URL
npx skills add https://github.com/estevg/skills --skill creating-reanimated-animations
The skill directory is creating-reanimated-animations (Agent Skills spec: name matches folder).
Using Claude Code Plugin
# Add the marketplace
/plugin marketplace add estevg/skills
# Install the plugin
/plugin install creating-reanimated-animations@esteban-skills
Manual Installation (Cursor)
- Clone or download this repository
- Copy the creating-reanimated-animations folder to one of these locations:
~/.cursor/skills/creating-reanimated-animations/ (global)
.cursor/skills/creating-reanimated-animations/ (project-specific)
Usage
Once installed, the skill automatically activates when you:
- Ask about React Native animations
- Mention "reanimated", "animations", or "gestures"
- Request help with transitions, spring animations, or layout effects
- Need to implement scroll-linked animations or shared element transitions
Example Queries
Creating Animations:
"Create a fade in animation with spring effect"
"Implement a parallax scroll header"
"Build a swipeable card with gesture handler"
Layout Animations:
"Add entering/exiting animations to a list"
"Create a layout transition for reordering items"
"Implement a keyframe animation for a loading indicator"
Advanced Patterns:
"Build an accordion component with smooth animations"
"Create a bottom sheet with gesture controls"
"Implement shared element transitions between screens"
What's Included
Skill Structure
creating-reanimated-animations/
├── SKILL.md # Main skill with core patterns
└── references/
├── api-reference.md # Full hook signatures, v3↔v4 differences
├── gesture-patterns.md # Drag, pinch, fling integrations
├── layout-animations.md # Entering/exiting, layout transitions
├── css-animations-detailed.md # CSS animations (v4 only)
├── shared-element-transitions.md # Screen-to-screen animations
├── component-patterns.md # Accordion, bottom sheet, flip card, FAB
├── worklets-advanced.md # Worklets, runOnJS/runOnUI
└── testing-and-properties.md # Jest testing, animatable properties
Core Pattern
Every animation follows three steps:
import Animated, {
useSharedValue,
useAnimatedStyle,
withTiming,
} from "react-native-reanimated";
function Component() {
// 1. Create shared value (lives on UI thread)
const offset = useSharedValue(0);
// 2. Bind to style
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: offset.value }],
}));
// 3. Trigger animation
const handlePress = () => {
offset.value = withTiming(200, { duration: 500 });
};
return <Animated.View style={[styles.box, animatedStyle]} />;
}
Animation Selection