企业官网建设流程全解析

ruflo 移动端 Agent 实战：用 Claude Flow V3 定义 React Native 跨平台开发专家（spec-mobile-react-native 全解析）

【免费下载链接】ruflo🌊 The original agent meta-harness. Deploy intelligent multi-player swarms, coordinate autonomous workflows, and build conversational AI systems. Features adaptive memory, self-learning intelligence, RAG integration, and native Claude Code / Codex / Hermes and many more Integrated项目地址: https://gitcode.com/GitHub_Trending/cl/ruflo

本文以 spec-mobile-react-native.md 为蓝本，系统拆解 Claude Flow V3 中mobile-dev这一 specialized 类型 Agent 的完整定义文件：从前置元数据、触发机制、工具权限、路径约束、生命周期钩子到提示词正文，逐段讲解每个字段的作用与取值含义，并结合仓库中.claude/agents/目录的初始化与迁移源码，说明这类 Agent 是如何被安装、识别和调度的。读完本文，你将能够独立读懂乃至编写一个面向 iOS/Android 双端的 React Native 开发 Agent 定义，并理解它在整个 Agent 体系中的定位。

一、文档定位：一份完整的移动端 Agent 定义

在 Claude Flow V3 中，Agent 通过v3/@claude-flow/cli/.claude/agents/目录下的 Markdown 文件进行声明式定义，每个文件由一段 YAML frontmatter（声明触发条件、能力、约束、钩子等结构化元数据）与一段 Markdown 提示词正文（描述 Agent 的角色、职责与行为规范）组成。

spec-mobile-react-native.md即属于其中的specialized（专项专家）类型，其仓库内存在两份：一份位于 v3/@claude-flow/cli/.claude/agents/specialized/mobile/spec-mobile-react-native.md（带mobile子分类目录），另一份位于 v3/@claude-flow/cli/.claude/agents/specialized/spec-mobile-react-native.md（specialized 根目录）。两份内容一致，均声明了 Agent 名mobile-dev（"Expert agent for React Native mobile application development across iOS and Android"）、类型specialized、版本1.0.0、创建日期2025-07-25，并带有color: "teal"的视觉标识。

在 agent-types.md 的 87 种 Agent 类型清单中，spec-mobile-react-native被明确列入Specialized（1）分类，最佳用途标注为 "Mobile development"（移动开发）。这说明它是该体系下移动端专项能力的唯一代表，与核心开发（coder/reviewer/tester）、V3 专项（security-architect 等）、Swarm 协调等类型并列。

从源码结构看，.claude/agents/是一个「分类/（子分类）/名称.md」的浅层树，如 migrate-agent-detection.ts 所述：path.join(cwd, '.claude', 'agents')下按分类查找 Agent 文件，specialized/mobile/即属于「分类specialized+ 子分类mobile」的目录层级。

二、触发机制：Agent 何时被选中

triggers字段决定了mobile-dev在何种输入下被激活，包含四类匹配规则：

这套设计覆盖了「对话意图 + 项目文件 + 任务句式 + 领域」四个维度：无论用户说"帮我做一个 iOS app"，还是仓库里出现了.tsx文件，或任务描述含 "implement * native module"，都会命中该 Agent。expo关键词与app.json文件模式配合，可识别 Expo 托管的 RN 工程；**/ios/**/*.m与**/android/**/*.java则用于捕捉原生代码改动。

三、能力边界：工具白名单与资源配额

capabilities字段是 Agent 的行为权限核心，mobile-dev的配置如下：

capabilities: allowed_tools: - Read - Write - Edit - MultiEdit - Bash - Grep - Glob restricted_tools: - WebSearch - Task # Focus on implementation max_file_operations: 100 max_execution_time: 600 memory_access: "both"

• allowed_tools（工具白名单）：放行 7 种工具，覆盖"读代码（Read/Grep/Glob）— 改代码（Write/Edit/MultiEdit）— 执行命令（Bash）"的完整开发闭环；
• restricted_tools（工具黑名单）：禁用WebSearch与Task。注释 "# Focus on implementation" 明确意图——该 Agent 被设计为专注本地实现、不联网检索、不委派子任务；
• 资源配额：max_file_operations: 100限制单次会话最大文件操作数；max_execution_time: 600（秒）限制最长执行时长；memory_access: "both"表示可读写短期与长期记忆。

这种「白名单放行 + 黑名单禁用 + 配额兜底」的三层结构，与 agent-capabilities.md 中描述的工具访问模式一脉相承（如coder: Read, Write, Edit, MultiEdit, Glob, Grep, Bash），是整个 Agent 体系统一遵循的能力约束范式。

四、路径约束与文件类型：安全边界的精细控制

constraints字段将 Agent 的操作范围限定在移动端工程的可写区域：

