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

Wendet React-Native- und Expo-Best-Practices auf Listenperformance, Animationen, Navigation und native Module an.

react-native-skills: Hebt eine Double-Tap-Animation von „JS-Thread-Animated“ auf Reanimated + Gesture Handler (0.7 auf 5.0), ist bei Review- und Optimierungsaufgaben aber nicht besser als die Kontrolle und schlechter als eine Ein-Satz-Checkliste (4.6 vs. 5.0)

EmpfohlenSicher

Codex CLI · gpt-6-astra

24.3 / 30

Lift gegenüber ohne Skill: +1.77 · Empfohlen · 18 Läufe

Empfohlen: Die Gesamtpunktzahl 24.3/30 liegt bei mindestens 22, die Ausgabequalität 4.6 bei mindestens 3.5 und der Lift +1.77 bei mindestens +1.0.

SOTA

Bestanden

Getestet mit Codex.

Gilt für Codex, Claude Code

Codex CLI 0.166 (SOTA-Stufe): 18 bewertete Läufe. Ein Bestehen hier deckt gemäß unserer Stufenregel auch Claude Code ab; über die zweite Stufe sagt es nichts aus.

Punktzahlen

Jede Dimension reicht von 0 bis 5, und die sechs ergeben zusammen die Gesamtpunktzahl von 30. 5 ist in jeder Dimension besser. Kosten 5 bedeutet günstig und schnell. Installation 5 bedeutet einfach.

Trigger-Zuverlässigkeit: 5.0
Lift gegenüber ohne Skill: 3.8
Ausgabequalität: 4.6
Token- und Zeitkosten: 4.0
Installation und Portabilität: 3.0
Sicherheit: 4.0

Sicherheitsprüfung

Sicher

Statischer Scan: 0 CRITICAL / 3 HIGH / 0 MEDIUM. Manuelle Prüfung: Sicher in einer Sandbox ohne Netzwerk auszuführen (Scanner-Treffer erklärt). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.

Installieren

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

Quelle

Fixierter Commit: 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62

Getestet: 2026-11-02

Was wir getestet haben

Performance-Review eines Feed-Screens — FeedScreen.tsx (eine Expo-App) auf Performance-Probleme prüfen, schwerwiegendstes zuerst, jeweils mit der nötigen Änderung. Keine Dateien ändern.
Den Feed direkt optimieren — FeedScreen.tsx auf Performance optimieren. Die Datei direkt bearbeiten und Props sowie sichtbares Verhalten gleich halten. Alles Nötige ist bereits installiert; es gibt kein Netzwerk.
Ein Reanimated-Doppeltipp-Herz hinzufügen — Ein Herz hinzufügen, das beim Doppeltippen über dem Foto eines Beitrags aufploppt (Skalieren und Ausblenden). FeedScreen.tsx bearbeiten; das Installierte verwenden.

Vorteile

Hebt den Mittelwert von 2.79 auf 4.56 gegenüber ohne Skill (+1.77).
Der Skill wurde erkannt, ohne genannt zu werden: Skill-Datei in 6/6 Treatment-Läufen gelesen.
Hohe absolute Qualität mit dem Skill: 4.56 von 5.

Nachteile

Ein Ein-Satz-Prompt erzielte 5.0 gegenüber 4.56 mit dem Skill (-0.44).
n=2 pro Aufgabe und Variante; Unterschiede unter etwa 1 Punkt sind Rauschen.

Bewertung

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem dedizierten Windows-Test-PC, einem frischen temporären Projekt und temporären HOME/TMPDIR/Caches pro Lauf; Skill installiert (Treatment) oder nicht vorhanden (Kontrolle) oder nicht vorhanden mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (One-Liner-Gruppe); 2 Läufe pro Gruppe und Aufgabe; Netzwerk aus; Schreiben nach /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten genannten Formulierung). Ein Expo-Feed-Screen (FeedScreen.tsx) mit absichtlichen Problemen und einer package.json, die FlashList, expo-image, Reanimated und Gesture Handler bereits auflistet (nichts kann installiert werden). Aufgaben: ihn auf Performance-Probleme prüfen (keine Änderungen), ihn optimieren und das Verhalten erhalten, und ein Herz hinzufügen, das beim Doppeltippen aufploppt. Die Prompts nennen keine Bibliothek. Der One-Liner listet die wichtigsten Regeln in einem Satz auf (FlashList, memoisierte Zeilen mit stabilen Callbacks und ohne Inline-Styles, Pressable und expo-image, Reanimated transform/opacity, Gesture Handler).

Drei-Arm-Vergleich

Variante	Durchschnittsnote (0-5)	Tokens pro Lauf
Ohne Skill	2.79	98k
Ein-Satz-Prompt	5.0	114k
Mit Skill	4.56	110k

Gemessen mit Codex CLI über 18 Läufe, bewertet durch regelbasierte Prüfungen ohne LLM-Richter. Gesamt 24.3 / 30, Urteil Empfohlen.

