基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/MikeTreml/MissionControl --skill react-native-development命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Expert Electron application architecture skill for IPC design, main/renderer/preload boundaries, security hardening, performance optimization, packaging strategy, native integration, and cross-platform desktop development. Use when reviewing or designing Electron apps, planning migrations, auditing architecture risks, choosing IPC patterns, diagnosing startup or memory issues, or coordinating related Electron skills.
Generates DrawIO XML diagrams for Amazon Web Services architectures from text descriptions or images. Analyzes existing .drawio files to extract AWS components. Use for AWS architecture diagrams, cloud infrastructure documentation, or when converting AWS diagram images to editable DrawIO format.
Generates DrawIO XML diagrams for Google Cloud Platform architectures from text descriptions or images. Analyzes existing .drawio files to extract GCP components. Use for GCP architecture diagrams, cloud infrastructure documentation, or when converting GCP diagram images to editable DrawIO format.
| name | React Native Development |
| description | Deep integration with React Native ecosystem for cross-platform mobile development |
| version | 1.0.0 |
| category | Cross-Platform Development |
| slug | react-native-dev |
| status | active |
This skill provides deep integration with the React Native ecosystem for cross-platform mobile development. It enables execution of React Native CLI commands, component generation, build optimization, and comprehensive debugging capabilities.
bash - Execute React Native CLI, Expo CLI, and npm/yarn commandsread - Analyze React Native project files, configurations, and componentswrite - Generate and modify React Native components and configurationsedit - Update existing React Native code and configurationsglob - Search for React Native components and configuration filesgrep - Search for patterns in React Native codebaseReact Native CLI Operations
Expo CLI Operations
Component Generation
Redux Toolkit Integration
Zustand/Jotai/Recoil
Performance Optimization
Native Module Integration
This skill integrates with the following processes:
react-native-app-setup.js - Project initialization and configurationcross-platform-ui-library.js - Shared component developmentmobile-testing-strategy.js - Test implementation and coveragemobile-performance-optimization.js - Performance tuningnpx react-native)npx expo)project-root/
├── src/
│ ├── components/
│ ├── screens/
│ ├── navigation/
│ ├── store/
│ ├── hooks/
│ ├── services/
│ ├── utils/
│ └── types/
├── __tests__/
├── android/
├── ios/
├── metro.config.js
├── babel.config.js
├── tsconfig.json
└── package.json
// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const config = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
# Create new React Native project
npx react-native init MyApp --template react-native-template-typescript
# Or with Expo
npx create-expo-app MyApp --template expo-template-blank-typescript
// src/components/Button/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
variant?: 'primary' | 'secondary';
disabled?: boolean;
}
export const Button: React.FC<ButtonProps> = ({
title,
onPress,
variant = 'primary',
disabled = false,
}) => {
return (
<TouchableOpacity
style={[styles.button, styles[variant], disabled && styles.disabled]}
onPress={onPress}
disabled={disabled}
activeOpacity={0.8}
>
<Text style={[styles.text, [`${}`]]}>{title}
);
};
styles = .({
: {
: ,
: ,
: ,
: ,
},
: {
: ,
},
: {
: ,
: ,
: ,
},
: {
: ,
},
: {
: ,
: ,
},
: {
: ,
},
: {
: ,
},
});
// src/navigation/RootNavigator.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from '../screens/HomeScreen';
import { DetailsScreen } from '../screens/DetailsScreen';
export type RootStackParamList = {
Home: undefined;
Details: { id: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
export const RootNavigator: React.FC = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen = = />
);
};
// src/store/store.ts
import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { api } from './api';
import userReducer from './slices/userSlice';
export const store = configureStore({
reducer: {
user: userReducer,
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
});
setupListeners(store.dispatch);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
Metro bundler cache issues
npx react-native start --reset-cache
iOS pod installation failures
cd ios && pod install --repo-update
Android Gradle sync issues
cd android && ./gradlew clean
Native module linking issues
npx react-native link
# Or for newer versions, use autolinking
flutter-dart - Alternative cross-platform frameworkmobile-testing - Comprehensive testing frameworksmobile-perf - Performance profiling and optimizationpush-notifications - Push notification implementation