Skip to main content سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-domain-mobile-appيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المزيد من هذا المستودع Enterprise database architecture specialist with PostgreSQL 17, MySQL 8.4 LTS,
MongoDB 8.0, Redis 7.4 expertise. Master connection pooling, query optimization,
caching strategies, and database DevOps automation. Build scalable, resilient
database systems with comprehensive monitoring and disaster recovery.
Enterprise Frontend Development with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces
Enterprise-grade security expertise with production-ready patterns for OWASP Top 10 2021, zero-trust architecture, threat modeling (STRIDE, PASTA), secure SDLC, DevSecOps automation, cloud security, cryptography, identity & access management, and compliance frameworks (SOC 2, ISO 27001, GDPR, CCPA).
المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
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
