1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | react-native-best-practices（合集仓库 callstackincubator/agent-skills 子技能） |
| 作者/维护者 | Callstack（React Native 领域知名咨询公司，官方 GitHub 组织 callstackincubator） |
| 来源链接 | https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-best-practices |
| 许可证 | MIT（GitHub API 核实，仓库级声明） |
| GitHub Stars | 1,574（callstackincubator/agent-skills 合集仓库整体，不代表本子技能个体热度） |
| Forks | 113（同上，合集仓库整体） |
| 最新版本 | 无独立版本号，SKILL.md 随仓库持续迭代，本目录最近一次改动为 2026-07-07 |
| 安装方式 | Claude Code 插件市场一条命令；Codex 内置插件或 skill-installer；其他 agent 手动克隆 |
2. 功能介绍与亮点
一份基于 Callstack 官方电子书《The Ultimate Guide to React Native Optimization》整理的 React Native / Expo 应用性能优化指南，把“卡顿/掉帧/内存泄漏/包体积大/启动慢”这类问题的排查思路固化成可供 agent 直接调用的结构化知识库：
- 三大板块全覆盖：JavaScript/React（FPS、重渲染、列表虚拟化、状态管理）、原生层（iOS/Android 性能剖析、Turbo Modules、线程模型）、打包（Bundle 体积分析、Tree Shaking、R8 压缩）
- 30 篇分层参考文档：每篇按
js-*/native-*/bundle-*前缀归类，标注 CRITICAL/HIGH/MEDIUM 影响等级，agent 可按症状精准加载对应文档而非通读全文 - “测量→优化→复测→验证”工作流：强制要求先拿到 FPS/TTI/Bundle 体积等实测基线数据再动手优化，明确禁止在无 profiling 证据时臆测重渲染或内存问题
- Problem → Skill Mapping 速查表：把“App 感觉卡”“启动慢”“内存持续增长”等口语化症状直接映射到具体参考文档，降低排查门槛
- 主动的安全引导：SKILL.md 内含独立“Security Guardrails”章节，提醒开发者审查生成的 shell 命令来源、对第三方依赖做供应链核查、不要将远程脚本直接管道执行
3. 适用场景
固定分类：前端与设计。适用于使用 React Native / Expo 开发跨平台移动应用、需要诊断和解决卡顿掉帧、内存泄漏、启动慢、包体积过大等性能问题的初中级移动/前端开发者，尤其适合缺乏系统性能剖析经验、容易凭直觉乱加 useMemo/useCallback 的团队。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——仓库自带
.claude-plugin/marketplace.json，/plugin marketplace add callstackincubator/agent-skills后/plugin install react-native-best-practices@callstack-agent-skills一条命令安装 - Codex：✅ 原生支持——仓库自带 Codex 插件清单可自动加载，子目录也含
agents/openai.yaml元数据适配 Codex Skills UI，另可用 skill-installer 安装 - OpenClaw：❓ 未验证——已抓取材料未提及，未为此单独搜索
- Hermes Agent：❓ 未验证——已抓取材料未提及，未为此单独搜索
（仓库 README 另说明支持 Cursor、Gemini CLI、OpenCode 的安装方式，但不在本报告固定评估的四个生态之内。）
5. 推荐理由
把 React Native 性能优化从“依赖资深工程师个人经验和直觉”变成 agent 可直接调用的结构化知识库——测量优先的工作流、按影响等级分类的问题清单、症状到文档的速查映射，叠加 Callstack 作为该领域头部咨询公司的实战积累，能显著降低团队自行摸索排查性能问题的成本，也减少 agent 在没有实测证据时瞎猜优化点的情况。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 8 | 合集仓库整体 1,574 Stars/113 Forks 不计入个体评分；本子目录自身有 26 次提交，其中约 19 次专属改动仅涉及本目录（经逐笔核对 files 字段排除批量提交），从 2026-01-14 首次提交持续到 2026-07-07，跨越约半年的稳定迭代节奏；DEV Community 有独立作者（非官方渠道）撰文介绍推荐；同时被多个第三方 Agent Skills 聚合目录站独立收录索引，社区发现度较广 |
| 可用性 | 9 | Claude Code 一条命令通过插件市场安装，Codex 有内置插件与 skill-installer 两种路径，其他主流 Agent 工具也有官方安装说明；文档体系完整（SKILL.md + 30 篇分层参考文档 + 独立 onboarding 文件），按影响等级排序便于快速定位；最近一次维护在 2026-07-07，核心功能无任何付费依赖 |
| 安全性 | 8 | 见下方检查清单 |
安全检查清单：
① shell 命令执行——涉及标准 React Native/Expo CLI 命令（如 npx react-native bundle、source-map-explorer）及自定义 agent-device 工具做性能剖析，均为本地开发工具链操作，非高危脚本
② 联网外发——核心功能（性能剖析、Bundle 分析）纯本地执行，不涉及联网上传数据
③ 凭据存储——不要求任何 API Key 或凭据
④ 无可疑指令——通读 SKILL.md/POWER.md 及全部参考文档为标准性能优化知识，且主动包含“Security Guardrails”提醒开发者审查 shell 命令来源、核查第三方依赖供应链、避免管道执行远程脚本，未发现诱导性或数据外发指令
⑤ 作者信誉——Callstack 为 React Native 领域知名咨询公司，callstackincubator 为其官方 GitHub 组织
⑥ License——MIT，仓库级明确声明
⑦ 最近维护——本目录 2026-07-07 有提交，仓库整体 2026-07-25 仍有其他子技能更新，维护活跃
7. 跟同类 Skills 相比的优势
| 竞品 | 定位 | 差异 |
|---|---|---|
| expo-router（Expo 官方） | 配置 Expo/React Native 应用的文件路由与页面导航 | 解决“如何组织页面结构”，与本技能“如何优化已有代码性能”分属移动开发生命周期的不同阶段，二者互补而非竞争 |
| expo-module（Expo 官方） | 编写 Expo 应用的原生模块/原生视图 | 聚焦“如何从零编写原生能力”，本技能聚焦“已有代码为何变慢、如何测量与优化”，覆盖面不重叠 |
| react-best-practices（Vercel Labs） | React/Next.js（Web 端）性能规则库 | 同为“框架性能优化”定位，但服务对象是浏览器端 React 而非移动端 React Native，运行时环境（浏览器 vs Hermes/JSC 引擎 + 原生桥接）完全不同，不涉及 Bundle 原生化、Turbo Modules、原生线程模型等移动专属议题 |
8. 用户评价
DEV Community 作者 Ajmal Hasan 于 2026-01-22 发文《How to Use React Native Best Practices Agent Skills》，介绍该技能“为 AI 编码助手提供全面的指南，可自动检测、建议并实施 React Native 与 Expo 应用的性能优化”，并在文末以“Happy Optimizing! 🚀“表达正面推荐态度；该文章为独立第三方撰写，非 Callstack 官方发布。除此之外，该技能目前在第三方平台尚无更多具名用户评价。
9. 其他补充
同仓库还提供 upgrading-react-native（版本升级）、react-native-brownfield-migration（原生应用增量接入 RN）、assess-react-native-migration（迁移评估）、create-react-native-library（原生库脚手架）、react-navigation（导航库指引）等姊妹技能，可按需搭配安装。
10. 安装使用方式
- Claude Code：
/plugin marketplace add callstackincubator/agent-skills，随后/plugin install react-native-best-practices@callstack-agent-skills - Codex：仓库自带
.agents/plugins/marketplace.json可自动识别安装；或用$skill-installer install react-native-best-practices from callstackincubator/agent-skills；也可手动git clone后复制skills/react-native-best-practices到.codex/skills/ - 其他支持 Agent Skills 标准的工具：直接
git clone https://github.com/callstackincubator/agent-skills.git，复制skills/react-native-best-practices目录到对应 agent 的 skills 目录 - 安装后无需重启即可生效；agent 会依据任务描述（如“FlatList 滚动卡顿”“包体积过大”）自动触发加载对应参考文档，也可显式提及技能名手动调用
11. 注意事项
- 技能内含的 shell 命令（打包分析、profiling 脚本）建议在执行前人工过目，尤其是涉及远程 chunk 加载的场景，SKILL.md 本身也提示优先使用签名过的 CI 发布产物而非未经校验的远程脚本
- 性能剖析部分依赖
agent-device react-devtools或 Xcode Instruments / Android Studio Profiler 等外部工具，未安装对应工具链时需按文档指引的手动 fallback 操作 - OpenClaw、Hermes Agent 的兼容性尚未验证
- 该技能面向“诊断与优化已有代码性能”，不涉及页面路由、原生模块编写等场景，需按需搭配仓库内的姊妹技能使用