constraints: allowed_paths: - "src/**" - "app/**" - "components/**" - "screens/**" - "navigation/**" - "ios/**" - "android/**" - "assets/**" forbidden_paths: - "node_modules/**" - ".git/**" - "ios/build/**" - "android/build/**" max_file_size: 5242880 # 5MB for assets allowed_file_types: - ".js" ".jsx" ".ts" ".tsx" ".json" - ".m" ".h" ".java" ".kt"

值得关注的设计细节：

• 允许路径覆盖完整移动端拓扑：src/app/components/screens/navigation对应 RN 应用层，ios/**与android/**对应双端原生层，assets/**允许处理静态资源；
• 禁止路径针对性地排除构建产物：除通用的node_modules/**、.git/**外，特别禁止ios/build/**与android/build/**——Xcode DerivedData 与 Gradle 构建输出不应被 Agent 直接修改；
• 大小上限 5MB：注释 "# 5MB for assets" 说明该阈值是专门为资源文件（图片、字体、媒体）设定的，防止 Agent 读取超大二进制；
• 文件类型白名单：.m/.h（Objective-C 原生）、.java/.kt（Android 原生）、.js/.jsx/.ts/.tsx（RN 逻辑层）、.json（配置）——覆盖了跨平台开发涉及的全部语言面，同时排除了.yaml、.md等与实现无关的类型。

五、行为协议：错误处理、确认点与自动回滚

behavior字段定义了 Agent 的运行时行为约定：

behavior: error_handling: "adaptive" confirmation_required: - "native module changes" - "platform-specific code" - "app permissions" auto_rollback: true logging_level: "debug"

• adaptive 错误处理：采用自适应策略，即根据错误上下文动态调整修复路径（而非一刀切的重试）；
• 三个强制确认点：native module changes（原生模块改动）、platform-specific code（平台专属代码）、app permissions（应用权限）——这三类改动对构建与上架影响面大，Agent 必须征得用户确认后才能动手；
• auto_rollback: true：允许在失败时自动回滚改动，降低破坏性操作风险；
• debug 日志级别：便于开发者追踪 Agent 的每一步决策。

配套的communication字段则约定了输出风格：技术化（style: "technical"）、批量更新（update_frequency: "batch"）、允许附带代码片段（include_code_snippets: true）、少用 emoji（emoji_usage: "minimal"）。

六、协作与集成：委派、上下文共享与优化参数

integration与optimization字段描述了该 Agent 在多 Agent 体系中的协作关系：

integration: can_spawn: [] can_delegate_to: - "test-unit" - "test-e2e" requires_approval_from: [] shares_context_with: - "dev-frontend" - "spec-mobile-ios" - "spec-mobile-android" optimization: parallel_operations: true batch_size: 15 cache_results: true memory_limit: "1GB"

• can_spawn: []表示该 Agent 不主动派生子 Agent；
• can_delegate_to: ["test-unit", "test-e2e"]表示可将单元测试、端到端测试任务委派给测试类 Agent；
• shares_context_with声明了与前端开发 Agent（dev-frontend）、iOS 专项（spec-mobile-ios）、Android 专项（spec-mobile-android）共享上下文——注意后两个专项 Agent 在当前仓库中并未单独定义，可以推断它们属于该体系规划中的移动端 Agent 家族成员，mobile-dev是覆盖双端的聚合型角色；
• 优化参数（并行操作、批大小 15、结果缓存、1GB 内存上限）用于控制大规模文件操作时的资源消耗。

七、生命周期钩子：初始化、收尾与错误处理脚本

hooks字段定义了 Agent 在执行前、执行后、出错时三段生命周期中要运行的 shell 脚本，这也是全文最"可运行"的实操部分：

pre_execution（执行前）——环境探测：

echo "📱 React Native Developer initializing..." echo "🔍 Checking React Native setup..." if [ -f "package.json" ]; then grep -E "react-native|expo" package.json | head -5 fi echo "🎯 Detecting platform targets..." [ -d "ios" ] && echo "iOS platform detected" [ -d "android" ] && echo "Android platform detected" [ -f "app.json" ] && echo "Expo project detected"

这段脚本实现了「工程类型判定」：通过grep react-native|expo检查依赖，通过ios/、android/目录是否存在判断原生工程，通过app.json判断是否为 Expo 项目——一次探测即可确定后续的原生配置策略。

post_execution（执行后）——结构盘点：

echo "✅ React Native development completed" echo "📦 Project structure:" find . -name "*.js" -o -name "*.jsx" -o -name "*.tsx" | grep -E "(screens|components|navigation)" | head -10 echo "📲 Remember to test on both platforms"

快速列出screens/components/navigation等核心目录下的源码文件，并提醒"双端都要测试"。

on_error（出错时）——三连修复命令：

echo "❌ React Native error: {{error_message}}" echo "🔧 Common fixes:" echo " - Clear metro cache: npx react-native start --reset-cache" echo " - Reinstall pods: cd ios && pod install" echo " - Clean build: cd android && ./gradlew clean"

注意{{error_message}}是错误信息模板变量，三条修复命令分别针对 RN 开发中最常见的三类故障：Metro 打包缓存、iOS CocoaPods 依赖、Android Gradle 构建。这组命令可直接作为 RN 开发者的排障速查表使用。

八、提示词正文：职责、最佳实践与组件模板

frontmatter 之后是# React Native Mobile Developer提示词正文，定义了角色的行为纲领：

五大核心职责：

1. 开发 React Native 组件与页面（Develop React Native components and screens）
2. 实现导航与状态管理（Implement navigation and state management）
3. 处理平台专属代码与样式（Handle platform-specific code and styling）
4. 按需集成原生模块（Integrate native modules when needed）
5. 优化性能与内存使用（Optimize performance and memory usage）

六条最佳实践：使用函数组件与 Hooks、采用 React Navigation 导航、合理处理平台差异、优化图片与资源、在 iOS 与 Android 双端测试、遵循规范样式模式。

组件模式示例（原文完整保留）是一个典型的函数式组件，示范了本 Agent 期望的编码风格：

import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet, Platform, TouchableOpacity } from 'react-native'; const MyComponent = ({ navigation }) => { const [data, setData] = useState(null); useEffect(() => { // Component logic }, []); return ( <View style={styles.container}> <Text style={styles.title}>Title</Text> <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('NextScreen')} > <Text style={styles.buttonText}>Continue</Text> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: '#fff', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, ...Platform.select({ ios: { fontFamily: 'System' }, android: { fontFamily: 'Roboto' }, }), }, button: { backgroundColor: '#007AFF', padding: 12, borderRadius: 8, }, buttonText: { color: '#fff', fontSize: 16, textAlign: 'center', }, });

这段代码包含了三处值得学习的平台适配手法：

• Platform.select字体差异化：iOS 用系统字体System，Android 用Roboto，同一 StyleSheet 对象内完成双端适配；
• 导航注入：组件通过navigation.navigate('NextScreen')与 React Navigation 集成；
• 样式集中管理：全部样式收敛在StyleSheet.create中，保持渲染逻辑与样式分离。

平台专属注意事项：

九、配套示例：触发与响应约定

examples字段提供了两个端到端的行为样例，用于校准 Agent 的响应预期：

这两个示例界定了mobile-dev的能力下限：不仅要"写代码"，还要自带校验、安全、双端配置等工程化考量，与 frontmatter 中confirmation_required: ["app permissions"]的设计形成呼应——推送通知恰好涉及应用权限，会触发强制确认流程。

十、Agent 如何进入你的工程：初始化与调度机制

理解了定义文件的全部字段后，最后一个实操问题是：这类 Agent 如何被安装到项目里？仓库源码给出了清晰答案：

• 初始化复制：在 executor.ts 中，初始化流程会先确保目标项目存在.claude/agents目录，然后遍历specialized等 agent 分类（第 141 行附近定义了specialized: ['specialized']分类映射），将源目录下的 Agent 文件按分类复制到<cwd>/.claude/agents/<category>/，并记录到result.created/result.addedAgents统计中；
• 组件开关：init.ts 中options.components.agents对应初始化结果的 "Agents: .claude/agents/ (N agents)" 提示，第 991 行将其作为默认勾选的初始化组件（'Agents', hint: 'Agent definitions in .claude/agents/'）；
• 识别约定：Agent 文件统一存放于.claude/agents/浅层目录树（分类/子分类/名称.md），迁移与检测逻辑见 migrate-agent-detection.ts；
• 运行方式：安装后可参考 agent-types.md 中的通用命令查看与唤起 Agent（如npx @claude-flow/cli@latest agent spawn -t <agent-type>），具体可用命令以当前 CLI 版本实际帮助输出为准。

若想参考同目录下其他 Agent 的定义风格，可对比阅读 dev-backend-api.md（backend-dev，type: development）——它展示了一个 v2 能力的后端 Agent 定义，与mobile-dev在 metadata、triggers、constraints 等字段上结构一致、取值不同，可作为编写新 Agent 定义的对照模板。

结语

spec-mobile-react-native.md是一个结构完整、可直接投入使用的专项 Agent 定义：它用 12 个 frontmatter 字段（metadata / triggers / capabilities / constraints / behavior / communication / integration / optimization / hooks / examples 等）将「React Native 跨平台开发专家」这一角色进行了声明式建模，覆盖了触发、权限、约束、协作、排障的完整生命周期，并用提示词正文固化了函数组件 + React Navigation + 平台适配 + FlatList 优化等方法论。理解这份文件，不仅意味着读懂了 Claude Flow V3 的 Agent 定义规范，也为你编写自己的专项 Agent 提供了可复制的完整范式。

【免费下载链接】ruflo🌊 The original agent meta-harness. Deploy intelligent multi-player swarms, coordinate autonomous workflows, and build conversational AI systems. Features adaptive memory, self-learning intelligence, RAG integration, and native Claude Code / Codex / Hermes and many more Integrated项目地址: https://gitcode.com/GitHub_Trending/cl/ruflo