react-native-skills (vercel-labs/agent-skills)

Name: react-native-skills (vercel-labs/agent-skills) review
Item: react-native-skills (vercel-labs/agent-skills)
Rating: 24.3
Author: Agent Skills

Applique les bonnes pratiques React Native et Expo aux performances de listes, animations, navigation et modules natifs.

react-native-skills : fait passer une animation au double-tap de « Animated sur le thread JS » à Reanimated + Gesture Handler (0.7 à 5.0), mais sur les tâches de revue et d'optimisation il ne fait pas mieux que le contrôle et reste sous une checklist en une phrase (4.6 contre 5.0)

RecommandéSûr

Codex CLI · gpt-6-astra

24.3 / 30

Gain par rapport à sans skill : +1.77 · Recommandé · 18 exécutions

Recommandé : total 24.3/30 d'au moins 22, qualité de sortie 4.6 d'au moins 3.5 et gain +1.77 d'au moins +1.0.

SOTA

Réussi

Testé avec Codex.

Couvre Codex, Claude Code

Codex CLI 0.166 (palier SOTA) : 18 exécutions notées. Une réussite ici couvre aussi Claude Code selon notre règle de palier ; elle ne dit rien du second palier.

Scores

Chaque dimension va de 0 à 5 et les six forment le total sur 30. 5 est la meilleure note dans chaque dimension. Coût 5 signifie bon marché et rapide. Installation 5 signifie facile.

Fiabilité du déclenchement: 5.0
Gain par rapport à sans skill: 3.8
Qualité de sortie: 4.6
Coût en tokens et en temps: 4.0
Installation et portabilité: 3.0
Sécurité: 4.0

Revue de sécurité

Sûr

Scan statique : 0 CRITIQUE / 3 ÉLEVÉ / 0 MOYEN. Revue manuelle : sûr à exécuter dans un bac à sable sans réseau (alertes du scanner expliquées). Un scan propre ne prouve pas qu'un skill est sûr.

Installer

npx skills@latest add vercel-labs/agent-skills --skill react-native-skills

Source

Commit épinglé: 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62

Testé: 2026-11-02

Ce que nous avons testé

Revue de performance d'un écran de flux — Relisez FeedScreen.tsx (une app Expo) pour des problèmes de performance, du plus grave au moins grave, avec ce qu'il faut changer pour chacun. Ne modifiez aucun fichier.
Optimiser le flux sur place — Optimisez FeedScreen.tsx pour la performance. Modifiez-le sur place en conservant les mêmes props et le même comportement visible. Tout ce qu'il faut est déjà installé ; il n'y a pas de réseau.
Ajouter un cœur Reanimated au double-tap — Ajoutez un cœur qui éclate (échelle et fondu) sur la photo d'un billet lorsqu'on double-tape dessus. Modifiez FeedScreen.tsx ; utilisez ce qui est installé.

Points forts

Fait passer le score moyen de 2.79 à 4.56 par rapport à sans skill (+1.77).
Le skill a été détecté sans être nommé : son fichier a été lu dans 6/6 exécutions avec skill.
Qualité absolue élevée avec le skill : 4.56 sur 5.

Points faibles

Un prompt d'une phrase obtient 5.0, contre 4.56 avec le skill (-0.44).
n=2 par tâche et par bras ; les écarts inférieurs à environ 1 point sont du bruit.

Avis

Codex CLI 0.166 (gpt-6-astra, low reasoning) sur un PC Windows de test dédié, un projet temporaire neuf et des HOME/TMPDIR/caches temporaires à chaque exécution, skill installé (traitement) ou absent (contrôle) ou absent avec l'exigence centrale du skill compressée en une phrase ajoutée au prompt (groupe « prompt d'une phrase »), 2 exécutions par groupe et par tâche, réseau coupé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée ci-dessous). Un écran de flux Expo (FeedScreen.tsx) avec des problèmes délibérés et un package.json qui liste déjà FlashList, expo-image, Reanimated et Gesture Handler (rien ne peut être installé). Tâches : le relire pour des problèmes de performance (sans modification), l'optimiser en conservant le comportement, et ajouter un cœur qui éclate au double-tap. Les prompts ne nomment aucune bibliothèque. Le groupe « une phrase » liste les règles principales en une phrase (FlashList, lignes mémorisées avec callbacks stables et sans styles en ligne, Pressable et expo-image, transform/opacity Reanimated, gestionnaires de gestes).

