代理技能

专为 AI 编码助手优化的代理技能集合。该仓库提供了可供助手直接读取 skills/ 目录的原始代理技能，以及适用于 Claude Code 和 Codex 插件工作流的市场元数据。

可用技能

技能	描述
react-native-best-practices	来自 Callstack 的 React Native 优化最佳实践
github	GitHub 工作流模式：PR、代码审查、分支管理
github-actions	GitHub Actions 工作流模式：用于构建 React Native 模拟器/模拟设备的工件
upgrading-react-native	React Native 升级流程：模板、依赖项及常见陷阱
react-native-brownfield-migration	使用 @callstack/react-native-brownfield 在原生应用中逐步采用 React Native 或 Expo 的迁移策略，包含设置、打包和分阶段集成步骤

React Native 最佳实践

基于 Callstack 出版的《React Native 优化终极指南》（The Ultimate Guide to React Native Optimization）的性能优化技能。

涵盖内容：

• JavaScript/React：性能分析、FPS、重新渲染、列表、状态管理、动画
• 原生：iOS/Android 性能分析、首次可交互时间 (TTI)、内存管理、Turbo Modules
• 打包：包分析、Tree Shaking、R8、应用大小优化

快速入门

Claude Code

使用 .claude-plugin/marketplace.json 中的 Claude Code 市场元数据。

1. 添加市场：

/plugin marketplace add callstackincubator/agent-skills

2. 安装所需技能：

/plugin install react-native-best-practices@callstack-agent-skills

其他可用安装命令：

/plugin install github@callstack-agent-skills
/plugin install github-actions@callstack-agent-skills
/plugin install upgrading-react-native@callstack-agent-skills
/plugin install react-native-brownfield-migration@callstack-agent-skills

或者使用交互式菜单：

/plugin menu

本地开发：

claude --plugin-dir ./path/to/agent-skills

安装完成后，Claude 会根据任务自动加载相关技能。

OpenAI Codex

本仓库支持两种方式使用 Codex。

选项 1：安装捆绑的 Codex 插件

npx codex-plugin add callstackincubator/agent-skills

此命令会读取 .agents/plugins/marketplace.json，将捆绑插件安装到 .codex/plugins/ 目录下，并在重启 Codex 后生效。

选项 2：单独安装技能

所有主流 AI 编码助手均支持代理技能标准。

通过技能安装程序安装：

$skill-installer install react-native-best-practices from callstackincubator/agent-skills

或手动克隆：

