react-native

This skill provides a comprehensive architecture and coding standard for React Native applications. It is designed for mobile engineers working with Expo, React Navigation, and modern styling libraries like NativeWind. The instructions enforce consistent project organization, ensuring a clear separation between screens, features, services, and state management. By utilizing this skill, agents generate high-quality, maintainable mobile code that follows industry-standard patterns for both managed and bare workflows.

• Standardizes project structure including app directory for Expo Router, components, hooks, services, stores, and types.

• Promotes strict functional component development with full TypeScript support for props and state.

• Handles cross-platform development through Native modules, Platform-specific file extensions, and Platform.select utility.

• Integrates navigation patterns using React Navigation and Expo Router layouts.

• Facilitates modern styling workflows using NativeWind (Tailwind CSS for React Native) to manage responsive layouts and dark mode.

• Implements robust state management via Zustand with persistence middleware support.

• Load this skill when initiating new mobile projects, refactoring navigation flows, or managing native integration modules.

• Utilize for complex scenarios like safe-area handling, keyboard management with KeyboardAvoidingView, and performance-optimized data fetching with TanStack React Query.

• The agent is expected to prioritize type safety, modular component design, and reusable logic within custom hooks.

• Ensure input data structures match defined TypeScript interfaces to maintain clean data flow throughout the application.

• Constrain outputs to follow the architectural patterns provided, avoiding inline styling in favor of NativeWind classes where applicable.