react-native-animations — Claude Code skill: setup & overview
Teaches coding assistants to build smooth 60fps animations with Reanimated 3 and Gesture Handler in React Native apps.
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a claude-codeWhat react-native-animations does
This skill guides AI models through writing motion code for React Native. It covers state tracking with useSharedValue, style bindings via useAnimatedStyle, and physics-based transitions like withSpring or withDecay.
The instruction set includes patterns for touch tracking with GestureDetector, entering and exiting layout transitions, and coordinate interpolation. It also fixes typical pitfalls, such as missing runOnJS wraps for UI-to-JS calls and forgotten worklet directives. Your project must include react-native-reanimated/plugin in babel.config.js for these animation worklets to execute.
What it helps with
- Build swipeable cards with rotation and spring physics
- Add enter and exit transitions to list items using layout animations
- Resolve thread execution errors with missing
runOnJSorworkletdirectives - Chain multi-step animation sequences using
withSequenceandwithRepeat
Example prompts for the agent
- Create a draggable card component with
Gesture.Pan()and spring return logic - Add staggered fade-in animations for an item list using Reanimated layout helpers
- Fix an Attempted to call from worklet error in my gesture handler callback
How to install react-native-animations
1Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a claude-code2Manually: put the files in place
~/.claude/skills/react-native-animations/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/react-native-animations/
1Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a codex2Manually: put the files in place
.agents/skills/react-native-animations/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a cursor2Manually: put the files in place
.cursor/skills/react-native-animations/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pluginagentmarketplace/custom-plugin-react-native react-native-animations2Manually: put the files in place
.github/skills/react-native-animations/SKILL.md1Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a gemini-cli2Platform CLI
gemini skills install https://github.com/pluginagentmarketplace/custom-plugin-react-native --path skills/react-native-animationsManually: put the files in place
.devin/skills/react-native-animations/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about react-native-animations
How to install react-native-animations in Claude Code?
Run npx skills add pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations -a claude-code. The skill file will be placed in ~/.claude/skills/react-native-animations/SKILL.md.
What does react-native-animations do?
It teaches coding agents how to use Reanimated 3 and Gesture Handler correctly. The agent learns accurate hooks, gesture detectors, and worklet execution boundaries.
What dependencies does this skill require in the mobile project?
You need react-native-reanimated and react-native-gesture-handler installed in your app. Reanimated also requires adding react-native-reanimated/plugin to babel.config.js.
