메뉴
Enterprise mobile development with React Native 0.76+, Flutter 3.24+, Capacitor 6.x, cross-platform patterns, testing, CI/CD
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-domain-mobile-app명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
| 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 | [] |
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
Purpose: Enterprise mobile development covering React Native, Flutter, Capacitor with modern patterns.
Core Stack (2025 Stable):
Quick Setup Patterns:
React Native App Structure:
// Main app with modern navigation
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= />
);
Flutter App Structure:
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(),
},
);
}
}
When to Use:
Modern Setup:
npx react-native@latest init MyApp --template
cd MyApp
npm install @react-navigation/native @react-native-async-storage @react-native-community/netinfo
Async Data Management:
const [products, setProducts] = useState<Product[]>([]);
const [loading, setLoading] = useState(false);
const [isOnline, setIsOnline] = useState(true);
// Load from cache first, then API
const loadProducts = useCallback(async () => {
try {
setLoading(true);
// Try cache first
const cached = await AsyncStorage.getItem('products');
if (cached) {
setProducts(JSON.parse(cached));
}
// Fetch fresh data if online
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]);
Detox E2E Testing:
// detox/e2e/app.config.js
module.exports = {
testEnvironment: 'node',
testRunner: 'jest',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
};
Component Testing:
// Component Testing with React Testing Library
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();
});
Image 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')}
/>
);
};
Plugin Structure:
// capacitor-plugin/src/index.ts
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:
// capacitor.config.ts
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: [
{
name: 'Camera',
plugins: ['camera', 'filesystem']
}
]
};
export default config;
Shared Service Architecture:
// services/user-service.ts
export class UserService {
async getUserProfile(userId: string): Promise<UserProfile> {
// Shared implementation across platforms
return await this.apiCall(`/users/${userId}`);
}
}
Platform-Specific Implementations:
// services/platform-specific/web-service.ts
export class WebUserService implements UserService {
async getUserProfile(userId: string): Promise<UserProfile> {
const response = await fetch(`/api/users/${userId}`);
return response.json();
}
}
// services/platform-specific/mobile-service.ts
export class MobileUserService implements UserService {
async getUserProfile(userId: string): Promise<UserProfile> {
const user = await this.realm.objects.get(userId);
return user.profile || null;
}
}
Sentry Integration:
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()
]
});
Custom Metrics:
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 });
| 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 |
| 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 |
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 managementVersion: 4.0.0 Enterprise Last Updated: 2025-11-13 Status: Production Ready Stack: React Native 0.76+, Flutter 3.24+, Capacitor 6.x
SOC 직업 분류 기준