What problem does it solve? React Native apps built with gluestack-ui v5 often suffer from janky animations, unnecessary rerenders, and broken web compatibility when developers import components directly from react-native or misuse lists and animations. This Skill provides concrete rules and code patterns to prevent these performance and cross-platform pitfalls. ## Core Features & Use Cases - Cross-Platform Component Rules: Enforces using Gluestack wrapper components (KeyboardAvoidingView, SafeAreaView, FlatList) instead of direct react-native imports so apps work on iOS, Android, and web. - Performance Patterns: Provides correct/incorrect code examples for React.memo, useCallback, Reanimated worklets running on the UI thread, FlatList virtualization, and Platform.select usage. - NativeWind v5 / UniWind Guidance: Covers build-level concerns like pinning lightningcss to 1.30.1 and choosing UniWind to eliminate the PostCSS build step. - Use Case: When building a food diary screen with a long entry list and animated progress rings, apply these rules to virtualize the list with FlatList, memoize row components, and run ring animations on the UI thread with Reanimated. ## Quick Start Review my gluestack-ui v5 screen component and fix any performance or cross-platform issues using the performance rules.
