Frameworks
Best React Native Agent Skills
55 React Native skills for AI coding assistants — ranked by popularity.
This collection provides curated skill sets for AI agents, including Claude Code, Codex, and Cursor, specifically tailored for React Native development. Whether you are scaffolding a new Expo project with SDK 54, implementing complex Reanimated animations, or automating testing workflows with Appium and Detox, these files inject context-aware knowledge into your agent. Developers can expect precise guidance on modern architectural patterns, Material Design 3 implementation for Android, and styling with libraries like Tamagui. These skills bridge the gap between general AI capability and the specific constraints of the mobile ecosystem. By equipping your agent with these instructions, you reduce hallucinated imports and outdated patterns, ensuring your codebase adheres to current industry standards. This resource is for developers working on cross-platform mobile apps who need their AI tools to understand the nuances of the React Native New Architecture, native modules, and native testing environments.
Top React Native skills
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
react-native-architecture
wshobson
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
claude-mobile-ios-testing
krzemienski
Use when testing iOS apps on simulator, capturing screenshots for validation gates, automating UI testing with expo-mcp and xc-mcp, or verifying visual correctness - combines expo-mcp autonomous testing (React Native level) with xc-mcp simulator management (iOS level)
react-native-design
wshobson
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
tamagui
tamagui
Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/*" imports, "createStyledContext", "variants".
swiftui-liquid-glass
Dimillian
Implement, review, or improve SwiftUI features using the iOS 26+ Liquid Glass API. Use when asked to adopt Liquid Glass in new SwiftUI UI, refactor an existing feature to Liquid Glass, or review Liquid Glass usage for correctness, performance, and design alignment.
vercel-react-native-skills
vercel-labs
React 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. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
templates
davila7
Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.
agent-spec-mobile-react-native
ruvnet
Agent skill for spec-mobile-react-native - invoke with $agent-spec-mobile-react-native
heroui-native
heroui-inc
HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when working with HeroUI Native components, installing HeroUI Native, customizing themes, or accessing component documentation. Keywords: HeroUI Native, heroui-native, React Native UI, Uniwind.
react-native-best-practices
callstackincubator
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
expo-deployment
sickn33
Deploy Expo apps to production
1k-performance
OneKeyHQ
Performance optimization for React/React Native — re-renders, memoization, FlashList, memory leaks, and bundle size.
react-native-expert
Jeffallan
Use when building cross-platform mobile applications with React Native or Expo. Invoke for navigation patterns, platform-specific code, native modules, FlatList optimization.
mobile-developer
sickn33
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.
react-native
alinaqi
React Native mobile patterns, platform-specific code
mobile-components
dadbodgeoff
Mobile-first UI components including bottom navigation, bottom sheets, pull-to-refresh, and swipe actions. Touch-optimized with proper gesture handling.
gesture-handler-3-migration
software-mansion
Migrates files containing React Native components which use the React Native Gesture Handler 2 API to Gesture Handler 3.
json-render-react-native
vercel-labs
React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.
expo-dev-client
expo
Build and distribute Expo development clients locally or via TestFlight
frontend-mobile-development-component-scaffold
sickn33
You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s
setup-react-native-storybook
storybookjs
Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack/webpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.
ui-mobile
alinaqi
Mobile UI patterns - React Native, iOS/Android, touch targets
creating-screens
artsy
Add new screens and routes to Eigen React Native app. Guides you through creating simple screens (no data fetching) or Relay screens (with GraphQL). Use this when adding screens, routes, or navigating components. Triggers on "add a screen", "create a new route", "add a Relay screen", "setup screen with data", or screen creation tasks.
How to choose a React Native skill
Evaluate these skills based on your project's specific stack and technical requirements. Check if the skill covers your target environment, such as Android-specific Material Design versus cross-platform UI frameworks like Tamagui. Look at the maintainer to verify the skill aligns with the versioning you need, such as React Native 0.76 or newer Expo SDKs. Prioritize skills that match your primary goals, whether that is improving your automated testing coverage or mastering advanced styling and animation patterns.