Claude Code移动开发子代理实战：打造你的全平台APP架构师

// 场景对比：实现一个简单的列表页面

// ❌ 通用Claude可能给你的代码
<div className="list">
  {items.map(item =><div>{item.name}</div>)}
</div>
// 问题：没考虑触摸优化、没有下拉刷新、不支持手势、性能差

// ✅ 移动子代理会给你的完整方案
import { FlatList, RefreshControl, TouchableOpacity } from 'react-native';

const OptimizedList = () => {
  const [refreshing, setRefreshing] = useState(false);

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <TouchableOpacity 
          activeOpacity={0.7}
          onPress={() => handlePress(item)}
          style={styles.listItem}
        >
          <Text>{item.name}</Text>
        </TouchableOpacity>
      )}
      keyExtractor={item => item.id}
      refreshControl={
        <RefreshControl 
          refreshing={refreshing} 
          onRefresh={onRefresh}
        />
      }
      initialNumToRender={10}  // 性能优化
      maxToRenderPerBatch={5}   // 批量渲染
      windowSize={10}           // 视窗优化
      removeClippedSubviews     // 移除不可见项
      onEndReached={loadMore}   // 无限滚动
      onEndReachedThreshold={0.5}
    />
  );
};

---
name: mobile-developer
description: Build performant mobile applications for iOS and Android using React Native, Flutter, or native development. Specializes in mobile UX patterns and device optimization. Use PROACTIVELY for mobile app development and optimization.
model: sonnet
---

---
名称: 移动开发专家
描述: 使用React Native、Flutter或原生开发构建iOS和Android高性能应用。
      专精移动端UX模式和设备优化。
      在移动应用开发和优化时主动使用。
模型: sonnet（速度与质量平衡）
---

---
name: mobile-developer
description: Build performant mobile applications for iOS and Android using React Native, Flutter, or native development. Specializes in mobile UX patterns and device optimization. Use PROACTIVELY for mobile app development and optimization.
model: sonnet
---
You are a mobile development expert specializing in creating high-performance, user-friendly mobile applications across platforms.

## Platform Expertise
- React Native with Expo and bare workflow optimization
- Flutter with Dart for cross-platform development
- Native iOS development (Swift, SwiftUI, UIKit)
- Native Android development (Kotlin, Jetpack Compose)
- Progressive Web Apps (PWA) with mobile-first design
- Mobile DevOps and CI/CD pipelines
- App store optimization and deployment strategies
- Performance profiling and optimization techniques

## Mobile-First Approach
1. Touch-first interaction design and gesture handling
2. Offline-first architecture with data synchronization
3. Battery life optimization and background processing
4. Network efficiency and adaptive content loading
5. Platform-specific UI guidelines adherence
6. Accessibility support for assistive technologies
7. Security best practices for mobile environments
8. App size optimization and bundle splitting

## Development Standards
- Responsive layouts adapted for various screen sizes
- Native performance with60fps animations
- Secure local storage and biometric authentication
- Push notifications and deep linking integration
- Camera, GPS, and sensor API implementations
- Offline functionality with local database sync
- Comprehensive testing on real devices
- App store compliance and review guidelines adherence
- Crash reporting and analytics integration

Build mobile applications that feel native to each platform while maximizing code reuse. Focus on performance, user experience, and platform-specific conventions to ensure app store success.

---
name: mobile-developer
description: 构建iOS和Android高性能应用，支持React Native、Flutter和原生开发。专注移动UX和设备优化。
model: sonnet
---
你是一位移动开发专家，专精于创建高性能、用户友好的跨平台移动应用。

## 平台技术栈 / Platform Expertise
- React Native配合Expo和裸工作流优化
- Flutter与Dart跨平台开发
- iOS原生开发（Swift、SwiftUI、UIKit）
- Android原生开发（Kotlin、Jetpack Compose）
- 渐进式Web应用（PWA）移动优先设计
- 移动端DevOps和CI/CD流水线
- 应用商店优化和部署策略
- 性能分析和优化技术

## 移动优先方法 / Mobile-First Approach
1. 触摸优先的交互设计和手势处理
2. 离线优先架构与数据同步
3. 电池续航优化和后台处理
4. 网络效率和自适应内容加载
5. 遵循平台特定UI指南
6. 辅助技术的无障碍支持
7. 移动环境安全最佳实践
8. 应用体积优化和包拆分

## 开发标准 / Development Standards
- 适配各种屏幕尺寸的响应式布局
- 原生性能与60fps动画
- 安全本地存储和生物识别认证
- 推送通知和深度链接集成
- 相机、GPS和传感器API实现
- 带本地数据库同步的离线功能
- 真机全面测试
- 应用商店合规和审核指南遵守
- 崩溃报告和分析集成

构建让每个平台都感觉原生的移动应用，同时最大化代码重用。
专注于性能、用户体验和平台特定约定，确保应用商店成功。

# 在Claude Code中输入
/agents

用React Native创建一个登录页面，要有良好的用户体验

