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 boas práticas de React Native e Expo a desempenho de listas, animações, navegação e módulos nativos.

react-native-skills: eleva uma animação de toque duplo de 'JS-thread Animated' para Reanimated + Gesture Handler (0.7 para 5.0), mas em tarefas de revisão e otimização não é melhor que o grupo de controle e fica abaixo de um checklist de uma frase (4.6 vs 5.0)

RecomendadoSeguro

Codex CLI · gpt-6-astra

24.3 / 30

Ganho sobre sem skill: +1.77 · Recomendado · 18 execuções

Recomendado: o total 24.3/30 é pelo menos 22, a qualidade da saída 4.6 é pelo menos 3.5 e o ganho +1.77 é pelo menos +1.0.

SOTA

Aprovado

Testado com Codex.

Cobre Codex, Claude Code

Codex CLI 0.166 (nível SOTA): 18 execuções avaliadas. Uma aprovação aqui também vale para o Claude Code pela nossa regra de níveis; ela não diz nada sobre o segundo nível.

Notas

Cada dimensão vai de 0 a 5, e as seis somam o total de 30. 5 é melhor em todas as dimensões. Custo 5 significa barato e rápido. Instalação 5 significa fácil.

Confiabilidade do acionamento: 5.0
Ganho sobre sem skill: 3.8
Qualidade da saída: 4.6
Custo de tokens e tempo: 4.0
Instalação e portabilidade: 3.0
Segurança: 4.0

Revisão de segurança

Seguro

Varredura estática: 0 CRÍTICO / 3 ALTO / 0 MÉDIO. Revisão manual: seguro para executar em sandbox sem rede (achados do scanner explicados). Uma varredura limpa não prova que a skill é segura.

Instalar

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

Fonte

Commit fixado: 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62

Testado: 2026-11-02

O que testamos

Revisão de desempenho de uma tela de feed — Revise FeedScreen.tsx (um app Expo) em busca de problemas de desempenho, do mais grave para o menos grave, com o que mudar em cada um. Não altere nenhum arquivo.
Otimizar o feed no próprio arquivo — Otimize FeedScreen.tsx para desempenho. Edite o arquivo diretamente e mantenha as props e o comportamento visível iguais. Tudo o que você precisa já está instalado; não há rede.
Adicionar um coração com Reanimated no toque duplo — Adicione um coração que pula (escala e fade) sobre a foto de um post quando ela recebe toque duplo. Edite FeedScreen.tsx; use o que está instalado.

Prós

Eleva a nota média de 2.79 para 4.56 em relação ao grupo sem skill (+1.77).
A skill foi acionada sem ser nomeada: o arquivo da skill foi lido em 6/6 execuções de tratamento.
Qualidade absoluta alta com a skill: 4.56 de 5.

Contras

Um prompt de uma frase marcou 5.0, contra 4.56 com a skill (-0.44).
n=2 por tarefa por braço; diferenças abaixo de cerca de 1 ponto são ruído.

Avaliação

Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC de teste Windows dedicado, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (tratamento), ausente (grupo de controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo com prompt de uma frase), 2 execuções por grupo por tarefa, rede desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo). Uma tela de feed Expo (FeedScreen.tsx) com problemas deliberados e um package.json que já lista FlashList, expo-image, Reanimated e Gesture Handler (nada pode ser instalado). Tarefas: revisar os problemas de desempenho (sem edições), otimizar mantendo o comportamento e adicionar um coração que pula no toque duplo. Os prompts não citam nenhuma biblioteca. O prompt de uma frase lista as principais regras em uma frase (FlashList, linhas memoizadas com callbacks estáveis e sem estilos inline, Pressable e expo-image, transform/opacity do Reanimated, handlers de gesto).

Comparação entre os braços

Braço	Nota média (0-5)	Tokens por execução
Sem a skill	2.79	98k
Prompt de uma frase	5.0	114k
Com a skill	4.56	110k

Medido com Codex CLI em 18 execuções, com pontuação por verificações baseadas em regras e sem juiz LLM. Total 24.3 / 30, veredito Recomendado.

