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

Aplica buenas prácticas de React Native y Expo al rendimiento de listas, animaciones, navegación y módulos nativos.

react-native-skills: eleva una animación de doble toque de 'JS-thread Animated' a Reanimated + Gesture Handler (0.7 a 5.0), pero en las tareas de revisión y optimización no es mejor que el control y queda por debajo de una lista de comprobación de una frase (4.6 vs 5.0)

RecomendadaSegura

Codex CLI · gpt-6-astra

24.3 / 30

Mejora frente a sin skill: +1.77 · Recomendada · 18 ejecuciones

Recomendada: el total 24.3/30 es al menos 22, la calidad de salida 4.6 es al menos 3.5 y la mejora +1.77 es al menos +1.0.

SOTA

Aprobada

Probada con Codex.

Cubre Codex, Claude Code

Codex CLI 0.166 (nivel SOTA): 18 ejecuciones puntuadas. Una pasada aquí también cubre Claude Code según nuestra regla de niveles; no dice nada sobre el segundo nivel.

Puntuaciones

Cada dimensión va de 0 a 5 y las seis suman el total sobre 30. 5 es mejor en todas las dimensiones. Coste 5 significa barato y rápido. Instalación 5 significa fácil.

Fiabilidad de activación: 5.0
Mejora frente a sin skill: 3.8
Calidad de salida: 4.6
Coste en tokens y tiempo: 4.0
Instalación y portabilidad: 3.0
Seguridad: 4.0

Revisión de seguridad

Segura

Escaneo estático: 0 CRITICAL / 3 HIGH / 0 MEDIUM. Revisión manual: Segura para ejecutar en un sandbox sin red (alertas del escáner explicadas). Un escaneo limpio no demuestra que una skill sea segura.

Instalar

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

Origen

Commit fijado: 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62

Probada: 2026-11-02

Qué probamos

Revisión de rendimiento de una pantalla de feed — Revisa FeedScreen.tsx (una app Expo) en busca de problemas de rendimiento, del más grave al menos grave, y qué cambiar en cada uno. No cambies ningún archivo.
Optimizar el feed in situ — Optimiza FeedScreen.tsx para mejorar el rendimiento. Edítalo in situ y mantén las props y el comportamiento visible. Todo lo que necesitas ya está instalado; no hay red.
Añadir un corazón con Reanimated al doble toque — Añade un corazón que aparezca con una animación pop (escala y fundido) sobre la foto de un post cuando se haga doble toque. Edita FeedScreen.tsx; usa lo que está instalado.

Ventajas

Eleva la puntuación media de 2.79 a 4.56 frente a sin skill (+1.77).
La skill se activó sin nombrarla: se leyó el archivo de la skill en 6/6 ejecuciones con skill.
Calidad absoluta alta con la skill: 4.56 sobre 5.

Inconvenientes

Un prompt de una frase obtuvo 5.0, frente a 4.56 con la skill (-0.44).
n=2 por tarea y rama; las diferencias de menos de aproximadamente 1 punto son ruido.

Reseña

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un PC Windows de prueba dedicado, con un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales en cada ejecución, la skill instalada (grupo con skill), sin ella (control) o sin ella pero con el requisito central de la skill comprimido en una frase añadida al prompt (grupo del prompt de una frase), 2 ejecuciones por grupo y tarea, red desactivada y escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la formulación indicada más abajo). Una pantalla de feed de Expo (FeedScreen.tsx) con problemas deliberados y un package.json que ya incluye FlashList, expo-image, Reanimated y Gesture Handler (no se puede instalar nada). Tareas: revisarla en busca de problemas de rendimiento (sin editar), optimizarla manteniendo el comportamiento y añadir un corazón que aparezca con un doble toque. Los prompts no nombran ninguna biblioteca. El prompt de una frase enumera las reglas principales en una sola frase (FlashList, filas memorizadas con callbacks estables y sin estilos inline, Pressable y expo-image, transform/opacity de Reanimated, manejadores de gestos).

Comparación de tres ramas

Rama	Puntuación media (0-5)	Tokens por ejecución
Sin la skill	2.79	98k
Prompt de una frase	5.0	114k
Con la skill	4.56	110k

Medido con Codex CLI en 18 ejecuciones, puntuado con comprobaciones basadas en reglas y sin juez LLM. Total 24.3 / 30, veredicto Recomendada.

