什么是 Vercel React Native 技能？

此技能提供了一个专家级的框架，用于使用 React Native 和 Expo 开发移动应用程序。它专注于通过执行严格的性能、动画和原生平台集成规则来提供流畅的用户体验。通过利用这些 Openclaw 技能，开发人员可以确保其移动项目符合 Vercel 对代码质量和效率的高标准。

该技能涵盖了从关键列表虚拟化到高级 Monorepo 配置的所有内容。它旨在引导开发人员了解移动开发的细微差别，例如管理桥接、优化图像渲染以及利用 GPU 加速动画来防止掉帧。

下载入口:https://github.com/openclaw/skills/tree/main/skills/xaiohuangningde/vercel-react-native-skills

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

Vercel React Native 技能 应用场景

• 使用 Expo 生态系统构建高性能移动应用程序。
• 使用 FlashList 解决大数据集中的滚动延迟和内存问题。
• 使用在 UI 线程上运行的 Reanimated 实现流畅的 60fps 动画。
• 从标准的基于 JavaScript 的导航迁移到原生堆栈导航器。
• 在 Monorepo 架构中管理复杂的原生依赖项。

1. 分析 React Native 或 Expo 项目，以确定需要性能或架构优化的领域。
2. 参考优先规则类别，从关键列表性能开始，逐步过渡到动画和 UI 模式。
3. 实施具体的规则建议，例如用 Pressable 替换标准的 Touchable 组件，或利用 expo-image 实现更好的缓存。
4. 应用特定于平台的 UI 模式（如原生上下文菜单和模态框），以增强应用程序的原生感。
5. 根据 Openclaw 技能文档中提供的正确和错误代码示例验证实施情况。

Vercel React Native 技能 配置指南

要将这些最佳实践集成到您的开发工作流程中，请确保您的项目结构中包含该规则集。您可以参考各个 markdown 文件了解具体的实现细节。

# 访问列表性能指南
cat rules/list-performance-virtualize.md

# 查看完整的编译后最佳实践
cat AGENTS.md

确保您的项目已配置 Expo 或 React Native，并已安装 Reanimated 和 FlashList 等依赖项，以利用高优先级的性能规则。

Vercel React Native 技能 数据架构与分类体系

该技能利用结构化的优先级系统，根据规则对应用程序质量和性能的影响对规则进行分类。

每条规则都记录了性能影响说明、常见错误示例以及推荐的解决方案。

name: vercel-react-native-skills
description:
  React Native and Expo best practices for building performant mobile apps. Use
  when building React Native components, optimizing list performance,
  implementing animations, or working with native modules. Triggers on tasks
  involving React Native, Expo, mobile performance, or native platform APIs.
license: MIT
metadata:
  author: vercel
  version: '1.0.0'

React Native Skills

Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.

When to Apply

Reference these guidelines when:

• Building React Native or Expo apps
• Optimizing list and scroll performance
• Implementing animations with Reanimated
• Working with images and media
• Configuring native modules or fonts
• Structuring monorepo projects with native dependencies

Rule Categories by Priority

Quick Reference

1. List Performance (CRITICAL)

• list-performance-virtualize - Use FlashList for large lists
• list-performance-item-memo - Memoize list item components
• list-performance-callbacks - Stabilize callback references
• list-performance-inline-objects - Avoid inline style objects
• list-performance-function-references - Extract functions outside render
• list-performance-images - Optimize images in lists
• list-performance-item-expensive - Move expensive work outside items
• list-performance-item-types - Use item types for heterogeneous lists

2. Animation (HIGH)

• animation-gpu-properties - Animate only transform and opacity
• animation-derived-value - Use useDerivedValue for computed animations
• animation-gesture-detector-press - Use Gesture.Tap instead of Pressable

3. Navigation (HIGH)

• navigation-native-navigators - Use native stack and native tabs over JS navigators

4. UI Patterns (HIGH)

• ui-expo-image - Use expo-image for all images
• ui-image-gallery - Use Galeria for image lightboxes
• ui-pressable - Use Pressable over TouchableOpacity
• ui-safe-area-scroll - Handle safe areas in ScrollViews
• ui-scrollview-content-inset - Use contentInset for headers
• ui-menus - Use native context menus
• ui-native-modals - Use native modals when possible
• ui-measure-views - Use onLayout, not measure()
• ui-styling - Use StyleSheet.create or Nativewind

5. State Management (MEDIUM)

• react-state-minimize - Minimize state subscriptions
• react-state-dispatcher - Use dispatcher pattern for callbacks
• react-state-fallback - Show fallback on first render
• react-compiler-destructure-functions - Destructure for React Compiler
• react-compiler-reanimated-shared-values - Handle shared values with compiler

6. Rendering (MEDIUM)

• rendering-text-in-text-component - Wrap text in Text components
• rendering-no-falsy-and - Avoid falsy && for conditional rendering

7. Monorepo (MEDIUM)

• monorepo-native-deps-in-app - Keep native dependencies in app package
• monorepo-single-dependency-versions - Use single versions across packages

8. Configuration (LOW)

• fonts-config-plugin - Use config plugins for custom fonts
• imports-design-system-folder - Organize design system imports
• js-hoist-intl - Hoist Intl object creation

How to Use

Read individual rule files for detailed explanations and code examples:

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

Each rule file contains:

• Brief explanation of why it matters
• Incorrect code example with explanation
• Correct code example with explanation
• Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md