// LoginScreen.tsx - React Native登录页面
import React, { useState, useRef, useEffect } from'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  Animated,
  Dimensions,
  Alert,
  ActivityIndicator,
  Keyboard,
  TouchableWithoutFeedback,
} from'react-native';
import { SafeAreaView } from'react-native-safe-area-context';
import * as Haptics from'expo-haptics';
import * as LocalAuthentication from'expo-local-authentication';
import AsyncStorage from'@react-native-async-storage/async-storage';
import { LinearGradient } from'expo-linear-gradient';

const { width, height } = Dimensions.get('window');

const LoginScreen = ({ navigation }) => {
// 状态管理
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const [rememberMe, setRememberMe] = useState(false);

// 动画值
const logoAnimation = useRef(new Animated.Value(0)).current;
const formAnimation = useRef(new Animated.Value(0)).current;
const buttonScale = useRef(new Animated.Value(1)).current;

// Refs
const passwordInput = useRef(null);

  useEffect(() => {
    // 启动动画
    Animated.parallel([
      Animated.timing(logoAnimation, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }),
      Animated.timing(formAnimation, {
        toValue: 1,
        duration: 800,
        delay: 300,
        useNativeDriver: true,
      }),
    ]).start();

    // 检查生物识别
    checkBiometrics();
    
    // 加载保存的邮箱
    loadSavedEmail();
  }, []);

// 检查生物识别可用性
const checkBiometrics = async () => {
    const hasHardware = await LocalAuthentication.hasHardwareAsync();
    const isEnrolled = await LocalAuthentication.isEnrolledAsync();
    
    if (hasHardware && isEnrolled) {
      // 显示生物识别选项
      const savedToken = await AsyncStorage.getItem('userToken');
      if (savedToken) {
        promptBiometricAuth();
      }
    }
  };

// 生物识别认证
const promptBiometricAuth = async () => {
    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: '使用生物识别快速登录',
      fallbackLabel: '使用密码',
      cancelLabel: '取消',
    });

    if (result.success) {
      // 触觉反馈
      await Haptics.notificationAsync(
        Haptics.NotificationFeedbackType.Success
      );
      // 自动登录
      handleBiometricLogin();
    }
  };

// 处理登录
const handleLogin = async () => {
    // 关闭键盘
    Keyboard.dismiss();
    
    // 验证输入
    if (!email || !password) {
      Alert.alert('提示', '请输入邮箱和密码');
      await Haptics.notificationAsync(
        Haptics.NotificationFeedbackType.Warning
      );
      return;
    }

    // 按钮动画
    Animated.sequence([
      Animated.timing(buttonScale, {
        toValue: 0.95,
        duration: 100,
        useNativeDriver: true,
      }),
      Animated.timing(buttonScale, {
        toValue: 1,
        duration: 100,
        useNativeDriver: true,
      }),
    ]).start();

    setIsLoading(true);

    try {
      // API调用
      const response = await loginAPI(email, password);
      
      // 保存凭证
      if (rememberMe) {
        await AsyncStorage.setItem('userEmail', email);
      }
      
      // 成功反馈
      await Haptics.notificationAsync(
        Haptics.NotificationFeedbackType.Success
      );
      
      // 导航到主页
      navigation.replace('Home');
      
    } catch (error) {
      // 错误处理
      Alert.alert(
        '登录失败',
        error.message || '请检查您的邮箱和密码',
        [{ text: '确定', onPress: () => passwordInput.current?.focus() }]
      );
      
      // 错误反馈
      await Haptics.notificationAsync(
        Haptics.NotificationFeedbackType.Error
      );
    } finally {
      setIsLoading(false);
    }
  };

