Skip to main content Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/RunnerQuan/SAFE-Agent --skill moai-domain-mobile-appEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Explorador de archivos
6 archivos scan-result.raw.json 12.1 KB name moai-domain-mobile-app version 4.0.0 created 2025-11-13T00:00:00.000Z updated 2025-11-13T00:00:00.000Z status stable tier domain description Enterprise mobile development with React Native 0.76+, Flutter 3.24+, Capacitor 6.x, cross-platform patterns, testing, CI/CD allowed-tools Read, Bash, WebSearch, WebFetch, mcp__context7__resolve-library-id, mcp__context7__get-library-docs primary-agent frontend-expert secondary-agents ["qa-validator","alfred","doc-syncer"] tags ["mobile","react-native","flutter","capacitor","ionic","cross-platform","testing","deployment"] orchestration null can_resume true typical_chain_position middle depends_on []
moai-domain-mobile-app
Enterprise Mobile Development Excellence
Version : 4.0.0 (React Native 0.76+, Flutter 3.24+)
Technology Stack : Modern async mobile development with CI/CD automation
Focus : Cross-platform strategies, performance optimization, production deployment
📖 Progressive Disclosure
Level 1: Quick Reference (Core Concepts)
Purpose : Enterprise mobile development covering React Native, Flutter, Capacitor with modern patterns.
Core Stack (2025 Stable) :
React Native : 0.76+ (New Architecture default)Flutter : 3.24+ (Dart 3.5+)Expo : 52.x (EAS Build/Submit)Navigation : React Navigation 6.x, Flutter Navigator 2.xState : Provider 6.x, GetX 4.x, Redux ToolkitTesting : Detox 20.x (E2E), Jest 30.x (Unit)CI/CD : GitHub Actions, fastlane 2.x, EAS Build
Quick Setup Patterns :
React Native App Structure :
import { NavigationContainer } from '@react-navigation/native' ;
import { createNativeStackNavigator } from '@react-navigation/native-stack' ;
import AsyncStorage from '@react-native-async-storage/async-storage' ;
export const AppNavigator = (<NavigationContainer >
<Stack.Navigator >
<Stack.Screen name ="Home" component =
{HomeScreen}
<Stack.Screen name ="Profile" component ={ProfileScreen} />
</Stack.Navigator >
</NavigationContainer >
import 'package:flutter/material.dart';
import 'package:flutter/services/navigation.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
routes: {
'/': (context) => MyHomePage(),
'/profile': (context) => ProfilePage(),
},
);
}
}
✅ Native iOS/Android app development
✅ Cross-platform apps with shared business logic
✅ Web app deployment (Capacitor/Ionic)
✅ Performance optimization and battery management
✅ E2E automation and CI/CD integration
Level 2: Practical Implementation (Essential Patterns)
Pattern 1: React Native Architecture (0.76+) npx react-native@latest init MyApp --template
cd MyApp
npm install @react-navigation/native @react-native-async-storage @react-native-community/netinfo
const [products, setProducts] = useState<Product []>([]);
const [loading, setLoading] = useState (false );
const [isOnline, setIsOnline] = useState (true );
const loadProducts = useCallback (async () => {
try {
setLoading (true );
const cached = await AsyncStorage .getItem ('products' );
if (cached) {
setProducts (JSON .parse (cached));
}
if (isOnline) {
const response = await fetch ('https://api.example.com/products' );
const data = await response.json ();
setProducts (data);
await AsyncStorage .setItem ('products' , JSON .stringify (data));
}
} finally {
setLoading (false );
}
}, [isOnline]);
Pattern 2: Testing Strategy
module .exports = {
testEnvironment : 'node' ,
testRunner : 'jest' ,
setupFilesAfterEnv : ['<rootDir>/jest.setup.js' ],
};
import { render, screen, fireEvent } from '@testing-library/react-native' ;
import { renderHook } from '@testing-library/react-native' );
it ('should render correctly' , () => {
render (<HomeScreen /> expect (screen.getByText ('Welcome' )).toBeTruthy ();
});
Pattern 3: Performance Optimization const OptimizedImage = ({ uri, style, resizeMode, width, height } ) => {
return (
<Image
source ={{ uri }}
style ={style}
resizeMode ={resizeMode}
width ={width}
height ={height}
onLoad ={handleImageLoad}
onError ={() => console.log('Image failed to load')}
/>
Level 3: Advanced Integration (Complex Scenarios)
Pattern 1: Capacitor Plugin Development
import { registerPlugin } from '@capacitor/core' ;
export interface CustomPluginPlugin {
echo (options : { value : string }): Promise <{ value : string }>;
openNativeScreen (): Promise <void >;
}
export const CustomPlugin = registerPlugin<CustomPlugin >('CustomPlugin' , {
web : () => import ('./web' ).then (m =>new m.CustomPluginWeb ()),
});
React Native Integration :
import { CapacitorConfig } from '@capacitor/cli' ;
const config : CapacitorConfig = {
plugins : [
{
name : 'Camera' ,
plugins : ['camera' , 'filesystem' ]
}
]
};
export default config;
Pattern 2: Cross-Platform Business Logic Shared Service Architecture :
export class UserService {
async getUserProfile (userId : string ): Promise <UserProfile > {
return await this .apiCall (`/users/${userId} ` );
}
}
Platform-Specific Implementations :
export class WebUserService implements UserService {
async getUserProfile (userId : string ): Promise <UserProfile > {
const response = await fetch (`/api/users/${userId} ` );
return response.json ();
}
}
export class MobileUserService implements UserService {
async getUserProfile (userId : string ): Promise <UserProfile > {
const user = await this .realm .objects .get (userId);
return user.profile || null ;
}
}
Pattern 3: Advanced Production Features import * as Sentry from '@sentry/react-native' ;
import { ReactNode } from 'react' ;
Sentry .init ({
dsn : 'https://@[key]@[domain].ingest.sentry.io/[projectId]' ,
tracesSampleRate : 1.0 ,
environment : __DEV__ ? 'development' : 'production' ,
integrations : [
new Sentry .BrowserTracing (),
new Sentry .ReactNavigationRoutingInstrumentation ()
]
});
import Analytics from 'analytics-react-native' ;
import { MetricsCollector } from './metrics' ;
const AppAnalytics = Analytics .getAnalytics ({
trackAppSessions : true ,
trackScreen : true ,
trackUserProperties : true ,
trackExceptions : true
});
Analytics .track ('screen_view' , { screen : 'Home' , platform : platform });
🎯 Decision Matrix Scenario Best Choice Why Dashboard App Tabler Icons (5900+) Optimized for admin UI Tailwind Project Heroicons (official) Native integration Multiple Weights Phosphor (6 weights) Design flexibility 200K+ Icons Iconify (universal) Complete coverage Compact UI Radix Icons (~5KB) Minimal bundle
📊 Technology Comparison Framework Icons Bundle Size Use Case Type System React Native 1000+ Native apps TypeScript Medium Flutter 800+ Cross-platform Dart High Capacitor 500+ Hybrid apps Web + native Medium Ionic 1300+ Hybrid apps Angular/React Medium
🔗 Related Skills
Skill("moai-domain-frontend") – UI/UX integration patternsSkill("moai-domain-testing") - Mobile testing strategiesSkill("moai-domain-devops") - CI/CD and deploymentSkill("moai-domain-backend") - API integration and data management
Version : 4.0.0 Enterprise
Last Updated : 2025-11-13
Status : Production Ready
Stack : React Native 0.76+, Flutter 3.24+, Capacitor 6.x