Veredicto: Recomendado (24.3 / 30). Fonte: vercel-labs/agent-skills, skills/react-native-skills, fixado no commit 1a2c79d. Instalação: npx skills@latest add vercel-labs/agent-skills --skill react-native-skills. Licença: MIT (LICENSE do repositório).

O que é

A skill react-native-skills (vercel-labs/agent-skills): uma biblioteca de regras para desempenho em React Native e Expo: virtualização de listas (FlashList), linhas memoizadas e callbacks estáveis, Pressable, expo-image, animação de transform/opacity com Reanimated na thread de UI, Gesture Handler para toques e uma longa lista de outras regras em uma pasta rules/ (índice compilado AGENTS.md).

Como testamos

Codex CLI 0.166 (gpt-6-astra, raciocínio baixo) em um PC de teste Windows dedicado, com um projeto temporário novo e HOME/TMPDIR/caches temporários a cada execução, skill instalada (tratamento), ausente (controle) ou ausente com o requisito central da skill comprimido em uma frase anexada ao prompt (grupo de uma frase), 2 execuções por grupo por tarefa, rede desligada, gravações em /tmp bloqueadas. Os prompts nunca mencionam a skill (exceto pelo texto indicado abaixo).

Uma tela de feed Expo (FeedScreen.tsx) com problemas deliberados e um package.json que já lista FlashList, expo-image, Reanimated e Gesture Handler (nada pode ser instalado). Tarefas: analisá-la em busca de problemas de desempenho (sem edições), otimizá-la mantendo o comportamento e adicionar um coração que estoura com toque duplo. Os prompts não citam nenhuma biblioteca. A frase única lista as principais regras em uma frase (FlashList, linhas memoizadas com callbacks estáveis e sem estilos inline, Pressable e expo-image, transform/opacity com Reanimated, gesture handlers).

Análise de desempenho de uma tela de feed — Analise FeedScreen.tsx (um app Expo) em busca de problemas de desempenho, do mais sério para o menos, com o que mudar em cada caso. Não altere nenhum arquivo.
Otimizar o feed no próprio arquivo — Otimize FeedScreen.tsx para desempenho. Edite no próprio local e mantenha as props e o comportamento visível iguais. Tudo de que você precisa já está instalado; não há rede.
Adicionar um coração Reanimated com toque duplo — Adicione um coração que estoura (escala e fade) sobre a foto de um post quando ela recebe toque duplo. Edite FeedScreen.tsx; use o que está instalado.

A pontuação é programática (testes ocultos / identificação de problemas plantados / verificações de restrições / renderização + OCR quando aplicável), de 0 a 5 por execução. Nenhum juiz LLM decidiu qualquer pontuação.

Resultados

A frase única dada ao terceiro grupo: "Siga as práticas de desempenho do React Native: virtualize listas longas (FlashList), memoize componentes de linha com callbacks estáveis e sem objetos de estilo inline nem trabalho pesado por linha, use Pressable e expo-image, anime apenas transform e opacity com Reanimated na thread de UI (sem animação de layout no driver JS) e use gesture handlers para toques."

Tarefa	Pontuação do controle	Uma frase	Com a skill	Tokens do controle	Tokens de uma frase	Tokens com a skill	Skill lida
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

Pontuação média: 2.79 sem a skill vs. 4.56 com a skill (delta +1.77). Tokens por execução: 98k vs. 110k (1.12x); tempo 54s vs. 52s. Grupo de uma frase: 5.0 (ganho da skill sobre a frase única: -0.44; ganho da própria frase única sobre sem skill: +2.21); 114k tokens por execução no grupo de uma frase, então a skill custa 0.97x a frase única.

O que aconteceu

