vercel-react-native-skills by vercel-labs/agent-skills
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills适用于 React Native 和 Expo 应用程序的全面最佳实践。包含涵盖性能、动画、UI 模式和平台特定优化的多个类别的规则。
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 列表性能 | 关键 | list-performance- |
| 2 | 动画 | 高 | animation- |
| 3 | 导航 | 高 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
navigation- |
| 4 | UI 模式 | 高 | ui- |
| 5 | 状态管理 | 中 | react-state- |
| 6 | 渲染 | 中 | rendering- |
| 7 | Monorepo | 中 | monorepo- |
| 8 | 配置 | 低 | fonts-, imports- |
list-performance-virtualize - 对大型列表使用 FlashListlist-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 - 对异构列表使用项目类型animation-gpu-properties - 仅对变换和透明度进行动画处理animation-derived-value - 使用 useDerivedValue 处理计算动画animation-gesture-detector-press - 使用 Gesture.Tap 代替 Pressablenavigation-native-navigators - 使用原生栈和原生标签页而非 JS 导航器ui-expo-image - 对所有图像使用 expo-imageui-image-gallery - 使用 Galeria 实现图像灯箱ui-pressable - 使用 Pressable 代替 TouchableOpacityui-safe-area-scroll - 在 ScrollViews 中处理安全区域ui-scrollview-content-inset - 使用 contentInset 处理头部ui-menus - 使用原生上下文菜单ui-native-modals - 尽可能使用原生模态框ui-measure-views - 使用 onLayout,而非 measure()ui-styling - 使用 StyleSheet.create 或 Nativewindreact-state-minimize - 最小化状态订阅react-state-dispatcher - 对回调使用分发器模式react-state-fallback - 在首次渲染时显示回退内容react-compiler-destructure-functions - 为 React Compiler 进行解构react-compiler-reanimated-shared-values - 使用编译器处理共享值rendering-text-in-text-component - 将文本包裹在 Text 组件中rendering-no-falsy-and - 避免使用 falsy && 进行条件渲染monorepo-native-deps-in-app - 将原生依赖项保留在应用包中monorepo-single-dependency-versions - 跨包使用单一版本fonts-config-plugin - 对自定义字体使用配置插件imports-design-system-folder - 组织设计系统导入js-hoist-intl - 提升 Intl 对象创建阅读各个规则文件以获取详细解释和代码示例:
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
每个规则文件包含:
包含所有规则详细说明的完整指南:AGENTS.md
每周安装量
52.3K
代码仓库
GitHub 星标
22.4K
首次出现
2026 年 1 月 26 日
安全审计
安装于
opencode38.3K
codex37.5K
gemini-cli36.8K
github-copilot34.3K
claude-code33.3K
cursor31.1K
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | List Performance | CRITICAL | list-performance- |
| 2 | Animation | HIGH | animation- |
| 3 | Navigation | HIGH | navigation- |
| 4 | UI Patterns | HIGH | ui- |
| 5 | State Management | MEDIUM | react-state- |
| 6 | Rendering | MEDIUM | rendering- |
| 7 | Monorepo | MEDIUM | monorepo- |
| 8 | Configuration | LOW | fonts-, imports- |
list-performance-virtualize - Use FlashList for large listslist-performance-item-memo - Memoize list item componentslist-performance-callbacks - Stabilize callback referenceslist-performance-inline-objects - Avoid inline style objectslist-performance-function-references - Extract functions outside renderlist-performance-images - Optimize images in listslist-performance-item-expensive - Move expensive work outside itemslist-performance-item-types - Use item types for heterogeneous listsanimation-gpu-properties - Animate only transform and opacityanimation-derived-value - Use useDerivedValue for computed animationsanimation-gesture-detector-press - Use Gesture.Tap instead of Pressablenavigation-native-navigators - Use native stack and native tabs over JS navigatorsui-expo-image - Use expo-image for all imagesui-image-gallery - Use Galeria for image lightboxesui-pressable - Use Pressable over TouchableOpacityui-safe-area-scroll - Handle safe areas in ScrollViewsui-scrollview-content-inset - Use contentInset for headersui-menus - Use native context menusui-native-modals - Use native modals when possibleui-measure-views - Use onLayout, not measure()ui-styling - Use StyleSheet.create or Nativewindreact-state-minimize - Minimize state subscriptionsreact-state-dispatcher - Use dispatcher pattern for callbacksreact-state-fallback - Show fallback on first renderreact-compiler-destructure-functions - Destructure for React Compilerreact-compiler-reanimated-shared-values - Handle shared values with compilerrendering-text-in-text-component - Wrap text in Text componentsrendering-no-falsy-and - Avoid falsy && for conditional renderingmonorepo-native-deps-in-app - Keep native dependencies in app packagemonorepo-single-dependency-versions - Use single versions across packagesfonts-config-plugin - Use config plugins for custom fontsimports-design-system-folder - Organize design system importsjs-hoist-intl - Hoist Intl object creationRead individual rule files for detailed explanations and code examples:
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
Weekly Installs
52.3K
Repository
GitHub Stars
22.4K
First Seen
Jan 26, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode38.3K
codex37.5K
gemini-cli36.8K
github-copilot34.3K
claude-code33.3K
cursor31.1K
97,400 周安装