Skip to main content Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-domain-mobile-appDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository
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).
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
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
