gluestack/agent-skills

Overview

This skill explains performance optimization and cross-platform patterns for gluestack-ui v4. It focuses on native/web compatibility, TypeScript typing, memoization, animations on the UI thread, safe area handling, and concrete best practices. Use it to validate architecture and enforce patterns that keep apps fast and consistent across platforms.

How this skill works

The skill inspects imports and component patterns, recommending Gluestack wrapper components instead of direct react-native imports to ensure web compatibility. It enforces TypeScript typing, memoization (React.memo/useCallback/useMemo), virtualization for lists (FlatList), and Reanimated worklets for animation. It also provides checklists and code patterns for safe areas, platform.select usage, and real-device testing.

When to use it

• When building UI that must run on both React Native (iOS/Android) and Web
• When you want to eliminate cross-platform rendering bugs caused by direct react-native imports
• When improving runtime performance (reduce rerenders, optimize lists, smooth animations)
• When introducing animations that require 60fps responsiveness
• When hardening app for production with real-device testing and platform-specific fallbacks

Best practices

• Always import UI primitives from Gluestack wrappers (Box, Text, KeyboardAvoidingView, FlatList) rather than react-native when a wrapper exists
• Use TypeScript for component props and navigation types to catch errors at compile time
• Memoize expensive components and callbacks with React.memo and useCallback; use useMemo for heavy computations
• Run animations on the UI thread using Reanimated worklets (useSharedValue, useAnimatedStyle, withTiming/withSpring)
• Use FlatList for long or dynamic lists instead of ScrollView + map to enable virtualization
• Handle safe areas via SafeAreaView or useSafeAreaInsets and document any platform-specific code with Platform.select

Example use cases

• Converting a screen to Gluestack wrappers and removing direct react-native imports to fix web rendering issues
• Refactoring a list screen from ScrollView+map to FlatList with memoized row components to cut memory and render time
• Replacing JS-thread animation code with Reanimated worklets for jank-free gestures and transforms
• Adding TypeScript props and typed navigation to reduce runtime crashes and improve DX
• Applying useSafeAreaInsets to a custom footer so it respects notches and home indicators across devices