Urteil: Empfohlen (24.3 / 30). Quelle: vercel-labs/agent-skills, skills/react-native-skills, gepinnt auf Commit 1a2c79d. Installation: npx skills@latest add vercel-labs/agent-skills --skill react-native-skills. Lizenz: MIT (Repo-LICENSE).

Worum es geht

Der Skill react-native-skills (vercel-labs/agent-skills): eine Regelsammlung für React Native und Expo Performance: Listen-Virtualisierung (FlashList), memoisierte Zeilen und stabile Callbacks, Pressable, expo-image, Animieren von transform/opacity mit Reanimated im UI-Thread, Gesture Handler für Taps und eine lange Liste weiterer Regeln in einem Ordner rules/ (kompilierter Index in AGENTS.md).

So haben wir getestet

Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem dedizierten Windows-Test-PC, pro Lauf ein frisches temporäres Projekt und temporäre HOME/TMPDIR/Caches, Skill installiert (Skill-Gruppe), nicht vorhanden (Kontrollgruppe) oder nicht vorhanden, aber mit der Kernanforderung des Skills als einem an den Prompt angehängten Satz (Ein-Satz-Gruppe), 2 Läufe pro Gruppe und Aufgabe, Netzwerk aus, Schreibzugriffe auf /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten genannten Formulierung).

Ein Expo-Feed-Screen (FeedScreen.tsx) mit absichtlichen Problemen und einer package.json, die FlashList, expo-image, Reanimated und Gesture Handler bereits auflistet (nichts kann installiert werden). Aufgaben: ihn auf Performance-Probleme prüfen (keine Änderungen), ihn optimieren und dabei das Verhalten erhalten und ein Herz hinzufügen, das beim Doppeltippen aufpoppt. Die Prompts nennen keine Bibliothek. Die Ein-Satz-Version listet die wichtigsten Regeln in einem Satz auf (FlashList, memoisierte Zeilen mit stabilen Callbacks und ohne Inline-Styles, Pressable und expo-image, Reanimated transform/opacity, Gesture Handler).

Performance-Review eines Feed-Screens — Prüfe FeedScreen.tsx (eine Expo-App) auf Performance-Probleme, das schwerwiegendste zuerst, jeweils mit der nötigen Änderung. Ändere keine Dateien.
Den Feed an Ort und Stelle optimieren — Optimiere FeedScreen.tsx für Performance. Bearbeite die Datei direkt und behalte die Props und das sichtbare Verhalten bei. Alles Nötige ist bereits installiert; es gibt kein Netzwerk.
Ein Reanimated-Doppeltipp-Herz hinzufügen — Füge ein Herz hinzu, das über dem Foto eines Beitrags aufpoppt (Skalierung und Ausblenden), wenn man doppelt darauf tippt. Bearbeite FeedScreen.tsx; nutze, was installiert ist.

Die Bewertung ist programmatisch (versteckte Tests / Erkennung eingebauter Probleme / Constraint-Checks / Rendern+OCR, wo relevant), 0–5 pro Lauf. Kein LLM-Richter hat einen Score vergeben.

Ergebnisse

Der Ein-Satz-Prompt für die dritte Gruppe: „Befolge die React-Native-Performance-Praxis: Virtualisiere lange Listen (FlashList), memoisiere Zeilenkomponenten mit stabilen Callbacks und ohne Inline-Style-Objekte oder schwere Arbeit pro Zeile, verwende Pressable und expo-image, animiere nur transform und opacity mit Reanimated im UI-Thread (keine Layout-Animation über den JS-Treiber) und nutze Gesture Handler für Taps.“

Aufgabe	Score Kontrolle	Ein-Satz	Mit Skill	Tokens Kontrolle	Tokens Ein-Satz	Tokens mit Skill	Skill gelesen
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

Durchschnittsscore: 2.79 ohne vs. 4.56 mit dem Skill (Delta +1.77). Tokens pro Lauf: 98k vs. 110k (1.12x); Zeit 54s vs. 52s. Ein-Satz-Gruppe: 5.0 (Gewinn des Skills gegenüber der Ein-Satz-Version: -0.44; Gewinn der Ein-Satz-Version gegenüber ohne Skill: +2.21); Ein-Satz-Version 114k Tokens pro Lauf, der Skill kostet also 0.97x so viel wie die Ein-Satz-Version.

Was passiert ist

