Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From skills
Software Mansion's production patterns for React Native and Expo apps on the New Architecture. Covers animations, gestures, SVG, on-device AI, rich text, and multithreading.
How this skill is triggered — by the user, by Claude, or both
Slash command
/skills:react-native-best-practicesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Software Mansion's production patterns for React Native apps on the New Architecture.
README.mdreferences/animations/animation-functions.mdreferences/animations/animations-performance.mdreferences/animations/animations.mdreferences/animations/canvas-animations.mdreferences/animations/canvas-atlas.mdreferences/animations/gpu-animations.mdreferences/animations/layout-animations.mdreferences/animations/scroll-and-events.mdreferences/animations/svg-animations.mdreferences/audio/audio.mdreferences/audio/effects-and-analysis.mdreferences/audio/playback.mdreferences/audio/recording.mdreferences/audio/system-and-notifications.mdreferences/audio/worklets.mdreferences/gestures/continuous-gestures.mdreferences/gestures/gesture-composition.mdreferences/gestures/gestures.mdreferences/gestures/swipeable-and-drawer.mdSoftware Mansion's production patterns for React Native apps on the New Architecture.
Read the relevant sub-skill for the topic at hand. All sub-skills are in references/.
| Sub-skill | When to use |
|---|---|
references/animations/SKILL.md | CSS transitions, CSS animations, shared value animations, GPU shader animations (WebGPU, TypeGPU), layout animations (entering/exiting, transitions, keyframes), scroll-driven animations, animation functions (withSpring, withTiming, withDecay), core hooks (useSharedValue, useAnimatedStyle), interpolation, particle systems, procedural noise, SDF rendering, animation performance, 120fps, accessibility, Reanimated 4 |
references/gestures/SKILL.md | Tap, pan, pinch, rotation, swipe, long press, fling, hover, drag, Pressable, RectButton, Swipeable, DrawerLayout, VirtualGestureDetector, gesture composition, gesture testing -- any touch interaction with Gesture Handler |
references/svg/SKILL.md | Vector graphics, icons, charts, illustrations using React Native SVG |
references/on-device-ai/SKILL.md | On-device AI: LLMs (chat, tool calling, structured output, vision-language models), computer vision (classification, object detection, OCR, semantic/instance segmentation, style transfer, embeddings, text-to-image), speech processing (STT with timestamps, TTS with phonemes, VAD), VisionCamera real-time frame processing, model loading, resource management, custom models with ExecuTorch |
references/rich-text/SKILL.md | Rich text editor, formatted text input, WYSIWYG, mentions, Markdown renderer, react-native-enriched, react-native-enriched-markdown |
references/multithreading/SKILL.md | Multithreading, react-native-worklets, background processing, Worker Runtimes, UI thread, scheduleOnUI, scheduleOnRN, Serializable, Synchronizable, offloading computation from the JS thread |
references/audio/SKILL.md | Audio playback (buffer sources, oscillators, streaming, queued playback), recording (file, data callback, graph processing), audio effects (gain, filters, delay, convolver, panner, waveshaper), real-time analysis and visualization, audio worklets (custom processing, synthesis), system integration (sessions, interruptions, notifications, permissions), testing with mocks -- any audio feature with react-native-audio-api |
references/jsi/SKILL.md | JSI, C++ native modules, jsi::Runtime, jsi::Value, jsi::Object, jsi::Function, jsi::HostObject, jsi::HostFunction, jsi::NativeState, jsi::PropNameID, jsi::ArrayBuffer, jsi::WeakObject, jsi::Scope, jsi::BigInt, JSIException, JSError, JSINativeException, calling JS from C++, calling C++ from JS, HostObject destructor constraints, shared_ptrjsi::Value, CallInvoker, invokeAsync, JSI threading safety, zero-copy ArrayBuffer, rt.global(), ISerialization, WithRuntimeDecorator, jsi.h |
npx claudepluginhub software-mansion-labs/skillsProvides Software Mansion's best practices for production React Native apps on New Architecture. Guides writing, reviewing, debugging across animations, gestures, SVG, haptics, on-device AI, multimedia, rich text, multithreading, audio.
Provides React Native and Expo best practices for performant mobile apps, including list optimization, Reanimated animations, native navigation, and UI patterns like expo-image.
Provides React Native patterns for the New Architecture (Fabric, TurboModules) and Expo. Corrects Bridge-era anti-patterns for navigation, performance, and native modules.