Навыки react-native-best-practices
📦

react-native-best-practices

Средний риск ⚙️ Внешние команды🔑 Переменные окружения📁 Доступ к файловой системе⚡ Содержит скрипты🌐 Доступ к сети

Оптимизация производительности React Native

Команды React Native часто теряют время на поиск настоящей причины медленных экранов, рывков, больших бандлов и утечек. Этот навык дает Claude, Codex и Claude Code целевые рекомендации по профилированию и исправлению проблем производительности.

Поддерживает: Claude Codex Code(CC)
⚠️ 50 Плохо
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Ресурсы для AI-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

Markdown-детали GET /skills/callstackincubator-react-native-best-practices.md Подписанный manifest GET /api/skills/callstackincubator-react-native-best-practices/manifest Подписанный lockfile GET /api/skills/callstackincubator-react-native-best-practices/lockfile

Протестировать

Использование «react-native-best-practices». Экран поиска подвисает, пока пользователи вводят текст в поле фильтра.

Ожидаемый результат:

Ответ выявляет нагрузку на JavaScript thread, рекомендует профилирование React, предлагает отложить дорогие обновления списка и проверяет паттерны управления TextInput.

Использование «react-native-best-practices». Android-релиз вырос после добавления нескольких зависимостей.

Ожидаемый результат:

  • Соберите production-бандл и изучите treemap.
  • Проверьте barrel imports, дублирующиеся пакеты и крупные polyfills.
  • Проверьте нативные ассеты и конфигурацию R8.

Использование «react-native-best-practices». Команда хочет добавить удаленные чанки с Re.Pack.

Ожидаемый результат:

Ответ объясняет, когда code splitting помогает, предупреждает о компромиссах Hermes и отмечает требования к доверию CDN, кэшированию и контролю версий.

Аудит безопасности

Средний риск
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
Просканировано файлов
6,499
Проанализировано строк
11
результаты
2
Всего аудитов
Проблемы среднего риска (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.
Проблемы низкого риска (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.

Факторы риска

⚙️ Внешние команды (3)
SKILL.md:69-78 references/js-measure-fps.md:13-20 references/native-android-16kb-alignment.md:55-58
🔑 Переменные окружения (3)
references/bundle-analyze-js.md:152-160 references/bundle-tree-shaking.md:13-17 references/native-measure-tti.md:87-89
📁 Доступ к файловой системе (3)
references/bundle-hermes-mmap.md:33-37 references/bundle-code-splitting.md:169-175 references/native-android-16kb-alignment.md:78-84
⚡ Содержит скрипты (3)
references/bundle-code-splitting.md:21-24 references/bundle-code-splitting.md:67-69 references/bundle-tree-shaking.md:19-35
🌐 Доступ к сети (3)
references/js-measure-fps.md:18 references/bundle-code-splitting.md:92-96 references/bundle-code-splitting.md:169-175

Обнаруженные паттерны

Pipe-To-Shell Command PatternRuntime Code Loading From Remote Locations
Аудитор:: codex Посмотреть историю аудитов →

Оценка качества

50
Архитектура
100
Сопровождаемость
87
Контент
70
Сообщество
47
Безопасность
83
Соответствие спецификации

Что вы можете построить

Диагностика экранов с рывками

Определить, вызваны ли пропущенные кадры работой JavaScript, нативным рендерингом, рендерингом списков или настройкой анимаций.

Уменьшение размера релиза

Проанализировать размер JavaScript- и нативного бандла, затем выбрать практичные исправления для импортов, ассетов, R8 и tree shaking.

Ревью решений по нативной производительности

Оценить Turbo Modules, выбор нативных SDK, поведение потоков и требования платформы Android перед выпуском.

Попробуйте эти промпты

Найти подходящее руководство 
Мое приложение React Native кажется медленным во время прокрутки и ввода. Используй этот навык, чтобы выбрать лучшие справочные материалы и объяснить, что проверить сначала.
Профилировать экран 
Проверь этот экран на проблемы производительности React Native. Сосредоточься на повторных рендерах, рендеринге списков, дорогих вычислениях и работе анимаций.
Спланировать уменьшение бандла 
Создай план уменьшения размера бандла для моего приложения React Native. Включи шаги измерения, вероятные источники проблем и безопасный порядок оптимизации.
Аудит нативной архитектуры 
Проверь мой нативный модуль и архитектуру запуска. Используй этот навык, чтобы оценить риски TTI, многопоточности, Hermes mmap, владения памятью и соответствия требованиям Android.

Лучшие практики

  • Сначала измеряйте на сборках, похожих на production, прежде чем менять архитектуру или библиотеки.
  • Сначала оптимизируйте путь с наибольшим эффектом, обычно FPS, запуск, размер бандла или память.
  • Рассматривайте shell-команды и примеры удаленной загрузки как рекомендации, которые требуют проверки в проекте.

Избегать

  • Не применяйте каждую оптимизацию без подтверждения реального узкого места.
  • Не мигрируйте на Re.Pack или удаленные чанки только из-за незначительных проблем с размером бандла.
  • Не запускайте команды установки из документации без проверки источника.

Часто задаваемые вопросы

Запускает ли этот навык инструменты профилирования автоматически?
Нет. Он объясняет, как использовать инструменты профилирования и как интерпретировать распространенные результаты.
Может ли он помочь с Expo и bare-приложениями React Native?
Да. Он включает рекомендации для Expo, React Native CLI, Hermes, Re.Pack, iOS и Android.
Этот навык только о производительности JavaScript?
Нет. Он также охватывает нативные модули, многопоточность, время запуска, нативную память, ассеты и проверки Android-релиза.
Почему риск безопасности средний?
Большинство предупреждений являются ложными срабатываниями, но документация включает примеры pipe-to-shell и удаленной загрузки кода.
Заменяет ли он ручное тестирование производительности?
Нет. Пользователям по-прежнему нужны реальные устройства, release-сборки, вывод профилировщика и критерии приемки, специфичные для продукта.
Какие инструменты могут использовать этот навык?
В отчете указано, что он совместим с Claude, Codex и Claude Code.

Сведения для разработчиков

Лицензия

MIT

Репозиторий

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

Ссылка

main

Структура файлов

📁 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