Habilidades react-native-best-practices
📦

react-native-best-practices

Riesgo medio ⚙️ Comandos externos🔑 Variables de entorno📁 Acceso al sistema de archivos⚡ Contiene scripts🌐 Acceso a red

Optimizar el rendimiento de React Native

Los equipos de React Native a menudo pierden tiempo buscando la causa real de pantallas lentas, tirones, bundles grandes y fugas. Esta skill proporciona a Claude, Codex y Claude Code orientación específica para perfilar y corregir problemas de rendimiento.

Compatible con: Claude Codex Code(CC)
⚠️ 50 Deficiente
1

Descargar el ZIP de la habilidad

2

Subir en Claude

Ve a Configuración → Capacidades → Habilidades → Subir habilidad

3

Activa y empieza a usar

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/callstackincubator-react-native-best-practices.md Manifest firmado GET /api/skills/callstackincubator-react-native-best-practices/manifest Lockfile firmado GET /api/skills/callstackincubator-react-native-best-practices/lockfile

Pruébalo

Usando "react-native-best-practices". La pantalla de búsqueda se entrecorta mientras los usuarios escriben en un cuadro de filtro.

Resultado esperado:

La respuesta identifica presión sobre el hilo de JavaScript, recomienda perfilar React, sugiere diferir actualizaciones costosas de listas y revisa patrones de control de TextInput.

Usando "react-native-best-practices". La release de Android creció después de añadir varias dependencias.

Resultado esperado:

  • Crear un bundle de producción e inspeccionar el treemap.
  • Comprobar imports de barril, paquetes duplicados y polyfills grandes.
  • Revisar los assets nativos y la configuración de R8.

Usando "react-native-best-practices". Un equipo quiere añadir chunks remotos con Re.Pack.

Resultado esperado:

La respuesta explica cuándo ayuda la división de código, advierte sobre los tradeoffs de Hermes y señala requisitos de confianza en CDN, caché y control de versiones.

Auditoría de seguridad

Riesgo medio
v2 • 6/28/2026

This is a documentation-only React Native performance skill. Static analysis mostly matched Markdown fences, shell examples, and performance terminology, not executable skill code. Publication is acceptable with warnings for pipe-to-shell installation guidance and remote chunk loading examples.

29
Archivos escaneados
6,499
Líneas analizadas
11
hallazgos
2
Auditorías totales
Problemas de riesgo medio (2)
references/js-measure-fps.md:18references/js-measure-fps.md:74-76
Pipe-To-Shell Installer Guidance
The skill recommends installing Flashlight with a curl-to-bash command. This is not malicious, but it executes downloaded code without inspection and should be shown as a warning.
references/bundle-code-splitting.md:92-107references/bundle-code-splitting.md:141-149references/bundle-code-splitting.md:169-175
Remote Chunk Loading Requires Trust Controls
The code splitting guide shows production chunks loaded from a CDN and module federation examples. This is legitimate Re.Pack usage, but users need integrity and release controls.
Problemas de riesgo bajo (4)
SKILL.md:55-78SKILL.md:157-165references/native-android-16kb-alignment.md:55-84
Markdown Shell Examples Flagged As Execution
Most external command alerts are Markdown code fences that document normal React Native, Expo, Android, and iOS tooling. They are not executable skill logic.
references/js-concurrent-react.md:13references/js-concurrent-react.md:164
Keylogger Keyword False Positive
The critical keylogger alerts come from the word keystroke in a UI latency example. The content discusses blocked typing, not logging user input.
references/native-sdks-over-polyfills.md:17-25references/native-sdks-over-polyfills.md:83-99
Weak Crypto Alerts Are Performance Guidance
The crypto-related alerts are documentation about replacing slow JavaScript crypto packages with native implementations. No weak algorithm or credential handling was found.
references/bundle-analyze-js.md:152-160references/bundle-tree-shaking.md:13-17references/bundle-code-splitting.md:169-175references/bundle-hermes-mmap.md:33-37
Environment And Filesystem Access Are Configuration Examples
Environment and filesystem alerts are examples for build flags, cold-start detection, cache paths, mmap explanation, and local dependency inspection. No secret exfiltration was found.

Factores de riesgo

⚙️ Comandos externos (3)
SKILL.md:69-78 references/js-measure-fps.md:13-20 references/native-android-16kb-alignment.md:55-58
🔑 Variables de entorno (3)
references/bundle-analyze-js.md:152-160 references/bundle-tree-shaking.md:13-17 references/native-measure-tti.md:87-89
📁 Acceso al sistema de archivos (3)
references/bundle-hermes-mmap.md:33-37 references/bundle-code-splitting.md:169-175 references/native-android-16kb-alignment.md:78-84
⚡ Contiene scripts (3)
references/bundle-code-splitting.md:21-24 references/bundle-code-splitting.md:67-69 references/bundle-tree-shaking.md:19-35
🌐 Acceso a red (3)
references/js-measure-fps.md:18 references/bundle-code-splitting.md:92-96 references/bundle-code-splitting.md:169-175