Comparaison à trois bras

Bras	Score moyen (0-5)	Tokens par exécution
Sans le skill	2.79	98k
Prompt d'une phrase	5.0	114k
Avec le skill	4.56	110k

Mesuré avec Codex CLI sur 18 exécutions, noté par des contrôles basés sur des règles, sans juge LLM. Total 24.3 / 30, verdict Recommandé.

Verdict : Recommandé (24.3 / 30). Source : vercel-labs/agent-skills, skills/react-native-skills, épinglé au commit 1a2c79d. Installation : npx skills@latest add vercel-labs/agent-skills --skill react-native-skills. Licence : MIT (LICENSE du dépôt).

Présentation

Le skill react-native-skills (vercel-labs/agent-skills) : une bibliothèque de règles pour la performance React Native et Expo : virtualisation des listes (FlashList), lignes mémorisées et callbacks stables, Pressable, expo-image, animation de transform/opacity avec Reanimated sur le thread UI, Gesture Handler pour les taps et une longue liste d’autres règles dans un dossier rules/ (index compilé AGENTS.md).

Méthode de test

Codex CLI 0.166 (gpt-6-astra, raisonnement faible) sur une machine de test Windows dédiée, un projet temporaire neuf et des HOME/TMPDIR/caches temporaires à chaque exécution, skill installé (groupe avec skill), absent (groupe témoin), ou absent avec l’exigence centrale du skill compressée en une phrase ajoutée au prompt (groupe « prompt en une phrase »), 2 exécutions par groupe et par tâche, réseau désactivé, écritures dans /tmp bloquées. Les prompts ne mentionnent jamais le skill (sauf la formulation indiquée plus bas).

Un écran de feed Expo (FeedScreen.tsx) avec des problèmes délibérés et un package.json qui liste déjà FlashList, expo-image, Reanimated et Gesture Handler (rien ne peut être installé). Tâches : le relire pour des problèmes de performance (sans modification), l’optimiser en conservant le comportement, et ajouter un cœur qui surgit au double-tap. Les prompts ne nomment aucune bibliothèque. Le prompt en une phrase énumère les règles principales en une phrase (FlashList, lignes mémorisées avec callbacks stables et sans styles inline, Pressable et expo-image, transform/opacity avec Reanimated, gesture handlers).

Revue de performance d’un écran de feed — Relisez FeedScreen.tsx (une application Expo) pour des problèmes de performance, du plus grave au moins grave, avec ce qu’il faut changer pour chacun. Ne modifiez aucun fichier.
Optimiser le feed sur place — Optimisez FeedScreen.tsx pour la performance. Modifiez-le sur place et conservez les mêmes props et le même comportement visible. Tout ce qu’il vous faut est déjà installé ; il n’y a pas de réseau.
Ajouter un cœur Reanimated au double-tap — Ajoutez un cœur qui surgit (scale et fondu) sur la photo d’une publication lors d’un double-tap. Modifiez FeedScreen.tsx ; utilisez ce qui est installé.

Le scoring est programmatique (tests cachés / détection des problèmes implantés / vérifications de contraintes / rendu + OCR le cas échéant), de 0 à 5 par exécution. Aucun juge LLM n’a attribué de score.

Résultats

Le prompt en une phrase donné au troisième groupe : « Suis les bonnes pratiques de performance React Native : virtualise les longues listes (FlashList), mémorise les composants de ligne avec des callbacks stables et sans objets de style inline ni travail lourd par ligne, utilise Pressable et expo-image, n’anime que transform et opacity avec Reanimated sur le thread UI (pas d’animation de mise en page pilotée par le JS), et des gesture handlers pour les taps. »