# 项目级
git clone https://github.com/callstackincubator/agent-skills.git
cp -r agent-skills/skills/* .codex/skills/

# 用户级
cp -r agent-skills/skills/* ~/.codex/skills/

重启 Codex 以识别新安装的技能。

使用方法： 输入 $ 调用技能，或使用 /skills 命令。

这些技能包含 agents/openai.yaml 元数据，以兼容 Codex Skills UI。

其他 AI 助手

Cursor

选项 1：从 GitHub 安装（推荐）

1. 打开 Cursor 设置（Cmd+Shift+J / Ctrl+Shift+J）
2. 导航至 Rules → Add Rule → Remote Rule (GitHub)
3. 输入：https://github.com/callstackincubator/agent-skills.git

选项 2：本地安装

# 项目级
git clone https://github.com/callstackincubator/agent-skills.git .cursor/skills/agent-skills

# 用户级（在所有项目中可用）
git clone https://github.com/callstackincubator/agent-skills.git ~/.cursor/skills/agent-skills

使用方法： 在代理聊天中输入 /，即可按名称搜索并选择技能。

Gemini CLI

从仓库安装：

gemini skills install https://github.com/callstackincubator/agent-skills.git

或安装到工作区：

gemini skills install https://github.com/callstackincubator/agent-skills.git --scope workspace

管理命令：

• /skills list：查看所有已发现的技能
• /skills enable <name> / /skills disable <name>：切换技能可用性
• /skills reload：刷新技能清单

OpenCode

克隆到任何支持的技能目录：

# 项目级
git clone https://github.com/callstackincubator/agent-skills.git
cp -r agent-skills/skills/* .opencode/skill/

# 用户级
cp -r agent-skills/skills/* ~/.config/opencode/skill/

OpenCode 还会发现与 Claude 兼容的路径（.claude/skills/、~/.claude/skills/）。

权限控制 在 opencode.json 中定义：

{
  "permission": {
    "skill": {
      "*": "allow"
    }
  }
}

其他助手

对于不支持原生技能的助手，可以直接指向技能文件：

阅读 skills/react-native-best-practices/SKILL.md，获取 React Native 性能指南

或引用特定主题：

查阅 js-profile-react.md，了解 React DevTools 性能分析说明

代码示例

callstack/optimization-best-practices 仓库包含可运行的代码示例，涵盖：

• React Compiler 的设置
• 专用 React Native SDK 与 Web polyfill 的对比
• Android 上的 R8 代码压缩

其他 AI 助手

请参阅 AI 助手集成指南，获取与 Cursor、GitHub Copilot、Claude API、ChatGPT 等 AI 编码助手的详细设置说明。

结构

仓库结构

agent-skills/
├── .claude-plugin/
│   └── marketplace.json     # Claude Code 市场定义
├── .agents/
│   └── plugins/
│       └── marketplace.json # 封装插件的 Codex 市场定义
├── plugins/
│   ├── building-react-native-apps/
│   └── testing-react-native-apps/
└── skills/
    ├── react-native-best-practices/
    │   ├── SKILL.md              # 主技能文件，包含快速参考
    │   └── references/           # 详细技能文件
    │       ├── images/           # 用于性能分析器和图表的视觉参考资料
    │       ├── js-*.md           # JavaScript/React 技能
    │       ├── native-*.md       # 原生 iOS/Android 技能
    │       └── bundle-*.md       # 打包与应用大小相关的技能
    │
    ├── github/
    │   ├── SKILL.md              # 主技能文件，包含 PR 工作流模式
    │   └── references/           # 详细的 GitHub 工作流文件
    │
    ├── github-actions/
    │   ├── SKILL.md              # 主技能文件，介绍 GitHub Actions 构建产物
    │   ├── agents/openai.yaml    # Codex Skills UI 元数据
    │   └── references/           # iOS/Android 操作模板及下载流程
    │
    ├── upgrading-react-native/
    │   ├── SKILL.md              # 主技能文件，包含 RN 升级工作流引导
    │   └── references/           # 详细的升级流程文件
    │
    └── react-native-brownfield-migration/
        ├── SKILL.md              # 主技能文件，用于 Expo/bare 路径引导
        ├── agents/openai.yaml    # Codex Skills UI 元数据
        └── references/           # 老项目打包与集成流程文件

请使用 .claude-plugin/marketplace.json 进行 Claude Code 插件安装，而 .agents/plugins/marketplace.json 则用于 Codex 插件安装。

独立的 skills/ 目录包含仓库本地的技能。plugins/ 目录则包含可安装的 Codex 插件包。

贡献说明

欢迎贡献！技能应具备以下特点：

• 可操作性：提供分步指导，而非理论阐述。
• 可搜索性：标题清晰，关键词明确。
• 完整性：包含代码示例及常见陷阱说明。

在添加或编辑技能时，请遵循 agentskills.io 规范以及 Claude Code 最佳实践。维护者检查清单位于 AGENTS.md，相关支持文档则见 docs/skill-conventions.md。

路线图 / 进度

这仅仅是个开始！以下功能正在规划或开发中。

视觉反馈集成（计划中）

部分技能涉及解析视觉性能分析工具的输出（火焰图、树状图、内存快照）。目前 AI 代理尚无法自主处理这些内容。

受影响的技能：

• js-profile-react.md - React DevTools 火焰图
• js-measure-fps.md - FPS 图表与性能叠加层
• native-profiling.md - Xcode Instruments / Android Studio Profiler
• native-measure-tti.md - TTI 时间线可视化
• native-view-flattening.md - 视图层级检查
• bundle-analyze-js.md - 包体积树状图可视化
• bundle-analyze-app.md - 应用大小拆解（Emerge Tools、Ruler）

计划解决方案： 集成 MCP（模型上下文协议）以实现截图捕获与视觉分析。欢迎贡献！

补充技能建议

为实现全面覆盖，建议搭配以下资源：

• Vercel React 最佳实践 - React/Next.js Web 优化（40+ 条规则）

未来工作

• 集成 MCP 以支持视觉性能分析反馈
• 添加更多调试、测试及 CI/CD 相关技能
• 提供更多代码示例与交互式教程

---

由 Callstack 用心打造

基于《React Native 性能优化终极指南》的 React Native 性能技能。

Callstack 是一群 React 和 React Native 专家团队。如需性能优化帮助或只是想打个招呼，请发送邮件至 hello@callstack.com！

喜欢我们的工作吗？⚛️ 加入 Callstack 团队，一起参与精彩的 React Native 项目吧！

agent-skills 快速上手指南

agent-skills 是一套专为 AI 编程助手优化的技能集合，主要包含 React Native 性能优化最佳实践、GitHub 工作流模式等。本指南将帮助你在主流 AI 助手（Claude Code, Codex, Cursor 等）中快速集成并使用这些技能。

环境准备

• 系统要求：支持 macOS, Linux, Windows。
• 前置依赖：
  • 已安装并配置好以下任一 AI 编程助手：
    • Claude Code
    • OpenAI Codex CLI
    • Cursor
    • Gemini CLI
    • OpenCode
  • Git：用于克隆仓库或安装远程规则。
  • Node.js / npm：部分安装命令依赖 `npx。

安装步骤

根据你使用的 AI 助手，选择对应的安装方式：

1. Claude Code

通过插件市场安装：

# 1. 添加市场源
/plugin marketplace add callstackincubator/agent-skills

# 2. 安装所需技能（以 react-native-best-practices 为例）
/plugin install react-native-best-practices@callstack-agent-skills

其他可用技能：

/plugin install github@callstack-agent-skills
/plugin install github-actions@callstack-agent-skills
/plugin install upgrading-react-native@callstack-agent-skills
/plugin install react-native-brownfield-migration@callstack-agent-skills

本地开发模式：

claude --plugin-dir ./path/to/agent-skills

2. OpenAI Codex

方式一：安装 bundled 插件（推荐）

npx codex-plugin add callstackincubator/agent-skills

注意：安装后需重启 Codex。

方式二：手动安装独立技能

# 项目级安装
git clone https://github.com/callstackincubator/agent-skills.git
cp -r agent-skills/skills/* .codex/skills/

# 用户级安装（全局可用）
cp -r agent-skills/skills/* ~/.codex/skills/

注意：安装后需重启 Codex。使用 $ 提及技能或使用 /skills 命令调用。

3. Cursor

方式一：通过 GitHub 远程规则安装（推荐）

1. 打开 Cursor 设置 (Cmd+Shift+J / Ctrl+Shift+J)
2. 导航至 Rules → Add Rule → Remote Rule (GitHub)
3. 输入仓库地址：https://github.com/callstackincubator/agent-skills.git

方式二：本地克隆安装

# 项目级
git clone https://github.com/callstackincubator/agent-skills.git .cursor/skills/agent-skills

# 用户级
git clone https://github.com/callstackincubator/agent-skills.git ~/.cursor/skills/agent-skills

使用方法：在 Agent 聊天中输入 / 搜索并选择技能。

4. Gemini CLI

# 从仓库安装
gemini skills install https://github.com/callstackincubator/agent-skills.git

# 或仅安装到当前工作区
gemini skills install https://github.com/callstackincubator/agent-skills.git --scope workspace

5. OpenCode

# 项目级
git clone https://github.com/callstackincubator/agent-skills.git
cp -r agent-skills/skills/* .opencode/skill/

# 用户级
cp -r agent-skills/skills/* ~/.config/opencode/skill/

需在 opencode.json 中配置权限：

{
  "permission": {
    "skill": {
      "*": "allow"
    }
  }
}

6. 其他不支持原生技能的助手

直接引用技能文件路径即可，例如：

Read skills/react-native-best-practices/SKILL.md for React Native performance guidelines

基本使用

安装完成后，AI 助手会根据上下文自动加载相关技能，或通过命令手动触发。

示例场景：React Native 性能优化

1. 自动触发： 当你询问关于 React Native列表渲染卡顿或内存泄漏问题时，Claude Code 或 Codex 会自动参考 react-native-best-practices 中的 js-*.md 或 native-*.md 文件提供建议。

2. 手动调用 (Codex/Cursor)： 在聊天框输入：

   $react-native-best-practices 如何优化 FlatList 的性能？
   

   或者在 Cursor 中输入 / 选择 react-native-best-practices。

3. 查阅特定主题： 你可以直接要求 AI 查阅具体文档，例如：

   请根据 js-profile-react.md 中的指南，教我如何使用 React DevTools 进行性能分析。
   

核心技能说明：

• react-native-best-practices: 涵盖 JS/React 性能分析、原生模块优化、Bundle 大小优化等。
• github: 提供 PR 创建、代码审查和分支管理的标准工作流。
• upgrading-react-native: 指导 React Native 版本升级的步骤和常见陷阱。