Patrones detectados

Pipe-To-Shell Command PatternRuntime Code Loading From Remote Locations
Auditado por: codex Ver historial de auditorías →

Puntuación de calidad

50
Arquitectura
100
Mantenibilidad
87
Contenido
70
Comunidad
47
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

Diagnosticar pantallas con tirones

Determinar si los frames perdidos provienen de trabajo en JavaScript, renderizado nativo, renderizado de listas o configuración de animaciones.

Reducir el tamaño de la release

Analizar el tamaño del bundle de JavaScript y nativo, y luego elegir correcciones prácticas para imports, assets, R8 y tree shaking.

Revisar decisiones de rendimiento nativo

Evaluar Turbo Modules, decisiones sobre SDK nativos, comportamiento de threading y requisitos de la plataforma Android antes del lanzamiento.

Prueba estos prompts

Encontrar la guía adecuada 
Mi app de React Native se siente lenta durante el desplazamiento y la entrada de texto. Usa esta skill para elegir las mejores referencias y explicar qué revisar primero.
Perfilar una pantalla 
Revisa esta pantalla para detectar problemas de rendimiento en React Native. Céntrate en re-renderizados, renderizado de listas, cómputo costoso y trabajo de animación.
Planificar la reducción del bundle 
Crea un plan de reducción del tamaño del bundle para mi app de React Native. Incluye pasos de medición, posibles causantes y un orden seguro de optimización.
Auditar la arquitectura nativa 
Revisa mi módulo nativo y mi arquitectura de inicio. Usa esta skill para evaluar TTI, threading, Hermes mmap, propiedad de memoria y riesgos de alineación con Android.

Mejores prácticas

  • Medir primero con builds similares a producción antes de cambiar la arquitectura o las bibliotecas.
  • Optimizar primero la ruta de mayor impacto, normalmente FPS, inicio, tamaño del bundle o memoria.
  • Tratar los comandos de shell y los ejemplos de carga remota como orientación que necesita revisión del proyecto.

Evitar

  • No aplicar todas las optimizaciones sin confirmar el cuello de botella real.
  • No migrar a Re.Pack ni a chunks remotos solo por preocupaciones menores sobre el bundle.
  • No ejecutar comandos de instalación desde la documentación sin verificar la fuente.

Preguntas frecuentes

¿Esta skill ejecuta herramientas de perfilado automáticamente?
No. Explica cómo usar herramientas de perfilado y cómo interpretar resultados comunes.
¿Puede ayudar con Expo y apps bare de React Native?
Sí. Incluye orientación para Expo, React Native CLI, Hermes, Re.Pack, iOS y Android.
¿La skill trata solo sobre el rendimiento de JavaScript?
No. También cubre módulos nativos, threading, tiempo de inicio, memoria nativa, assets y comprobaciones de release en Android.
¿Por qué el riesgo de seguridad es medio?
La mayoría de las alertas son falsos positivos, pero la documentación incluye ejemplos de pipe-to-shell y carga remota de código.
¿Reemplaza las pruebas de rendimiento humanas?
No. Los usuarios aún necesitan dispositivos reales, builds de release, salida de perfiladores y criterios de aceptación específicos del producto.
¿Qué herramientas pueden usar esta skill?
El informe la marca como compatible con Claude, Codex y Claude Code.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-best-practices/

Ref.

main

Estructura de archivos

📁 references/

📁 images/

📄 bundle-treemap-source-map-explorer.png

📄 controlled-textinput-pingpong.png

📄 devtools-flamegraph.png

📄 emerge-xray-ios.png

📄 expo-atlas-treemap.png

📄 flashlight-flatlist-vs-flashlist.png

📄 fps-drop-graph.png

📄 memory-heap-snapshot.png

📄 tti-warm-start-diagram.png

📄 view-hierarchy-flattening.png

📄 xcode-instruments-templates.png

📄 xcode-thread-view.png

📄 bundle-analyze-app.md

📄 bundle-analyze-js.md

📄 bundle-barrel-exports.md

📄 bundle-code-splitting.md

📄 bundle-hermes-mmap.md

📄 bundle-library-size.md

📄 bundle-native-assets.md

📄 bundle-r8-android.md

📄 bundle-tree-shaking.md

📄 js-animations-reanimated.md

📄 js-atomic-state.md

📄 js-concurrent-react.md

📄 js-lists-flatlist-flashlist.md

📄 js-measure-fps.md

📄 js-memory-leaks.md

📄 js-profile-react.md

📄 js-react-compiler.md

📄 js-uncontrolled-components.md

📄 native-android-16kb-alignment.md

📄 native-measure-tti.md

📄 native-memory-leaks.md

📄 native-memory-patterns.md

📄 native-platform-setup.md

📄 native-profiling.md

📄 native-sdks-over-polyfills.md

📄 native-threading-model.md

📄 native-turbo-modules.md

📄 native-view-flattening.md

📄 SKILL.md