Tâche	Score témoin	Prompt en une phrase	Avec skill	Tokens témoin	Tokens du prompt en une phrase	Tokens avec skill	Skill lu
t1-review	3.8	5.0	4.6	85k	92k	71k	2/2
t2-optimize	3.87	5.0	4.09	105k	140k	142k	2/2
t3-double-tap	0.71	5.0	5.0	103k	107k	116k	2/2

Score moyen : 2.79 sans le skill contre 4.56 avec (écart +1.77). Tokens par exécution : 98k contre 110k (1.12x) ; temps 54s contre 52s. Groupe « prompt en une phrase » : 5.0 (gain du skill sur ce prompt : -0.44 ; gain du prompt par rapport à l’absence de skill : +2.21) ; tokens du prompt : 114k par exécution, donc le skill coûte 0.97x le prompt en une phrase.

Ce qui s’est passé

Moyennes : témoin 2.79, prompt 5.00, skill 4.56 (n=6 chacun). Le skill a battu le témoin sur la tâche du double-tap (5.0 contre 0.71) : les deux exécutions témoins ont utilisé Animated.timing sur le thread JS et un simple gestionnaire de pression, en ignorant Reanimated et Gesture Handler installés, tandis que les deux exécutions avec skill ont utilisé un tap Gesture Handler, des shared values et une animation transform/opacity.
Sur la tâche d’optimisation, le skill n’a pas fait bouger le résultat : 4.09 avec skill contre 3.87 pour le témoin. Les quatre exécutions hors du groupe du prompt ont laissé TouchableOpacity et le composant Image standard de RN en place et n’ont pas utilisé expo-image alors qu’il est installé ; elles ont corrigé la mémorisation, le hoisting des styles et la liste d’avatars, mais ont interprété « conserver le comportement visible » comme une raison de rester prudentes. Les deux exécutions du prompt sont passées à Pressable, expo-image et FlashList et ont obtenu 5.0.
Sur la tâche de revue, le skill liste la plupart des problèmes implantés (9/10 trouvés en 2 exécutions, seul le point TouchableOpacity manque) contre 6-8 sur 10 pour le témoin ; le prompt a trouvé les 10 dans les deux exécutions.
Coût : 110k tokens par exécution pour le skill contre 98k pour le témoin et 114k pour le prompt ; le dossier du skill contient environ 40 fichiers (index de règles plus fichiers de règles) qui ont été copiés dans le projet à chaque exécution avec skill (42.7 nouveaux fichiers par exécution en moyenne).
Le skill a été lu dans 6/6 exécutions avec skill sans être nommé.

Scores par dimension

Dimension	Score	Pourquoi
1_output_quality	4.56	Score moyen de 4.56/5 avec le skill (vérifications programmatiques, voir le tableau par tâche).
2_lift_vs_no_skill	3.77	+1.77 point par rapport à 2.79 sans le skill (n=2 par tâche ; un écart inférieur à ~1 point relève du bruit).
3_trigger	5.0	Fichier du skill lu dans 6/6 exécutions avec skill.
4_instructions_portability	3	SKILL.md plus un AGENTS.md compilé et environ 40 fichiers de règles ; volumineux au regard du bénéfice observé.
5_efficiency	4	1.12x tokens (110k contre 98k par exécution) et 0.97x temps (52s contre 54s).
6_safety_hygiene	4	Le scanner signale 3 HIGH, tous des faux positifs `${keyword}` dans le texte de documentation (voir security.md).

Limites de ce test

Vérifications par règles sur le fichier modifié et sur le texte de la revue ; l’application n’a jamais été construite ni exécutée.
Un seul écran de test avec des problèmes implantés, donc le prompt qui nomme les mêmes problèmes constitue une borne supérieure anormalement bien alignée sur les vérifications.
n=2 par cellule.
n = 2 par groupe et par tâche : un écart inférieur à ~1 point relève du bruit.
Le scoring par règles mesure ce que les vérifications peuvent voir ; il ne peut juger du goût ni du caractère optimal d’un résultat.

