移动端列表的问题常常同时来自渲染数量、图片解码和行组件重复更新。这个 Skill 将这些问题拆开处理，也包含动画、导航和原生组件的选择建议。适合已有 React Native 项目出现具体交互问题时使用，而不是一次性替换整个技术栈。
安装与首次使用
在项目根目录、已具备 Node.js 与 npm 的终端运行以下命令，给 Claude Code 安装这一项技能。使用 Codex 时，把 --agent claude-code 换成 --agent codex。这是项目级安装；安装完成后刷新或重开 Agent 会话，并在任务里明确写出技能名。
npx skills@latest add vercel-labs/agent-skills --skill vercel-react-native-skills --agent claude-code
从可重复的滚动场景开始
以下是可按项目调整的首次输入：
使用 vercel-react-native-skills 检查商品列表屏幕。列表约有五百项、每项一张图片，滚动时卡顿。先确认 React Native、Expo 和列表库版本，检查虚拟化、行组件 props 与图片加载；给出最小修改，保留筛选和点击详情，并列出真机复查步骤。
提供目标机型、系统版本、数据规模和发生问题的屏幕。先区分首屏打开慢、滚动掉帧与点击无响应；三者可能需要不同检查。最好保留同一组数据和相同滚动方式，之后才容易判断一次修改是否解决原问题。
先控制渲染量，再看每一行
上游规则优先推荐虚拟化列表，示例包含 LegendList 与 FlashList。它们与把数组直接 map 到 ScrollView 的差别，在于可以控制同时挂载的行数。让 Agent 先识别项目已有列表方案和版本限制，再决定调整现有实现还是更换库，不要把安装新依赖当成唯一答案。
随后检查行组件是否获得不断变化的函数、对象或图片尺寸。昂贵的数据转换尽量不要在每一行每次渲染时重复执行。启用 React Compiler 的项目与未启用的项目，在手动稳定引用的需求上并不相同；应先读当前配置，避免无差别地加 memo 和 useCallback。
别让动画优化损伤操作
动画建议优先考虑 transform 与 opacity，但拖动、点击和导航仍要完整工作。商品列表调整后，需要确认筛选结果、稳定 ID、混合行类型、图片占位和滚动位置；只有截图看起来相同，还无法证明复用后的行没有显示旧数据。
第一次的理想产物是一个可审查的小改动、受影响的依赖说明，以及同一设备上要重跑的步骤。开发菜单和调试器会改变性能表现，发布构建下的真机观察更有参考价值。技能能提供检查方向，但无法根据源代码独自判断低端设备上是否流畅，也不会自动替你验证所有平台的导航行为。
给 Agent 一组可重复的设备条件
移动端性能随设备差异很大。说明机型或模拟器、系统版本、是否为开发构建、列表大约多少行、图片大小及复现动作。比如“先打开商品列表，再连续滚动到第 300 项，返回后再次进入”；这与仅说“列表卡”相比，更容易定位是首屏挂载、滚动渲染还是返回时状态恢复。
检查列表时，先确认当前库和版本是否真正启用了虚拟化，再看稳定 ID、不同项目类型、行组件的图片尺寸和昂贵计算。React Compiler、FlashList 或其他列表库的建议都应匹配项目配置，不能无条件装新库。优化图片时留意占位尺寸，否则滚动虽快，布局却可能跳动。
验收必须回到交互
在同一设备和数据集上复查筛选、点击详情、返回位置、快速滚动、离线或加载失败状态；性能变好但行显示旧商品或点错详情并不算成功。记录修改前后的主观症状和可用指标，尽量在接近发布的构建模式观察。源码层面的建议是候选方案，最终效果要在设备上验证。
另一个场景：头像列表滚动后显示错人
性能问题不只表现为掉帧。联系人列表在快速滚动、筛选后若出现头像与姓名短暂错位，可以让 Agent 同时检查稳定 key、异步图片加载和行组件复用：“先复现筛选前后同一行的 ID 与图片 URL，再判断是否由缓存、索引作 key 或状态复用引起；不要只用 memo 掩盖错误。” 验收时用含重复姓名、缺失头像与不同尺寸图片的数据集快速滚动，并点开详情确认身份一致。列表库改动应保留屏幕阅读器标签与点击区域，不能为了流畅让内容错配。
名称不一致导致安装后无法调用
如果安装命令提示找不到 react-native-skills，先确认你输入的是目录名还是 Skill 的实际名称。有用户发现该项目的目录名 react-native-skills 与文件内声明的 vercel-react-native-skills 不一致；在其运行环境里，Skill 虽已安装却无法解析。先列出安装器识别的名称，用实际显示的名称安装；安装后再让 Agent 读取 Skill 文件，确认当前运行环境确实能调用。