mcpField
V
vercel-react-native-skills

vercel-react-native-skills

github.com/vercel-labs开发1.7k240 次安装35 周前更新
代码仓库

关于 vercel-react-native-skills

面向 React Native 和 Expo 开发者的实践指南，按优先级整理性能、动画、导航、界面与配置规则，并提供代码示例。

主要功能

  1. 01列表与滚动性能建议
  2. 02动画与导航规则
  3. 03界面和状态管理模式
  4. 04渲染与 monorepo 指南
  5. 05配置及字体建议
  6. 06规则说明与代码示例

适用场景

  1. 01优化大型列表和滚动体验
  2. 02实现 Reanimated 动画
  3. 03规划原生导航与界面模式
  4. 04配置 monorepo 原生依赖

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vercel-labs/openreview --skill vercel-react-native-skills

安装后在 Claude Code 中输入/vercel-react-native-skills确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
README.md
rules/
animation-derived-value.md
animation-gesture-detector-press.md
animation-gpu-properties.md
design-system-compound-components.md
fonts-config-plugin.md
imports-design-system-folder.md
js-hoist-intl.md
list-performance-callbacks.md
list-performance-function-references.md
list-performance-images.md
list-performance-inline-objects.md
list-performance-item-expensive.md
list-performance-item-memo.md
list-performance-item-types.md
list-performance-virtualize.md
monorepo-native-deps-in-app.md
monorepo-single-dependency-versions.md
navigation-native-navigators.md
react-compiler-destructure-functions.md
react-compiler-reanimated-shared-values.md
react-state-dispatcher.md
react-state-fallback.md
react-state-minimize.md
rendering-no-falsy-and.md
rendering-text-in-text-component.md
scroll-position-no-state.md
state-ground-truth.md
ui-expo-image.md

详细介绍

React Native 技能

React Native 和 Expo 应用的全面最佳实践。包含多个类别的规则，涵盖性能、动画、UI 模式和平台特定优化。

适用场景

在以下情况下参考这些指南：

  • 构建 React Native 或 Expo 应用
  • 优化列表和滚动性能
  • 使用 Reanimated 实现动画
  • 处理图像和媒体
  • 配置原生模块或字体
  • 为包含原生依赖项的项目构建 monorepo 结构

按优先级划分的规则类别

优先级类别影响前缀
1列表性能严重list-performance-
2动画高animation-
3导航高navigation-
4UI 模式高ui-
5状态管理中react-state-
6渲染中rendering-
7Monorepo中monorepo-
8配置低fonts-, imports-

快速参考

1. 列表性能（严重）
  • list-performance-virtualize - 大型列表使用 FlashList
  • list-performance-item-memo - 对列表项组件进行记忆化
  • list-performance-callbacks - 稳定回调引用
  • list-performance-inline-objects - 避免内联样式对象
  • list-performance-function-references - 将函数移到渲染函数之外
  • list-performance-images - 优化列表中的图像
  • list-performance-item-expensive - 将耗时操作移到列表项之外
  • list-performance-item-types - 异构列表使用项类型
2. 动画（高）
  • animation-gpu-properties - 仅对 transform 和 opacity 做动画
  • animation-derived-value - 对计算出的动画使用 useDerivedValue
  • animation-gesture-detector-press - 使用 Gesture.Tap 替代 Pressable
3. 导航（高）
  • navigation-native-navigators - 使用原生堆栈和原生标签页，替代 JS 导航器
4. UI 模式（高）
  • ui-expo-image - 所有图像都使用 expo-image
  • ui-image-gallery - 使用 Galeria 实现图像灯箱
  • ui-pressable - 使用 Pressable 替代 TouchableOpacity
  • ui-safe-area-scroll - 在 ScrollView 中处理安全区域
  • ui-scrollview-content-inset - 使用 contentInset 处理页眉
  • ui-menus - 使用原生上下文菜单
  • ui-native-modals - 尽可能使用原生模态框
  • ui-measure-views - 使用 onLayout，而非 measure()
  • ui-styling - 使用 StyleSheet.create 或 Nativewind
5. 状态管理（中）
  • react-state-minimize - 尽量减少状态订阅
  • react-state-dispatcher - 回调使用分发器模式
  • react-state-fallback - 首次渲染时显示后备内容
  • react-compiler-destructure-functions - 解构以配合 React Compiler
  • react-compiler-reanimated-shared-values - 使用编译器时处理共享值
6. 渲染（中）
  • rendering-text-in-text-component - 将文本包装在 Text 组件中
  • rendering-no-falsy-and - 避免使用假值 && 进行条件渲染
7. Monorepo（中）
  • monorepo-native-deps-in-app - 将原生依赖项保留在应用包中
  • monorepo-single-dependency-versions - 在各个包中使用统一的版本
8. 配置（低）
  • fonts-config-plugin - 自定义字体使用配置插件
  • imports-design-system-folder - 整理设计系统导入
  • js-hoist-intl - 将 Intl 对象的创建提升到外部

使用方法

阅读各条规则文件，了解详细说明和代码示例：

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

每个规则文件都包含：

  • 简要说明规则的重要性
  • 错误代码示例及说明
  • 正确代码示例及说明
  • 补充背景信息和参考资料

完整编译文档

如需查看包含所有展开规则的完整指南：AGENTS.md

评论

支持 Markdown