software-mansion-labs/animations
skills/react-native-best-practices/references/animations/SKILL.md
Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, shared value animations, canvas animations with react-native-skia, GPU shader animations, layout animations, scroll-driven animations, interpolation, particle systems, procedural noise, SDF rendering, performance tuning, and accessibility. Trigger on: Reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, withRepeat, withSequence, CSS transition, CSS animation, layout animation, FadeIn, SlideIn, ZoomIn, LinearTransition, keyframe, interpolate, scrollTo, useFrameCallback, react-native-skia, Skia Canvas, Atlas, usePathInterpolation, usePathValue, useClock, useTexture, SKSL, interpolateColors, Picture API, canvas animation, sprite animation, WebGPU, react-native-wgpu, TypeGPU, GPU shader, WGSL, particle system, Perlin noise, SDF, Three.js, react-three-fiber, animation performance, or any request to animate UI in React Native.
$ install --global
skillsauthnpx skillsauth add software-mansion-labs/react-native-skills animationsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 15, 2026, 4:24 AM10.5s10 files scanned
SKILL.md
- name:
- animations
- description:
- Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU. Covers CSS transitions, CSS animations, shared value animations, canvas animations with react-native-skia, GPU shader animations, layout animations, scroll-driven animations, interpolation, particle systems, procedural noise, SDF rendering, performance tuning, and accessibility. Trigger on: Reanimated, useSharedValue, useAnimatedStyle, withSpring, withTiming, withDecay, withRepeat, withSequence, CSS transition, CSS animation, layout animation, FadeIn, SlideIn, ZoomIn, LinearTransition, keyframe, interpolate, scrollTo, useFrameCallback, react-native-skia, Skia Canvas, Atlas, usePathInterpolation, usePathValue, useClock, useTexture, SKSL, interpolateColors, Picture API, canvas animation, sprite animation, WebGPU, react-native-wgpu, TypeGPU, GPU shader, WGSL, particle system, Perlin noise, SDF, Three.js, react-three-fiber, animation performance, or any request to animate UI in React Native.
Animations
Software Mansion's production animation patterns for React Native on Reanimated 4 and the New Architecture.
Load at most one reference file per question. For API signatures and config options, webfetch the documentation pages linked in each reference file.
Critical Rules
- NEVER use
runOnJS. It is removed in Reanimated 4. UsescheduleOnRN(fn, ...args)fromreact-native-workletsinstead. This applies everywhere: scroll handlers, gesture callbacks,useAnimatedReaction,useFrameCallback, and any other worklet context.
References
| File | When to read |
|------|-------------|
| animations.md | Choosing between CSS transitions, CSS animations, and shared value animations; CSS transition and CSS animation patterns and rules; animating text; infinite animation cleanup; scheduleOnRN |
| animation-functions.md | Gotchas and rules for core hooks (useSharedValue, useAnimatedStyle, useAnimatedProps, useDerivedValue); withSpring config modes; withRepeat and withClamp caveats; composing animations |
| layout-animations.md | Entering/exiting animation gotchas (nativeID conflict, view flattening); layout transitions; keyframe animation rules; list item animations (itemLayoutAnimation); shared element transitions |
| scroll-and-events.md | Scroll-driven animation patterns (useAnimatedScrollHandler, scrollTo, useScrollOffset); useAnimatedReaction patterns; useFrameCallback; measure rules |
| canvas-animations.md | Canvas animations with @shopify/react-native-skia; Reanimated integration (shared values as direct props); interpolateColors; retained vs immediate mode (Picture API); path animations (usePathInterpolation, usePathValue); useClock; gesture integration and element tracking; SKSL runtime shaders and image filters; textures |
| canvas-atlas.md | Atlas for batched sprite/tile animation; useTexture, useRSXformBuffer; RSXform matrix format ([scos, ssin, tx, ty]) |
| gpu-animations.md | GPU shader animations; react-native-wgpu Canvas and device setup; TypeGPU typed pipelines; Reanimated + WebGPU worklet integration; compute pipelines for particle systems, physics, and simulations; @typegpu/noise (Perlin noise, PRNG); @typegpu/sdf (signed distance shapes); Three.js / React Three Fiber for 3D |
| svg-animations.md | Animating SVG elements and paths with Reanimated; createAnimatedComponent for SVG; progress arcs; pulsing circles |
| animations-performance.md | Performance tuning; 120fps setup; feature flags; FPS drop fixes; simultaneous animation limits; accessibility (useReducedMotion, ReducedMotionConfig); worklet closure optimization; debug vs release builds |
Related Skills
software-mansion-labs/typegpu
development
VerifiedTrustedCommunity
TypeGPU is type-safe WebGPU in TypeScript. Use whenever the user writes, debugs, or designs TypeGPU code: 'use gpu' shader functions, tgpu.fn, buffers, textures, bind groups, compute and render pipelines, vertex layouts, slots, accessors, and any TypeGPU API. Shader logic and CPU-side resources are tightly coupled - handle both sides here even if the user only mentions one (e.g. "how do I write a shader", "how do I create a buffer"). Trigger on any mention of typegpu, tgpu, "use gpu", TypedGPU, or WebGPU code written using TypeGPU's schema API (d.*, tgpu.*, std.*). Do NOT trigger for raw WebGPU (using GPUDevice/GPURenderPipeline directly without tgpu), WGSL-only questions, Three.js, Babylon.js, or WebGL.
184SKILL.mdUpdated May 15, 2026
software-mansion-labs/rnrepo
tools
VerifiedTrustedCommunity
Best practices for integrating and using RNRepo — Software Mansion's infrastructure for pre-built React Native library artifacts that reduces native build times by up to 2×. Use when setting up, configuring, or troubleshooting RNRepo in a React Native or Expo project. Trigger on: 'RNRepo', 'rnrepo', 'slow builds', 'build times', 'prebuilt artifacts', 'prebuilt libraries', '@rnrepo/expo-config-plugin', '@rnrepo/build-tools', 'prebuilds-plugin', 'rnrepo.config.json', 'DISABLE_RNREPO', 'packages.rnrepo.org', 'Maven prebuild', 'CocoaPods prebuild', 'xcframework prebuild', 'prebuild AAR', 'build from source', 'native compilation slow', 'Gradle plugin slow', 'pod install slow', 'CI build times'.
184SKILL.mdUpdated May 15, 2026
software-mansion-labs/svg
development
VerifiedTrustedCommunity
Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart', 'path', 'Svg component', 'SvgUri', 'SvgXml', 'SvgCss', 'FilterImage', 'SVG filter', or any request to display scalable vector content in a React Native app.
184SKILL.mdUpdated May 15, 2026
software-mansion-labs/rich-text
tools
VerifiedTrustedCommunity
Software Mansion's best practices for rich text in React Native using react-native-enriched and react-native-enriched-markdown. Use when building rich text editors, formatted text inputs, Markdown renderers, or any feature requiring inline styling, mentions, links, structured text editing, or Markdown display. Trigger on: 'rich text editor', 'rich text input', 'text editor', 'react-native-enriched', 'react-native-enriched-markdown', 'EnrichedTextInput', 'EnrichedMarkdownText', 'formatted text input', 'WYSIWYG', 'mentions input', 'text formatting toolbar', 'markdown renderer', 'markdown display', 'render markdown', 'display markdown natively', 'LaTeX math', 'GFM tables', or any request to build rich text editing or Markdown rendering in React Native.
184SKILL.mdUpdated May 15, 2026