React Native 与 Expo 性能规范技能包 — vercel-labs-vercel-react-native-skills Skill 技能

技能简介

vercel-labs-vercel-react-native-skills（React Native / Expo 性能与规范技能包） 针对移动端开发里最常见的几类翻车现场：列表滑动卡顿、动画掉帧、渲染时崩溃、平台差异踩坑。它由 Vercel 实验室出品，把 React Native 与 Expo 的性能规则和工程规范压缩成一份可直接注入 Claude、Codex、Claude Code 的规则集，让 AI 在写代码前就知道"该用什么、不该用什么"。技能覆盖渲染安全、虚拟化列表、动画与手势、原生导航、安全区、图片、菜单弹窗、状态管理与 monorepo 依赖摆放等多个维度，并给出可直接使用的审查提示词模板。Skillstore 质量评分 80 分（silver 档），riskLevel 为 safe，MIT 许可，浏览 220 次、下载 22 次，审计状态 complete（118 条静态告警经人工判定全部为文档性误报）。

核心能力

• 渲染安全规则：解释 React Native 的渲染约束，规避 Text 组件与假值（falsy）渲染导致的崩溃。
• 虚拟化列表选型：针对 FlatList、LegendList、FlashList 给出不同场景的列表实现建议。
• 动画性能指引：把动画引导到 transform、opacity 与 Reanimated、Gesture Handler 模式，避开布局抖动。
• 原生能力规范：涵盖原生导航、安全区、图片加载、菜单与模态框、样式组织的正确姿势。
• 状态架构建议：给出能减少过期数据与不必要重渲染的状态管理模式。
• 依赖摆放指导：说明 monorepo 中依赖应放在哪一层，以及共享包的版本管理策略。

安装配置

1. 执行 npx skillstore add vercel-labs/vercel-react-native-skills 完成安装。
2. 适用工具为 Claude、Codex、Claude Code；风险因素包含外部命令、网络与文件系统，均在文档引用与常规开发授权范围内。
3. 技能本身是纯规则与指引，不会自动执行项目分析，需要配合提示词模板使用。
4. 部分建议依赖项目已安装的库（如 Reanimated、FlashList），落地前先确认依赖是否存在。

使用步骤

1. 组件体检：把待审组件交给 Agent，让它按规则检查渲染安全、状态、图片与明显性能问题。
2. 列表页优化：针对具体列表屏发起虚拟化审查，覆盖条目重量、对象引用、回调、图片尺寸与条目类型处理。
3. 动画重构：按 Reanimated 指引改造动画与按压交互，优先使用 transform、opacity、派生值与 GestureDetector。
4. 架构选型：在动手前用技能确定导航、图片、字体与依赖的方案，避免后期返工。
5. 迁移规划：让 Agent 按渲染、列表、导航、状态架构、原生依赖的优先级产出一份性能改造计划。

适用场景

• 性能代码评审：提交前让 AI 对照规则排查慢列表、重型条目与不安全渲染。
• Expo 项目起步：新项目在写第一屏之前确定导航、图片、字体与依赖策略。
• 组件库重构：设计系统维护者按规则统一 Pressable、安全区、模态框、菜单与复合组件写法。
• 大范围改造：需要按优先级推进的性能与架构迁移，要求每条建议给出规则出处。
• 新人上手：帮助团队快速对齐 React Native 的常见反模式与最佳实践。

适用人群

React Native 与 Expo 应用开发者、移动端技术负责人与架构师、维护移动组件库的设计系统工程师，以及希望让 AI 生成的移动代码从一开始就符合性能规范的团队。

工作原理

技能以规则集形式工作：每条规则描述一个具体问题（例如列表未虚拟化、动画走 layout 属性、Text 渲染假值）、给出推荐做法与适用边界，AI 在生成或审查代码时按规则逐条比对。它的能力边界也标注清楚——规则是指引而非自动分析，不能替代 iOS/Android 真机上的性能剖析，部分结论依赖项目架构与已装库，并且需要随 React Native、Expo 与 React Compiler 的演进更新。反模式部分特别提醒：不要把规则当真机测试的替代品，也不要脱离项目架构机械套用全部建议。

官方链接

• 技能页面：https://skillstore.io/skills/vercel-labs-vercel-react-native-skills
• 源码仓库：https://github.com/vercel-labs/agent-skills/tree/main/skills/react-native-skills/
• 安装命令：npx skillstore add vercel-labs/vercel-react-native-skills