cross-platform

Standardize cross-platform mobile development patterns for React Native and Flutter.

17|5|Updated Feb 6, 2026
One-click install
npx skills add https://github.com/MonumentalSystems/Atlas-Agent-Teams --skill cross-platform-monumentalsystems
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cross-platform
Source: https://github.com/MonumentalSystems/Atlas-Agent-Teams/tree/main/teams/mobile-dev/skills/cross-platform
Command: npx skills add https://github.com/MonumentalSystems/Atlas-Agent-Teams --skill cross-platform-monumentalsystems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cross-platform teams often struggle with inconsistent patterns, duplicated logic, and platform-specific bugs that slow delivery and degrade user experience across iOS and Android.

Core Features & Use Cases

  • React Native Development Standards: Use a modern React Native + TypeScript setup with Hooks, React Navigation, and a compatible state management approach for maintainable UI and predictable behavior.
  • Flutter Development Standards: Use Flutter 3.16+ with Dart 3.0+ and a clean widget/state approach using Provider/Riverpod/Bloc for consistent screens and business logic.
  • Cross-Platform Architecture Patterns: Apply MVVM/Clean Architecture with shared business logic, dependency injection, and repository abstractions to minimize platform divergence.
  • Native Integration & Performance: Integrate native modules (React Native Native Modules / Flutter Platform Channels) and optimize lists, images, bundle size, and runtime performance for both platforms.

Quick Start

Ask the AI to generate a cross-platform mobile architecture and starter code plan for a React Native and Flutter app, including navigation, state management, and a shared business-logic layer.

Frequently Asked Questions about cross-platform

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share business logic between React Native and Flutter to avoid duplicated code?

To share business logic across React Native and Flutter, apply Clean Architecture with repository abstractions and dependency injection. This approach separates business rules from platform-specific UI, minimizing divergence and duplicated code across iOS and Android.

What state management pattern should I use for cross-platform mobile apps?

For cross-platform mobile apps, use React Native with Hooks and compatible state management, or Flutter with Provider, Riverpod, or Bloc. These patterns ensure predictable behavior and consistent stateful screens across both iOS and Android platforms.

How do I integrate native modules in React Native and Flutter without degrading performance?

Integrate native modules using React Native Native Modules and Flutter Platform Channels. Optimize runtime performance by tuning lists, images, and bundle size specifically for each platform to maintain a smooth user experience.

Can I use the same navigation flows for both iOS and Android in cross-platform development?

Yes, you can standardize navigation flows across iOS and Android by using React Navigation in React Native and consistent widget-based routing in Flutter. This ensures predictable navigation behavior and reduces platform-specific bugs.

What versions of Flutter and React Native are required for a consistent cross-platform architecture?

A consistent cross-platform architecture requires modern framework versions, specifically Flutter 3.16+ with Dart 3.0+ and a modern React Native setup with TypeScript. These versions support the latest state and navigation patterns.