给 AI Coding Agent 装上 React Native 外挂：callstackincubator/agent-skills 上手指南

你的 AI 编程助手写 React Native 代码时有没有过这些问题：

FlatList 滚动卡顿，它只会让你加 getItemLayout，不知道还有 FlashList、disableVirtualization 这些杀手锏
内存泄漏排查，它只会让你检查 useEffect cleanup，看不到 Native 层的引用循环
Bundle 体积爆炸，它只让你删图片，不懂 Hermes mmap、Tree Shaking、Code Splitting 怎么配

这不是 AI 不行，是 AI 缺少"领域知识"。callstackincubator/agent-skills 就是来补这块短板的。

这是什么

由 Callstack 开源的一套 Agent Skill 集合 ，专为 AI 编程助手（Claude Code、Cursor、Codex 等）优化。Callstack 是 React Native 生态的核心贡献团队，他们出的 Ultimate Guide to React Native Optimization 基本是 RN 性能优化的官方非官方标准。

这个仓库把这些最佳实践做成了 Agent 能直接读的 Markdown 文件，按 Skill 组织，附带快速参考表、代码对比示例、shell 命令，AI 读了之后写代码水平直接上一个台阶。

GitHub: github.com/callstackin... （590+ Stars）

有哪些 Skill

一共 5 个：

1. react-native-best-practices（核心中的核心）

30 篇参考文档，覆盖 RN 性能优化的方方面面：

领域	内容
JS/React	FlatList/FlashList 优化、Reanimated 动画、内存泄漏排查、并发渲染、React Compiler、Uncontrolled 组件、FPS 测量、BottomSheet
Native	TTI 测量、Native 内存泄漏、Turbo Modules、线程模型、View Flattening、Platform Setup、Profiling
Bundle	Bundle 分析、Tree Shaking、Hermes mmap、Code Splitting、Barrel Exports、R8/Android、Library Size

每篇文档都是"Quick Pattern（错误/正确代码对比）+ Deep Dive（原理+步骤+常见坑）"的结构，Agent 秒懂，你 Code Review 也能直接拿来当检查清单。

2. github

用 gh CLI 管理 PR：创建、squash merge、stacked PR 链式合并。适合你让 AI 帮你操作 GitHub 的时候用。

3. github-actions

RN 项目的 CI/CD 参考：iOS 模拟器云构建、Android 模拟器云构建、产物下载。

4. upgrading-react-native

RN 版本升级指南，基于 rn-diff-purge 模板差分，覆盖依赖升级、Expo SDK 升级、Monorepo 场景、升级后验证。

5. react-native-brownfield-migration

原生 App 逐步迁移到 RN/Expo，包含 XCFramework/AAR 打包、集成到宿主 App 的全流程。

怎么接入

思路

把仓库拉下来，放到一个公共位置，每个项目用软链接指向它。一份文件，全局共享，更新一处所有项目生效。

第一步：下载仓库

bash 复制代码

# 放到用户主目录
git clone --depth 1 https://github.com/callstackincubator/agent-skills.git ~/agent-skills

# 如果 GitHub 连不上（你懂的），用 zip 下载
curl -sL -o /tmp/agent-skills.zip \
  https://github.com/callstackincubator/agent-skills/archive/refs/heads/main.zip \
  && unzip -o -q /tmp/agent-skills.zip -d /tmp \
  && mv /tmp/agent-skills-main ~/agent-skills \
  && rm /tmp/agent-skills.zip

第二步：创建软链接

bash 复制代码

mkdir -p 你的项目/.agents
ln -sfn ~/agent-skills/skills 你的项目/.agents/skills

第三步：在 package.json 加个更新脚本

json 复制代码

{
  "scripts": {
    "update_skills": "cd ~/agent-skills && git pull"
  }
}

后续更新只需 npm run update_skills。

多个项目怎么办

不需要每个项目 copy 一份。所有项目共用 ~/agent-skills，新项目只加一条软链接：

javascript 复制代码

~/agent-skills/                        ← 唯一一份
└── skills/
    ├── github/
    ├── github-actions/
    ├── react-native-best-practices/
    ├── react-native-brownfield-migration/
    └── upgrading-react-native/

项目A/.agents/skills  →  ~/agent-skills/skills
项目B/.agents/skills  →  ~/agent-skills/skills
项目C/.agents/skills  →  ~/agent-skills/skills

原理

Trae IDE / Claude Code / Cursor 这类 AI 编程工具，在 .agents/skills/ 目录下发现 SKILL.md 文件后，会自动将其加载为上下文。Agent 在处理你的提问时会先匹配 Skill 的触发条件，命中后读取对应的 SKILL.md 和 references/ 下的参考文档，把这些领域知识注入到当前对话中。

这就是为什么同样的 Agent，读了这些 Skill 之后写出的代码质量截然不同------它不再靠"猜"，而是有据可查。

实际效果

举个实际例子。假设你对 Agent 说："这个 FlatList 滚动掉帧很严重，帮我优化一下。"

没装 Skill ：Agent 大概率给一些泛泛的建议，加 getItemLayout、用 React.memo、减少 renderItem 复杂度。说了跟没说一样。

装了 react-native-best-practices ：Agent 会参照 js-lists-flatlist-flashlist.md 和 js-measure-fps.md，给出具体的优化链路：

先用 react-native-performance-monitor 测量 FPS 确认瓶颈
检查是否该切换 FlashList（数据量大/Item 高度不一）
给出具体的 FlashList estimatedItemSize 配置
检查 keyExtractor 是否用了 index（性能杀手）
提醒 disableVirtualization 的坑（分页场景不能用）

这就是"有据可查"和"凭感觉瞎猜"的区别。

结合 Trae IDE

Trae IDE 已经内置了 Skill 机制（Builder 模式下能看到 TRAE-code-review、TRAE-debugger 等）。你安装的 agent-skills 会作为补充 Skill 被自动发现和加载，和内置 Skill 协同工作。

总结

不需要额外工具，不需要 API Key，不需要安装插件
纯 Markdown，Agent 原生支持
一份安装全局共享，软链接解决多项目痛点
Callstack 出品，内容质量过硬
30+ 篇 RN 性能优化文档，覆盖 FlatList、内存、Bundle、动画等高频痛点

Repo: github.com/callstackin...