react-native-best-practices

Name: react-native-best-practices
Author: software-mansion-labs

github.com/software-mansion-labsDevelopment2975.7k installsUpdated 2w ago

About react-native-best-practices

A reference skill for React Native developers working with the New Architecture. It organizes Software Mansion patterns into focused guides for animation, gestures, graphics, AI, audio, text, threading, and JSI.

Key features

01Topic-based sub-skills
02Animation and gesture patterns
03On-device AI and audio guidance
04JSI and multithreading guidance
05SVG and rich-text guidance

Use cases

01Implementing touch interactions
02Adding animations or SVG graphics
03Building on-device AI or audio features
04Working with JSI and native threading

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/software-mansion-labs/skills --skill react-native-best-practices

After installing, type/react-native-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

README.md

references/animations/

animation-functions.md

animations-performance.md

animations.md

canvas-animations.md

canvas-atlas.md

css-pseudo-selectors.md

gpu-animations.md

layout-animations.md

scroll-and-events.md

svg-animations.md

references/audio/

audio.md

effects-and-analysis.md

playback.md

recording.md

system-and-notifications.md

worklets.md

references/enable-worklets-bundle-mode/references/

patching-bun.md

patching-patch-package.md

patching-pnpm.md

patching-yarn-berry.md

uniwind-remap-workaround.md

references/gestures/

continuous-gestures.md

gesture-composition.md

gestures.md

swipeable-and-drawer.md

tap-handling.md

testing.md

v2-to-v3-migration.md

references/jsi/

calling-js-and-async.md

Details

From the project README

React Native Best Practices

Software 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-skills

Sub-skill	When to use
`references/animations/SKILL.md`	CSS transitions, CSS animations, CSS pseudo-selectors and callbacks, 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, HTML/Markdown rendering, react-native-enriched-html (formerly 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/enable-worklets-bundle-mode/SKILL.md`	Enabling react-native-worklets Bundle Mode (imports inside worklets, third-party npm libraries on worklet runtimes) in an Expo, RN CLI, or brownfield app: babel bundleMode plugin option, bundleModeMetroConfig / getBundleModeMetroConfig, mandatory metro and metro-runtime patches per package manager, "Failed to get the SHA-1" errors, missing Fast Refresh for worklet code, uniwind/NativeWind resolver conflicts
`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

Comments

Markdown supported

Details

Author: software-mansion-labs
Repository: software-mansion-labs/skills
Category: Development
Installs: 5,710
GitHub stars: 297

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

852.5k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.