Build production-grade React Native and Expo apps with Software Mansion's patterns for animations, gestures, SVG, on-device AI, multithreading, and rich text. Debug and inspect apps via Radon IDE, integrate Fishjam WebRTC livestreaming, migrate deep linking to Detour, reduce native build times with RNRepo, and target Meta Quest hardware.
Software Mansion's guide for migrating Expo SDK apps to Meta Quest using expo-horizon packages. Use when adding Meta Quest or Meta Horizon OS support to an existing Expo or React Native project. Trigger on: Meta Quest, Horizon OS, Quest 2, Quest 3, Quest 3S, VR app, expo-horizon-core, expo-horizon-location, expo-horizon-notifications, build flavors for Quest, panel sizing, VR headtracking, Horizon App ID, quest build variant, isHorizonDevice, isHorizonBuild, migrate expo-location to Quest, migrate expo-notifications to Quest, Meta Horizon Store publishing, or any task involving running an Expo app on Meta Quest hardware.
Software Mansion's Fishjam — hosted WebRTC platform for video, audio, and one-to-many livestreaming. MUST USE before writing, reviewing, or debugging ANY code that talks to a Fishjam instance from a backend (Node, Python) or a client (React web, React Native / Expo). Routes to platform fundamentals and the right SDK sub-skill. Trigger on: 'Fishjam', 'fishjam.io', 'fishjam.swmansion.com', 'fishjam dashboard', 'Fishjam ID', 'management token', 'peer token', 'sandbox API', 'livestream room', '@fishjam-cloud/js-server-sdk', 'fishjam-server-sdk', '@fishjam-cloud/react-client', '@fishjam-cloud/react-native-client', '@fishjam-cloud/ts-client', 'FishjamClient', 'FishjamProvider', 'FishjamNotifier', 'FishjamAgent', 'createPeer', 'createRoom', 'createAgent', 'createLivestreamStreamerToken', 'createMoqToken', 'refreshPeerToken', 'webhook', 'gemini fishjam', 'vapi fishjam', 'fishjam expo plugin'.
Best practices for using Radon IDE's MCP tools when developing, debugging, and inspecting React Native and Expo apps. Use when interacting with a running app through Radon IDE - viewing screenshots, reading logs, inspecting the component tree, debugging network requests, reloading the app, or querying React Native documentation and library info. Trigger on: 'debug React Native', 'fix UI', 'network issues', 'build issues', 'Radon IDE', 'view screenshot', 'app logs', 'component tree', 'network inspector', 'reload app', 'React Native docs', 'library description', 'emulator', 'development viewport', 'view_screenshot', 'view_application_logs', 'view_component_tree', 'reload_application', 'view_network_logs', 'view_network_request_details', 'query_documentation', 'get_library_description', and every request involving live app inspection, debugging or development in a Radon IDE session.
Software Mansion's best practices for production React Native and Expo apps on the New Architecture. MUST USE before writing, reviewing, or debugging ANY code in a React Native or Expo project. If the working directory contains a package.json with react-native, expo, or expo-router as a dependency, this skill applies. Trigger on: any code task in a React Native/Expo project, 'React Native', 'Expo', 'New Architecture', 'Reanimated', 'Gesture Handler', 'react-native-svg', 'ExecuTorch', 'react-native-audio-api', 'react-native-enriched', 'Worklet', 'Fabric', 'TurboModule', 'WebGPU', 'react-native-wgpu', 'TypeGPU', 'GPU shader', 'WGSL', 'svg', 'animation', 'gesture', 'audio', 'rich text', 'AI model', 'multithreading', 'chart', 'vector', 'image filter', 'shared value', 'useSharedValue', 'runOnJS', 'scheduleOnRN', 'thread', 'worklet', or any question involving UI, graphics, native modules, or React Native threading and animation behavior. Also use when a more specific sub-skill matches.
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'.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Production-ready patterns for React Native development, packaged as a Claude Code plugin. Maintained by Software Mansion.
Optimized for Claude models and tested with Claude Code. Install the plugin and your AI coding agent gets up-to-date guidance for animations, gestures, on-device AI, audio, real-time video, and other React Native features.
Add the Software Mansion marketplace and install the plugin:
/plugin marketplace add software-mansion-labs/skills
/plugin install skills@swmansion
/reload-plugins
The skills are available immediately. Run /plugin marketplace update swmansion to get the latest version.
npxYou can also install the skills using the skills CLI:
npx skills add software-mansion-labs/skills
Production patterns for React Native apps on the New Architecture, covering:
| Topic | What it covers |
|---|---|
| Animations | CSS transitions, CSS animations, shared value animations, canvas animations (Skia), GPU shader animations, layout animations, Reanimated 4, 120fps, performance tuning |
| Gestures | Tap, pan, pinch, swipe, long press, drag with Gesture Handler |
| SVG | Vector graphics, icons, charts, illustrations with React Native SVG |
| On-device AI | LLMs, computer vision, OCR, audio processing, embeddings with React Native ExecuTorch |
| Rich Text | Rich text editing with react-native-enriched and Markdown rendering with react-native-enriched-markdown: formatting toolbar, mentions, links, GFM tables, task lists, LaTeX math |
| Multithreading | Worker Runtimes, scheduling APIs, shared memory with React Native Worklets |
| Audio | Playback, recording, visualization, session management with React Native Audio API |
| JSI | C++ JavaScript Interface: HostObject, HostFunction, NativeState, zero-copy ArrayBuffer, threading safety, CallInvoker, TurboModules vs Nitro Modules, C++ memory patterns, crash debugging |
Best practices for using Radon IDE's MCP tools when developing, debugging, and inspecting React Native and Expo apps. Covers viewing screenshots, reading logs, inspecting the component tree, debugging network requests, reloading the app, and querying React Native documentation.
Practical guidance for building with TypeGPU, from project setup and schema design through shader authoring, resource management, and pipeline composition. It helps an AI coding agent work confidently across the CPU/GPU boundary while avoiding common typing, memory-layout, and WebGPU integration mistakes.
Best practices for integrating RNRepo — Software Mansion's infrastructure for pre-building and distributing React Native library artifacts. Covers installation (Expo CNG and standard React Native), configuration (denyList, disabling the plugin, GPG verification), and troubleshooting.
Best practices for setting up and migrating to Detour, Software Mansion's deferred deep linking ecosystem. Covers end-to-end SDK initialization, Universal/App Links registration, and type-safe analytics tracking across iOS, Android, React Native, and Flutter, as well as structural mappings for switching away from Branch or AppsFlyer.
npx claudepluginhub software-mansion-labs/skillsReact Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules.
Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>
React Native & Expo development workflow: skills library for Claude Code with TDD, debugging, collaboration patterns, and proven techniques
Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>
React Native mobile development toolkit for native module integration, performance optimization, and cross-platform patterns. Includes RN architect agent for strategic mobile architecture decisions.
Complete AI coding agent harness for React Native and Expo — 13 agents, 22 commands, 7 skills, 10 MCP integrations, autonomous worker mode, visual debugging, smart routing