Help us improve
Share bugs, ideas, or general feedback.
From react-native-skills
Provides React Native and Expo best practices for performant mobile apps, including list optimization with FlashList, Reanimated animations, native navigation, and UI patterns like expo-image.
npx claudepluginhub secondsky/claude-skills --plugin react-native-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/react-native-skills:react-native-skillsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.
AGENTS.mdREADME.mdmetadata.jsonrules/_sections.mdrules/_template.mdrules/animation-derived-value.mdrules/animation-gesture-detector-press.mdrules/animation-gpu-properties.mdrules/design-system-compound-components.mdrules/fonts-config-plugin.mdrules/imports-design-system-folder.mdrules/js-hoist-intl.mdrules/list-performance-callbacks.mdrules/list-performance-function-references.mdrules/list-performance-images.mdrules/list-performance-inline-objects.mdrules/list-performance-item-expensive.mdrules/list-performance-item-memo.mdrules/list-performance-item-types.mdrules/list-performance-virtualize.mdProvides React Native and Expo best practices for performant mobile apps, including list optimization, Reanimated animations, native navigation, and UI patterns like expo-image.
Provides best practices for React Native and Expo apps covering list performance, animations, navigation, UI patterns, state management, and monorepo configuration.
Provides React Native and Expo best practices for building performant mobile apps, covering list optimization, animations, navigation, and UI patterns.
Share bugs, ideas, or general feedback.
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | List Performance | CRITICAL | list-performance- |
| 2 | Animation | HIGH | animation- |
| 3 | Navigation | HIGH | navigation- |
| 4 | UI Patterns | HIGH | ui- |
| 5 | State Management | MEDIUM | react-state- |
| 6 | Rendering | MEDIUM | rendering- |
| 7 | Monorepo | MEDIUM | monorepo- |
| 8 | Configuration | LOW | fonts-, imports- |
list-performance-virtualize - Use FlashList for large listslist-performance-item-memo - Memoize list item componentslist-performance-callbacks - Stabilize callback referenceslist-performance-inline-objects - Avoid inline style objectslist-performance-function-references - Extract functions outside renderlist-performance-images - Optimize images in listslist-performance-item-expensive - Move expensive work outside itemslist-performance-item-types - Use item types for heterogeneous listsanimation-gpu-properties - Animate only transform and opacityanimation-derived-value - Use useDerivedValue for computed animationsanimation-gesture-detector-press - Use Gesture.Tap instead of Pressablenavigation-native-navigators - Use native stack and native tabs over JS navigatorsui-expo-image - Use expo-image for all imagesui-image-gallery - Use Galeria for image lightboxesui-pressable - Use Pressable over TouchableOpacityui-safe-area-scroll - Handle safe areas in ScrollViewsui-scrollview-content-inset - Use contentInset for headersui-menus - Use native context menusui-native-modals - Use native modals when possibleui-measure-views - Use onLayout, not measure()ui-styling - Use StyleSheet.create or Nativewindreact-state-minimize - Minimize state subscriptionsreact-state-dispatcher - Use dispatcher pattern for callbacksreact-state-fallback - Show fallback on first renderreact-compiler-destructure-functions - Destructure for React Compilerreact-compiler-reanimated-shared-values - Handle shared values with compilerrendering-text-in-text-component - Wrap text in Text componentsrendering-no-falsy-and - Avoid falsy && for conditional renderingmonorepo-native-deps-in-app - Keep native dependencies in app packagemonorepo-single-dependency-versions - Use single versions across packagesfonts-config-plugin - Use config plugins for custom fontsimports-design-system-folder - Organize design system importsjs-hoist-intl - Hoist Intl object creationRead individual rule files for detailed explanations and code examples:
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md