return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <LinearGradient
        colors={['#667eea', '#764ba2']}
        style={{ flex: 1 }}
      >
        <SafeAreaView style={{ flex: 1 }}>
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
            style={{ flex: 1 }}
          >
            <ScrollView
              contentContainerStyle={{ flexGrow: 1 }}
              keyboardShouldPersistTaps="handled"
              showsVerticalScrollIndicator={false}
            >
              {/* Logo区域 */}
              <Animated.View
                style={{
                  alignItems: 'center',
                  marginTop:height * 0.1,
                  opacity:logoAnimation,
                  transform: [
                    {
                      translateY:logoAnimation.interpolate({
                        inputRange: [0, 1],
                        outputRange: [-50, 0],
                      }),
                    },
                  ],
                }}
              >
                <Text style={styles.logo}>👋</Text>
                <Text style={styles.welcomeText}>欢迎回来</Text>
              </Animated.View>

              {/* 表单区域 */}
              <Animated.View
                style={{
                  padding:20,
                  opacity:formAnimation,
                  transform: [
                    {
                      translateY:formAnimation.interpolate({
                        inputRange: [0, 1],
                        outputRange: [50, 0],
                      }),
                    },
                  ],
                }}
              >
                {/* 邮箱输入 */}
                <View style={styles.inputContainer}>
                  <TextInput
                    style={styles.input}
                    placeholder="邮箱地址"
                    placeholderTextColor="rgba(255,255,255,0.7)"
                    value={email}
                    onChangeText={setEmail}
                    keyboardType="email-address"
                    autoCapitalize="none"
                    autoCorrect={false}
                    returnKeyType="next"
                    onSubmitEditing={() => passwordInput.current?.focus()}
                  />
                </View>

                {/* 密码输入 */}
                <View style={styles.inputContainer}>
                  <TextInput
                    ref={passwordInput}
                    style={[styles.input, { paddingRight: 50 }]}
                    placeholder="密码"
                    placeholderTextColor="rgba(255,255,255,0.7)"
                    value={password}
                    onChangeText={setPassword}
                    secureTextEntry={!showPassword}
                    returnKeyType="done"
                    onSubmitEditing={handleLogin}
                  />
                  <TouchableOpacity
                    style={styles.eyeIcon}
                    onPress={() => setShowPassword(!showPassword)}
                  >
                    <Text>{showPassword ? '👁' : '👁‍🗨'}</Text>
                  </TouchableOpacity>
                </View>

                {/* 记住我 */}
                <TouchableOpacity
                  style={styles.rememberContainer}
                  onPress={() => setRememberMe(!rememberMe)}
                >
                  <View style={[styles.checkbox, rememberMe && styles.checkboxChecked]}>
                    {rememberMe && <Text style={styles.checkmark}>✓</Text>}
                  </View>
                  <Text style={styles.rememberText}>记住我</Text>
                </TouchableOpacity>

                {/* 登录按钮 */}
                <Animated.View style={{ transform: [{ scale: buttonScale }] }}>
                  <TouchableOpacity
                    style={styles.loginButton}
                    onPress={handleLogin}
                    disabled={isLoading}
                    activeOpacity={0.8}
                  >
                    {isLoading ? (
                      <ActivityIndicator color="#667eea" />
                    ) : (
                      <Text style={styles.loginButtonText}>登录</Text>
                    )}
                  </TouchableOpacity>
                </Animated.View>

                {/* 其他选项 */}
                <View style={styles.footer}>
                  <TouchableOpacity onPress={() => navigation.navigate('ForgotPassword')}>
                    <Text style={styles.linkText}>忘记密码？</Text>
                  </TouchableOpacity>
                  <TouchableOpacity onPress={() => navigation.navigate('Register')}>
                    <Text style={styles.linkText}>立即注册</Text>
                  </TouchableOpacity>
                </View>
              </Animated.View>
            </ScrollView>
          </KeyboardAvoidingView>
        </SafeAreaView>
      </LinearGradient>
    </TouchableWithoutFeedback>
  );
};

const styles = {
// 样式定义...
};

exportdefault LoginScreen;

优化一个包含大量图片的列表页面性能

// OptimizedImageList.tsx - 性能优化的图片列表
import React, { memo, useCallback, useMemo } from'react';
import {
  FlatList,
  View,
  Text,
  Image,
  Dimensions,
  Platform,
} from'react-native';
import FastImage from'react-native-fast-image';

const { width } = Dimensions.get('window');
const ITEM_HEIGHT = 200;

// 优化的列表项组件
const ListItem = memo(({ item, index }) => {
return (
    <View style={styles.itemContainer}>
      <FastImage
        style={styles.image}
        source={{
          uri: item.thumbnail, // 使用缩略图
          priority: FastImage.priority.normal,
          cache: FastImage.cacheControl.immutable,
        }}
        resizeMode={FastImage.resizeMode.cover}
      />
    </View>
  );
}, (prevProps, nextProps) => {
// 自定义比较函数，只在必要时重新渲染
return prevProps.item.id === nextProps.item.id;
});

const OptimizedImageList = ({ data }) => {
// 优化的渲染函数
const renderItem = useCallback(({ item, index }) => (
    <ListItem item={item} index={index} />
  ), []);

// 优化的key提取
const keyExtractor = useCallback((item) => item.id.toString(), []);

// 获取项目布局（提升滚动性能）
const getItemLayout = useCallback((data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  }), []);

return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      getItemLayout={getItemLayout}
      
      // 性能优化配置
      initialNumToRender={5}
      maxToRenderPerBatch={3}
      updateCellsBatchingPeriod={100}
      windowSize={10}
      removeClippedSubviews={Platform.OS === 'android'}
      
      // 滚动优化
      scrollEventThrottle={16}
      decelerationRate="fast"
      
      // 内存优化
      onViewableItemsChanged={onViewableItemsChanged}
      viewabilityConfig={viewabilityConfig}
    />
  );
};

## Platform Expertise
-ReactNative0.73+
-ExpoSDK50
-ReactNavigation6
-ReduxToolkit+RTKQuery
-Reanimated3动画库
-ReactNativePaperUI库

## Platform Expertise  
- Flutter 3.0+
- Riverpod状态管理
- GetX路由管理
- Dio网络请求
- Hive本地存储
- Flutter Bloc架构

## Company Standards
- 设计规范：遵循公司Design System
- 性能指标：启动时间<2秒，FPS>55
- 包大小：iOS<50MB，Android<30MB
- 最低支持：iOS 13+，Android 6+

// 自动生成平台特定代码
const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
    ...Platform.select({
      ios: { shadowColor: '#000' },
      android: { elevation: 4 }
    })
  }
});