OfficialDéveloppement et programmationgithub.com

Compétences React Native

Meilleures pratiques React Native et Expo pour créer des applications mobiles performantes.

Qu'est-ce que Compétences React Native ?

Ce skill fournit un ensemble complet de règles et de bonnes pratiques pour le développement d'applications mobiles avec React Native et Expo. Il couvre des domaines critiques tels que les performances des listes (utilisation de FlashList, mémorisation des composants), les animations (avec Reanimated), la navigation, les motifs d'interface utilisateur (utilisation d'expo-image, de Pressable, de modales natives), la gestion d'état, le rendu conditionnel, la configuration monorepo et la configuration des polices. Le skill est conçu pour être utilisé avec des assistants de codage comme Claude Code ou Cursor, guidant le développeur à travers des règles priorisées (de CRITIQUE à FAIBLE) avec des exemples de code corrects et incorrects pour chaque règle. Il permet d'optimiser les applications mobiles pour des performances et une maintenabilité maximales.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofMobileReact
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/react-native-skills

Installed? Explore more Développement et programmation skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait Compétences React Native ?

Bonnes pratiques complètes pour les applications React Native et Expo. Contient des règles couvrant plusieurs catégories : performances, animations, motifs d'interface utilisateur et optimisations spécifiques à la plateforme.

Quand les appliquer

Consultez ces directives lorsque :

  • Vous construisez des applications React Native ou Expo
  • Vous optimisez les performances des listes et du défilement
  • Vous implémentez des animations avec Reanimated
  • Vous travaillez avec des images et des médias
  • Vous configurez des modules natifs ou des polices
  • Vous structurez des projets monorepo avec des dépendances natives

Catégories de règles par priorité

PrioritéCatégorieImpactPréfixe
1Performances des listesCRITIQUElist-performance-
2AnimationHAUTEanimation-
3NavigationHAUTEnavigation-
4Motifs d'interface utilisateurHAUTEui-
5Gestion d'étatMOYENNEreact-state-
6RenduMOYENNErendering-
7MonorepoMOYENNEmonorepo-
8ConfigurationFAIBLEfonts-, imports-

Référence rapide

1. Performances des listes (CRITIQUE)

  • list-performance-virtualize - Utilisez FlashList pour les grandes listes
  • list-performance-item-memo - Mémoïsez les composants d'éléments de liste
  • list-performance-callbacks - Stabilisez les références de callbacks
  • list-performance-inline-objects - Évitez les objets de style en ligne
  • list-performance-function-references - Extrayez les fonctions en dehors du rendu
  • list-performance-images - Optimisez les images dans les listes
  • list-performance-item-expensive - Déplacez les traitements coûteux hors des éléments
  • list-performance-item-types - Utilisez des types d'éléments pour les listes hétérogènes

2. Animation (HAUTE)

  • animation-gpu-properties - Animez uniquement transform et opacity
  • animation-derived-value - Utilisez useDerivedValue pour les animations calculées
  • animation-gesture-detector-press - Utilisez Gesture.Tap au lieu de Pressable

3. Navigation (HAUTE)

  • navigation-native-navigators - Utilisez les piles natives et les onglets natifs plutôt que les navigateurs JS

4. Motifs d'interface utilisateur (HAUTE)

  • ui-expo-image - Utilisez expo-image pour toutes les images
  • ui-image-gallery - Utilisez Galeria pour les boîtes à lumière d'images
  • ui-pressable - Utilisez Pressable plutôt que TouchableOpacity
  • ui-safe-area-scroll - Gérez les zones sécurisées dans les ScrollView
  • ui-scrollview-content-inset - Utilisez contentInset pour les en-têtes
  • ui-menus - Utilisez les menus contextuels natifs
  • ui-native-modals - Utilisez les modales natives lorsque possible
  • ui-measure-views - Utilisez onLayout, pas measure()
  • ui-styling - Utilisez StyleSheet.create ou Nativewind

5. Gestion d'état (MOYENNE)

  • react-state-minimize - Minimisez les abonnements d'état
  • react-state-dispatcher - Utilisez le motif de répartiteur pour les callbacks
  • react-state-fallback - Affichez un fallback au premier rendu
  • react-compiler-destructure-functions - Déstructurez pour le compilateur React
  • react-compiler-reanimated-shared-values - Gérez les valeurs partagées avec le compilateur

6. Rendu (MOYENNE)

  • rendering-text-in-text-component - Enveloppez le texte dans des composants Text
  • rendering-no-falsy-and - Évitez && pour le rendu conditionnel

7. Monorepo (MOYENNE)

  • monorepo-native-deps-in-app - Conservez les dépendances natives dans le paquet de l'application
  • monorepo-single-dependency-versions - Utilisez des versions uniques dans tous les paquets

8. Configuration (FAIBLE)

  • fonts-config-plugin - Utilisez les plugins de configuration pour les polices personnalisées
  • imports-design-system-folder - Organisez les importations du système de design
  • js-hoist-intl - Hoistez la création d'objets Intl

Comment utiliser

Lisez les fichiers de règles individuels pour des explications détaillées et des exemples de code :

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

Chaque fichier de règle contient :

  • Une brève explication de son importance
  • Un exemple de code incorrect avec explication
  • Un exemple de code correct avec explication
  • Contexte supplémentaire et références

Document compilé complet

Pour le guide complet avec toutes les règles développées : AGENTS.md

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

deploy-to-vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

vercel-cli-with-tokens

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g.

vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with

vercel-labs/vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

vercel-labs/vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-labs/vercel-react-native-skills

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.

vercel-labs/vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

vercel-optimize

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to

writing-guidelines

Review docs/prose for Writing Guidelines compliance. Use when asked to

Skills associés

steipete/bluebubbles

Send and manage iMessages via BlueBubbles, including attachments, tapbacks, edits, replies, and groups.

community

steipete/eightctl

Control Eight Sleep pods (status, temperature, alarms, schedules).

community

steipete/blucli

BluOS CLI (blu) for discovery, playback, grouping, and volume.

community

steipete/bear-notes

Create, search, and manage Bear notes via grizzly CLI.

community

steipete/camsnap

Capture frames or clips from RTSP/ONVIF cameras.

community

steipete/gifgrep

Search GIF providers with CLI/TUI, download results, and extract stills/sheets.

community
← More Développement et programmation skills