Sécurité

Voir security.md. Scan : 0 CRITICAL / 3 HIGH / 0 MEDIUM. Verdict : exécution sans danger (sandbox sans réseau). Un scan propre ne prouve pas qu’un skill est sûr.

En résumé

Utile pour orienter un agent vers la pile Reanimated/Gesture Handler lors de l’ajout de gestes, et cela améliore la détection en revue, mais il ne fait pas appliquer l’ensemble des règles à l’agent lorsqu’il optimise du code existant ; une phrase nommant les bibliothèques a mieux marché ici. Installez-le si vous ajoutez souvent du travail d’animation RN.

Transcription

Journal d'exécution : react-native-skills (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Colonnes : tâche, groupe-exécution, score (0-5), tokens, secondes, vérifications réussies, fichiers de la skill ouverts par l'agent.

t1-review control-1: score 4.2, tokens 86173, s 48.3, vérifications 2/2, rien ouvert
t1-review control-2: score 3.4, tokens 85790, s 52.6, vérifications 2/2, rien ouvert
t1-review oneliner-1: score 5.0, tokens 98552, s 59.2, vérifications 2/2, rien ouvert
t1-review oneliner-2: score 5.0, tokens 85716, s 49.5, vérifications 2/2, rien ouvert
t1-review treatment-1: score 4.6, tokens 72170, s 47.4, vérifications 2/2, ouvert react-native-skills
t1-review treatment-2: score 4.6, tokens 70886, s 50.8, vérifications 2/2, ouvert react-native-skills
t2-optimize control-1: score 4.09, tokens 105482, s 60.5, vérifications 5/7, rien ouvert
t2-optimize control-2: score 3.64, tokens 105599, s 61.9, vérifications 4/7, rien ouvert
t2-optimize oneliner-1: score 5.0, tokens 151869, s 109.3, vérifications 7/7, rien ouvert

18 exécutions, 3 artefacts

Exemple de sortie

SOTA · With the skill: final message (t1-review, run 1, Codex)

Most serious first: 1. **High — Every rendered row sorts the entire feed** ([FeedScreen.tsx:17](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:17)). Each row copies and sorts all posts, then searches for its rank. Rendering *v* rows costs roughly O(v × n log n), blocking the JS thread during scrolling. **Change:** compute an ID-to-rank map once with `useMemo([posts])`, then use an O(1) lookup per row. Preserve ranking across all posts when filtering. 2. **High — The avatar strip renders every post immediately** ([line 28](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:28)). `ScrollView` with `posts.map()` mounts all avatar views, increasing startup work and image memory as the feed grows. **Change:** use a horizontal `FlatList` or FlashList with stable IDs and a bounded height. The fixed avatar dimensions make layout calculation straightforward. 3. **Medium — Screen rerenders cause avoidable list work** ([line 15](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:15)). Filtering creates a new array and `renderItem` creates a new function each render; rows have no memoization boundary. **Change:** memoize filtered posts using `[posts, query]`, extract a `React.memo` row, and stabilize `renderItem` with the correct dependencies. Pass the computed rank and a stable `onOpen`; move static styles into `StyleSheet.create`. Currently, `setQuery` is unused, so typing-related rerenders aren’t present. 4. **Conditional medium — Image payloads may exceed their display needs** ([lines 20](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:20) and [30](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:30)). Display dimensions don’t guarantee appropriately sized downloads. Original-resolution URLs could add substantial network and decoding cost. **Change:** request compressed thumbnails sized for the display’s pixel density; consider the already-installed `expo-image` for explicit caching and recycling support. The actual source dimensions aren’t available here. 5. **Latent — Width animation uses the JS thread and changes layout every frame** ([line 9](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:9)). `grow` is unused, so this has no current animation cost. **Change if activated:** use `scaleX` with the native driver when visual scaling meets the design; it won’t change layout space. Also initialize the value lazily: `useState(() => new Animated.Value(100))`. Static review only; no profiling performed and no files changed.

Voir Pro