mcpField
V
vercel-react-native-skills

vercel-react-native-skills

github.com/julianromli开发21348 次安装3 天前更新
代码仓库

关于 vercel-react-native-skills

vercel-react-native-skills 是面向 React Native 和 Expo 应用开发者的实践指南技能，按优先级整理性能、动画、导航和界面等规则。规则文件附有说明、正反示例及参考资料。

主要功能

  1. 01按优先级组织实践规则
  2. 02涵盖列表与滚动性能
  3. 03提供动画和导航建议
  4. 04包含界面、状态与渲染规则
  5. 05提供规则示例和完整指南

适用场景

  1. 01构建 React Native 或 Expo 应用
  2. 02优化列表和滚动性能
  3. 03使用 Reanimated 实现动画
  4. 04整理含原生依赖的 monorepo

安装

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

$npx skills add https://github.com/julianromli/ai-skills --skill vercel-react-native-skills

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

包含的文件

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

AGENTS.md
metadata.json
README.md
rules/
_sections.md
_template.md
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

详细介绍

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