Mittelwerte: Kontrolle 2.79, Ein-Satz 5.00, Skill 4.56 (n=6 je Gruppe). Der Skill schlug die Kontrolle bei der Doppeltipp-Aufgabe (5.0 vs. 0.71): Beide Kontroll-Läufe nutzten Animated.timing im JS-Thread und einen einfachen Press-Handler und ignorierten das installierte Reanimated und Gesture Handler, während beide Skill-Läufe einen Gesture-Handler-Tap, Shared Values und eine transform/opacity-Animation nutzten.
Bei der Optimierungsaufgabe veränderte der Skill das Ergebnis nicht: Skill 4.09 gegenüber Kontrolle 3.87. Alle vier Läufe ohne Ein-Satz-Version ließen TouchableOpacity und das Standard-RN-Image stehen und nutzten expo-image nicht, obwohl es installiert ist; sie behoben Memoisierung, Style-Hoisting und die Avatar-Liste, sahen aber „sichtbares Verhalten beibehalten“ als Grund, konservativ zu bleiben. Beide Ein-Satz-Läufe wechselten zu Pressable, expo-image und FlashList und erzielten 5.0.
Bei der Review-Aufgabe listet der Skill die meisten eingebauten Probleme (9/10 in 2 Läufen gefunden, nur der TouchableOpacity-Punkt fehlte) gegenüber 6-8 von 10 bei der Kontrolle; die Ein-Satz-Version fand alle 10 in beiden Läufen.
Kosten: 110k Tokens pro Lauf für den Skill vs. 98k Kontrolle und 114k Ein-Satz; der Skill-Ordner enthält etwa 40 Dateien (Regelindex plus Regeldateien), die in jedem Skill-Lauf in das Projekt kopiert wurden (im Schnitt 42.7 neue Dateien pro Lauf).
Skill in 6/6 Skill-Läufen gelesen, ohne genannt zu werden.

Dimensionsbewertungen

Dimension	Score	Begründung
1_output_quality	4.56	Durchschnittsscore 4.56/5 mit dem Skill (programmatische Prüfungen, siehe Tabelle pro Aufgabe).
2_lift_vs_no_skill	3.77	+1.77 Punkte gegenüber 2.79 ohne den Skill (n=2 pro Aufgabe; unter etwa 1 Punkt ist Rauschen).
3_trigger	5.0	Skill-Datei in 6/6 Skill-Läufen gelesen.
4_instructions_portability	3	SKILL.md plus eine kompilierte AGENTS.md und etwa 40 Regeldateien; groß für den erkennbaren Nutzen.
5_efficiency	4	1.12x Tokens (110k vs. 98k pro Lauf) und 0.97x Zeit (52s vs. 54s).
6_safety_hygiene	4	Scanner meldet 3 HIGH; bei allen handelt es sich um `${keyword}`-Falschpositive im Dokumenttext (siehe security.md).

Grenzen dieses Tests

Regelbasierte Prüfungen der bearbeiteten Datei und des Review-Texts; die App wurde nie gebaut oder ausgeführt.
Ein einziger Fixture-Screen mit eingebauten Problemen, daher ist die Ein-Satz-Version, die dieselben Probleme nennt, eine Obergrenze, die ungewöhnlich gut zu den Prüfungen passt.
n=2 pro Zelle.
n = 2 pro Gruppe und Aufgabe: Unterschiede unter etwa 1 Punkt sind Rauschen.
Regelbasierte Bewertung misst, was die Prüfungen sehen können; sie kann keinen Geschmack beurteilen oder ob ein Ergebnis das bestmögliche ist.

Sicherheit

Siehe security.md. Scan: 0 CRITICAL / 3 HIGH / 0 MEDIUM. Urteil: sicher ausführbar (Sandbox ohne Netzwerk). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.

Fazit

Nützlich, um einen Agenten beim Hinzufügen von Gesten in Richtung Reanimated/Gesture-Handler-Stack zu lenken, und es verbessert den Review-Recall; beim Optimieren bestehenden Codes bringt es den Agenten jedoch nicht dazu, den gesamten Regelsatz anzuwenden; ein Satz, der die Bibliotheken nennt, schnitt hier besser ab. Installieren Sie es, wenn Sie häufig RN-Animationsarbeit machen.

Transkript

Laufprotokoll: react-native-skills (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Spalten: Aufgabe, Gruppe-Lauf, Punktzahl (0-5), Tokens, Sekunden, bestandene Prüfungen, vom Agenten geöffnete Skill-Dateien.

t1-review control-1: Punkte 4.2, Tokens 86173, Sek. 48.3, Prüfungen 2/2, nichts geöffnet
t1-review control-2: Punkte 3.4, Tokens 85790, Sek. 52.6, Prüfungen 2/2, nichts geöffnet
t1-review oneliner-1: Punkte 5.0, Tokens 98552, Sek. 59.2, Prüfungen 2/2, nichts geöffnet
t1-review oneliner-2: Punkte 5.0, Tokens 85716, Sek. 49.5, Prüfungen 2/2, nichts geöffnet
t1-review treatment-1: Punkte 4.6, Tokens 72170, Sek. 47.4, Prüfungen 2/2, geöffnet react-native-skills
t1-review treatment-2: Punkte 4.6, Tokens 70886, Sek. 50.8, Prüfungen 2/2, geöffnet react-native-skills
t2-optimize control-1: Punkte 4.09, Tokens 105482, Sek. 60.5, Prüfungen 5/7, nichts geöffnet
t2-optimize control-2: Punkte 3.64, Tokens 105599, Sek. 61.9, Prüfungen 4/7, nichts geöffnet
t2-optimize oneliner-1: Punkte 5.0, Tokens 151869, Sek. 109.3, Prüfungen 7/7, nichts geöffnet

18 Läufe, 3 Artefakte

Beispielausgabe

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.

Pro ansehen