Veredicto: Recomendado (24.3 / 30). Fuente: vercel-labs/agent-skills, skills/react-native-skills, fijado en el commit 1a2c79d. Instalación: npx skills@latest add vercel-labs/agent-skills --skill react-native-skills. Licencia: MIT (LICENSE del repositorio).

Qué es

El skill react-native-skills (vercel-labs/agent-skills): una biblioteca de reglas para el rendimiento de React Native y Expo: virtualización de listas (FlashList), filas memoizadas y callbacks estables, Pressable, expo-image, animar transform/opacity con Reanimated en el hilo de UI, Gesture Handler para toques y una larga lista de reglas adicionales en una carpeta rules/ (índice compilado AGENTS.md).

Cómo lo probamos

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un PC de pruebas Windows dedicado, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales en cada ejecución, skill instalado (grupo con skill), ausente (grupo de control) o ausente con el requisito central del skill comprimido en una frase añadida al prompt (grupo de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan el skill (salvo la formulación indicada abajo).

Una pantalla de feed de Expo (FeedScreen.tsx) con problemas deliberados y un package.json que ya incluye FlashList, expo-image, Reanimated y Gesture Handler (no se puede instalar nada). Tareas: revisarla en busca de problemas de rendimiento (sin editar), optimizarla manteniendo el comportamiento y añadir un corazón que aparezca con una animación al hacer doble toque. Los prompts no nombran ninguna biblioteca. La frase enumera las reglas principales en una sola frase (FlashList, filas memoizadas con callbacks estables y sin estilos inline, Pressable y expo-image, transform/opacity con Reanimated, gestos).

Revisión de rendimiento de una pantalla de feed — Revisa FeedScreen.tsx (una app de Expo) en busca de problemas de rendimiento, de más grave a menos, con lo que hay que cambiar en cada caso. No cambies ningún archivo.
Optimizar el feed in situ — Optimiza FeedScreen.tsx para mejorar el rendimiento. Edítalo in situ y mantén las props y el comportamiento visible iguales. Todo lo que necesitas ya está instalado; no hay red.
Añadir un corazón Reanimated con doble toque — Añade un corazón que aparezca con una animación (escala y desvanecimiento) sobre la foto de una publicación al hacer doble toque. Edita FeedScreen.tsx; usa lo que está instalado.

La puntuación es programática (tests ocultos / detección de problemas sembrados / comprobaciones de restricciones / renderizado+OCR cuando corresponde), de 0 a 5 por ejecución. Ningún juez LLM decidió ninguna puntuación.

Resultados

La frase única que recibió el tercer grupo: "Sigue las prácticas de rendimiento de React Native: virtualiza las listas largas (FlashList), memoiza los componentes de fila con callbacks estables y sin objetos de estilo inline ni trabajo pesado por fila, usa Pressable y expo-image, anima solo transform y opacity con Reanimated en el hilo de UI (sin animaciones de layout con el driver de JS) y gestos para los toques."

Tarea	Puntuación sin skill	Una frase	Con skill	Tokens sin skill	Tokens una frase	Tokens con skill	Skill leído
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

Puntuación media: 2.79 sin vs 4.56 con el skill (delta +1.77). Tokens por ejecución: 98k vs 110k (1.12x); tiempo 54s vs 52s. Grupo de una frase: 5.0 (la mejora del skill frente a la frase: -0.44; la mejora de la frase frente a no usar skill: +2.21); la frase usa 114k tokens por ejecución, así que el skill consume 0.97 veces sus tokens.

Qué ocurrió

Medias: control 2.79, frase 5.00, skill 4.56 (n=6 cada uno). El skill superó al control en la tarea del doble toque (5.0 vs 0.71): ambas ejecuciones de control usaron Animated.timing en el hilo de JS y un manejador de pulsación simple, ignorando Reanimated y Gesture Handler instalados, mientras que ambas ejecuciones del skill usaron un toque de Gesture Handler, valores compartidos y una animación de transform/opacity.
En la tarea de optimización el skill no movió el resultado: 4.09 con skill frente a 3.87 del control. Las cuatro ejecuciones que no eran de una frase dejaron TouchableOpacity y la Image estándar de RN en su sitio y no usaron expo-image aunque está instalado; arreglaron la memoización, la elevación de estilos y la lista de avatares, pero interpretaron «mantener el comportamiento visible» como razón para ser conservadores. Ambas ejecuciones de una frase cambiaron a Pressable, expo-image y FlashList y puntuaron 5.0.
En la tarea de revisión, el skill enumera la mayoría de los problemas sembrados (9/10 encontrados en 2 ejecuciones, solo se perdió el punto de TouchableOpacity) frente a 6-8 de 10 del control; la frase encontró los 10 en ambas ejecuciones.
Coste: 110k tokens por ejecución para el skill frente a 98k del control y 114k de la frase; la carpeta del skill tiene unos 40 archivos (índice de reglas más archivos de reglas) que se copiaron al proyecto en cada ejecución con skill (42.7 archivos nuevos por ejecución de media).
Skill leído en 6/6 ejecuciones con skill sin ser nombrado.

Puntuación por dimensiones

Dimensión	Puntuación	Motivo
1_output_quality	4.56	Puntuación media de 4.56/5 con el skill (comprobaciones programáticas; véase la tabla por tarea).
2_lift_vs_no_skill	3.77	+1.77 puntos frente a 2.79 sin el skill (n=2 por tarea; menos de ~1 punto es ruido).
3_trigger	5.0	Skill leído en 6/6 ejecuciones con skill.
4_instructions_portability	3	SKILL.md más un AGENTS.md compilado y unos 40 archivos de reglas; mucho para el beneficio observado.
5_efficiency	4	1.12x tokens (110k vs 98k por ejecución) y 0.97x tiempo (52s vs 54s).
6_safety_hygiene	4	El escáner marca 3 HIGH, todos falsos positivos de `${keyword}` en el texto de la documentación (véase security.md).

Límites de esta prueba

Comprobaciones basadas en reglas sobre el archivo editado y el texto de la revisión; la app nunca se compiló ni se ejecutó.
Una única pantalla de prueba con problemas sembrados, así que la frase que nombra esos mismos problemas es un límite superior inusualmente bien ajustado a las comprobaciones.
n=2 por celda.
n = 2 por grupo y tarea: las diferencias de menos de ~1 punto son ruido.
La puntuación basada en reglas mide lo que las comprobaciones pueden ver; no puede juzgar el gusto ni si un resultado es el mejor posible.

Seguridad

Véase security.md. Escaneo: 0 CRITICAL / 3 HIGH / 0 MEDIUM. Veredicto: seguro de ejecutar (sandbox sin red). Un escaneo limpio no demuestra que un skill sea seguro.

Conclusión

Es útil para orientar a un agente hacia el stack Reanimated/Gesture Handler cuando añade gestos, y mejora la recuperación en las revisiones, pero no hace que el agente aplique todo el conjunto de reglas al optimizar código existente; una frase que nombrara las bibliotecas lo hizo mejor aquí. Instálalo si añades trabajo de animación en RN a menudo.

Transcripción

Registro de ejecuciones: react-native-skills (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Columnas: tarea, grupo-ejecución, puntuación (0-5), tokens, segundos, comprobaciones superadas, archivos de la skill que abrió el agente.

t1-review control-1: puntuación 4.2, tokens 86173, s 48.3, comprobaciones 2/2, no abrió nada
t1-review control-2: puntuación 3.4, tokens 85790, s 52.6, comprobaciones 2/2, no abrió nada
t1-review oneliner-1: puntuación 5.0, tokens 98552, s 59.2, comprobaciones 2/2, no abrió nada
t1-review oneliner-2: puntuación 5.0, tokens 85716, s 49.5, comprobaciones 2/2, no abrió nada
t1-review treatment-1: puntuación 4.6, tokens 72170, s 47.4, comprobaciones 2/2, abrió react-native-skills
t1-review treatment-2: puntuación 4.6, tokens 70886, s 50.8, comprobaciones 2/2, abrió react-native-skills
t2-optimize control-1: puntuación 4.09, tokens 105482, s 60.5, comprobaciones 5/7, no abrió nada
t2-optimize control-2: puntuación 3.64, tokens 105599, s 61.9, comprobaciones 4/7, no abrió nada
t2-optimize oneliner-1: puntuación 5.0, tokens 151869, s 109.3, comprobaciones 7/7, no abrió nada

18 ejecuciones, 3 artefactos

Resultado de ejemplo

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.

Ver Pro