1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | react-native-skills-vercel-labs-agent-skills |
| 项目自述名称 | vercel-react-native-skills（SKILL.md front matter 内 name 字段原值） |
| 作者/维护者 | Vercel（vercel-labs 官方工程团队维护） |
| 来源链接 | https://github.com/vercel-labs/agent-skills/tree/main/skills/react-native-skills |
| 许可证 | MIT（SKILL.md front matter 与仓库 README《License》章节双重声明；来自 GitHub API） |
| GitHub Stars/Forks | 所属合集仓库 30,001 / 2,679（GitHub API 实测；仓库为多技能合集，此星数不直接等同本技能自身热度，主证据见下方安装量） |
| 最新版本 | SKILL.md front matter 声明 1.0.0；该子目录最近一次提交 2026-01-27（GitHub API 实测），仓库整体最近提交 2026-08-12 |
| 安装方式 | npx skills add vercel-labs/agent-skills（整包）或 npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills（单技能） |
2. 功能介绍与亮点
react-native-skills 是 Vercel 工程团队把 React Native / Expo 移动应用性能优化经验封装成的 Agent 技能，覆盖 8 个优先级类别、38 条具体规则，从“CRITICAL”到“LOW”分级排序。
核心能力：
- 列表性能（最高优先级）：用 FlashList 替代原生 FlatList、稳定回调引用、避免行内对象、图片优化
- 动画：只对 transform/opacity 做 GPU 加速动画、useDerivedValue 替代 useAnimatedReaction、手势检测最佳实践
- 导航：优先原生 stack/tabs 而非 JS 层导航器
- UI 模式：expo-image、原生 Modal/菜单、安全区域处理、onLayout 替代 measure()
- 状态管理：最小化状态订阅、React Compiler 兼容写法
- 配置/Monorepo：原生依赖归属、字体配置插件、单一依赖版本策略
每条规则均可展开为独立 Markdown 文件查看详细原理与代码示例，全部规则同时编译进单一 AGENTS.md（约 7 万字），方便 Agent 一次性检索。
亮点：Vercel 官方工程团队出品（非社区二次整理）；第三方技能安装排行站 skills.sh 显示该技能自身安装量达 18.63 万次；所属技能合集仓库 star 数 3 万，是当前最大的官方 Agent Skills 合集之一。
3. 适用场景
固定分类：前端与设计。
适合用 Claude Code / Codex 等工具开发 React Native 或 Expo 跨平台移动应用的初中级开发者；适合在优化长列表滚动卡顿、实现手势动画、处理安全区域适配等移动端高频性能问题时，希望 Agent 直接遵循业界验证过的模式，而非凭感觉生成代码的场景；尤其适合还不熟悉 FlashList、Reanimated、React Compiler 等 React Native 现代工具链的开发者。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——SKILL.md 为标准 Agent Skills 格式（agentskills.io 规范），
npx skills add为标准安装路径（已抓取核实） - Codex：✅ 支持——官方与第三方资料均确认该 CLI 可安装到 Codex（已抓取核实）
- OpenClaw：❓ 未验证——抓取材料未提及
- Hermes Agent：❓ 未验证——抓取材料未提及
（说明：以上判断基于该技能的公开材料，OpenClaw 与 Hermes Agent 两个生态未单独验证；SKILL.md 本身遵循开放格式，理论上可手动复制进任意兼容 agent 的技能目录。）
5. 推荐理由
React Native 应用最容易被 AI 生成代码坑的地方，恰恰是那些“能跑但会卡”的细节——用 FlatList 而非 FlashList 渲染长列表、在动画里驱动布局属性而非 transform、把回调函数写在 renderItem 内部导致每帧重建。这些问题不会在开发阶段报错，只会在真机上表现为掉帧和卡顿，初中级开发者往往缺乏经验主动规避。这个技能把 Vercel 工程团队验证过的移动端性能模式直接编码成 Agent 写代码、审代码时会遵循的规则，相当于把资深 React Native 工程师的代码审查经验装进了 Agent。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 9.0 | 官方一线机构（Vercel）出品；技能自身在 skills.sh 的独立安装量达 18.63 万次，属多平台独立采用证据；所属合集仓库 star 3 万 |
| 可用性 | 8.0 | 一条命令安装、文档详尽含 38 条规则的独立文件与统一编译版、无付费依赖；该子目录内容本身最近一次更新为 2026-01-27（距今约 6.5 个月） |
| 安全性 | 10.0 | 见下方安全检查清单 |
| 综合 | 9.0 | 三项均值，远超 7.0 达标线，安全性远超一票否决线 |
安全检查清单：
- Shell/权限范围：纯 Markdown 指导性内容，未见任何 shell 命令执行
- 联网外发：无网络调用，静态参考内容
- API Key/凭据：不涉及
- 可疑指令/注入迹象：完整抓取 SKILL.md 及规则目录核实，未发现要求执行流程外操作的可疑指令
- 作者/组织信誉：Vercel 工程团队，一线机构，信誉高
- License：MIT，SKILL.md front matter 与仓库 README 双重确认，清晰明确
- 维护时间：仓库整体活跃（最近提交 2026-08-12），该子目录本身约 6.5 个月未更新，已在可用性分中体现，不重复扣分
7. 跟同类 Skills 相比的优势
| Skill | 定位 | 核心差异 |
|---|---|---|
| react-native-skills（本次推荐） | React Native/Expo 移动端性能优化规则库 | 聚焦“写出高性能移动端代码”的规则集，覆盖列表、动画、导航、状态管理 |
| react-best-practices（同仓库姊妹技能） | React/Next.js Web 端性能优化规则库 | 同一方法论应用于 Web 而非移动端，两者平台互补、不重叠 |
| expo-router（Expo 官方） | 文件路由与页面导航配置指南 | 解决“页面怎么组织与跳转”，不涉及渲染性能或动画调优 |
| SwiftUI-Agent-Skill | iOS/macOS 原生 SwiftUI 代码审查 | 面向 Apple 原生技术栈而非跨平台 React Native，过时 API 与无障碍是其重点 |
| material-3-skill | 跨端 Material Design 3 组件与主题规范 | 关注视觉规范与设计系统合规，不覆盖运行时性能 |
8. 用户评价
该技能目前在第三方平台尚无具名评价者的详细评测；可验证的公开采用证据是第三方技能安装排行站 skills.sh 记录的 18.63 万次独立安装量，以及所属 vercel-labs/agent-skills 合集仓库 3 万 star——均为该合集官方发布以来持续积累的公开数据，而非本次抓取臆测。
9. 其他补充
该仓库同时收录 react-best-practices、web-design-guidelines、writing-guidelines、composition-patterns、react-view-transitions、vercel-optimize、deploy-to-vercel、vercel-cli-with-tokens 等姊妹技能，共享同一安装工具链（npx skills），可按需组合安装，各自解决 Web 性能、UI/可访问性审查、文档写作规范、组件架构、页面转场动画、Vercel 平台成本诊断等不同问题。
10. 安装使用方式
- 单技能安装：
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills - 整包安装（含全部 8 个姊妹技能）：
npx skills add vercel-labs/agent-skills - 安装后无需重启，触发方式：涉及 React Native/Expo 组件编写、列表渲染、动画实现、导航配置、原生模块集成等任务时自动触发（官方示例场景：“Optimize this FlatList”、“Add a native navigator”）
- 也可直接查阅仓库内
skills/react-native-skills/AGENTS.md获取全部规则的完整展开版本
11. 注意事项
- 该子目录内容本身约 6.5 个月未更新，虽仓库整体维护活跃（最近提交发生在昨日），但规则库如跟不上 React Native/Expo SDK 版本迭代节奏，存在小概率滞后风险，建议对照最新 Expo SDK 文档交叉核实
- 官方材料未明确列出对 OpenClaw、Hermes Agent 的支持声明，如需在这两个生态使用建议先行验证
- 规则内容基于原生模块与 Expo 生态优化，如项目未使用 Expo 而是纯原生 React Native CLI 搭建，部分配置类规则（如字体插件、monorepo 依赖策略）适用性可能打折扣