Médias: controle 2.79, frase única 5.00, skill 4.56 (n=6 cada). A skill venceu o controle na tarefa do toque duplo (5.0 vs. 0.71): as duas execuções de controle usaram Animated.timing na thread JS e um handler de toque simples, ignorando o Reanimated e o Gesture Handler instalados, enquanto as duas execuções com a skill usaram um toque do Gesture Handler, shared values e uma animação de transform/opacity.
Na tarefa de otimização, a skill não mudou o resultado: tratamento 4.09 contra controle 3.87. As quatro execuções fora do grupo de uma frase deixaram TouchableOpacity e o Image padrão do RN no lugar e não usaram expo-image, embora ele esteja instalado; corrigiram memoização, hoisting de estilos e a lista de avatares, mas trataram "manter o comportamento visível" como motivo para serem conservadoras. As duas execuções de uma frase passaram a usar Pressable, expo-image e FlashList e marcaram 5.0.
Na tarefa de análise, a skill lista a maioria dos problemas plantados (9/10 encontrados em 2 execuções, faltando apenas o ponto do TouchableOpacity) contra 6-8 de 10 do controle; a frase única encontrou todos os 10 nas duas execuções.
Custo: 110k tokens por execução com a skill vs. 98k do controle e 114k da frase única; a pasta da skill tem cerca de 40 arquivos (índice de regras mais arquivos de regras) que foram copiados para o projeto em toda execução de tratamento (42.7 arquivos novos por execução, em média).
Skill lida em 6/6 execuções de tratamento sem ser nomeada.

Pontuação por dimensão

Dimensão	Pontuação	Por quê
1_output_quality	4.56	Pontuação média de 4.56/5 com a skill (verificações programáticas; consulte a tabela por tarefa).
2_lift_vs_no_skill	3.77	+1.77 pontos vs. 2.79 sem a skill (n=2 por tarefa; abaixo de ~1 ponto é ruído).
3_trigger	5.0	Arquivo da skill lido em 6/6 execuções com a skill.
4_instructions_portability	3	SKILL.md mais um AGENTS.md compilado e cerca de 40 arquivos de regras; grande para o benefício observado.
5_efficiency	4	1.12x tokens (110k vs. 98k por execução) e 0.97x tempo (52s vs. 54s).
6_safety_hygiene	4	O scanner sinaliza 3 HIGH, todos falsos positivos de `${keyword}` no texto da documentação (ver security.md).

Limites deste teste

Verificações por regras no arquivo editado e no texto da análise; o app nunca foi compilado nem executado.
Uma única tela de fixture com problemas plantados, então a frase única que nomeia os mesmos problemas é um limite superior incomumente bem alinhado às verificações.
n=2 por célula.
n = 2 por grupo por tarefa: diferenças abaixo de cerca de 1 ponto são ruído.
A pontuação por regras mede o que as verificações conseguem ver; não julga bom gosto nem se o resultado é o melhor possível.

Segurança

Consulte security.md. Scan: 0 CRITICAL / 3 HIGH / 0 MEDIUM. Veredicto: segura para execução (sandbox sem rede). Um scan limpo não prova que uma skill é segura.

Conclusão

Útil para direcionar um agente à stack Reanimated/Gesture Handler ao adicionar gestos, e melhora o recall da análise, mas não faz o agente aplicar o conjunto inteiro de regras ao otimizar código existente; uma frase nomeando as bibliotecas saiu melhor aqui. Instale se você costuma adicionar trabalho de animação em RN.

Transcrição

Log de execuções: react-native-skills (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.)
Colunas: tarefa, grupo-execução, nota (0-5), tokens, segundos, verificações aprovadas, arquivos da skill abertos pelo agente.

t1-review control-1: nota 4.2, tokens 86173, s 48.3, verificações 2/2, nada aberto
t1-review control-2: nota 3.4, tokens 85790, s 52.6, verificações 2/2, nada aberto
t1-review oneliner-1: nota 5.0, tokens 98552, s 59.2, verificações 2/2, nada aberto
t1-review oneliner-2: nota 5.0, tokens 85716, s 49.5, verificações 2/2, nada aberto
t1-review treatment-1: nota 4.6, tokens 72170, s 47.4, verificações 2/2, abriu react-native-skills
t1-review treatment-2: nota 4.6, tokens 70886, s 50.8, verificações 2/2, abriu react-native-skills
t2-optimize control-1: nota 4.09, tokens 105482, s 60.5, verificações 5/7, nada aberto
t2-optimize control-2: nota 3.64, tokens 105599, s 61.9, verificações 4/7, nada aberto
t2-optimize oneliner-1: nota 5.0, tokens 151869, s 109.3, verificações 7/7, nada aberto

18 execuções, 3 artefatos

Resultado de exemplo

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 o Pro