スキル 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でアップロード

設定 → 機能 → スキル → スキルをアップロード に移動

3

オンにして使い始める

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

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」を使用しています。 The search screen stutters while users type into a filter box.

期待される結果:

回答では、JavaScript スレッドへの負荷を特定し、React プロファイリングを推奨し、高コストなリスト更新の延期を提案し、TextInput の制御パターンを確認します。

「react-native-best-practices」を使用しています。 The Android release grew after adding several dependencies.

期待される結果:

  • 本番用バンドルをビルドし、treemap を調査します。
  • barrel imports、重複パッケージ、大きな polyfills を確認します。
  • ネイティブアセットと R8 設定をレビューします。

「react-native-best-practices」を使用しています。 A team wants to add remote chunks with 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 とネイティブのバンドルサイズを分析し、imports、assets、R8、tree shaking に対する実用的な修正を選択します。

ネイティブパフォーマンス上の選択をレビューする

出荷前に、Turbo Modules、ネイティブ SDK の選択、threading の挙動、Android プラットフォーム要件を評価します。

これらのプロンプトを試す

適切なガイドを見つける 
私の React Native アプリは、スクロール中と入力中に遅く感じます。このスキルを使って最適なリファレンスを選び、最初に何を確認すべきか説明してください。
画面をプロファイルする 
この画面を React Native のパフォーマンス問題の観点でレビューしてください。再レンダリング、リストレンダリング、高コストな計算、アニメーション処理に注目してください。
バンドル削減を計画する 
私の React Native アプリ向けに、バンドルサイズ削減計画を作成してください。測定手順、疑わしい原因、安全な最適化順序を含めてください。
ネイティブアーキテクチャを監査する 
私のネイティブモジュールと起動アーキテクチャをレビューしてください。このスキルを使って、TTI、threading、Hermes mmap、memory ownership、Android alignment のリスクを評価してください。

ベストプラクティス

  • アーキテクチャやライブラリを変更する前に、まず本番に近いビルドで測定します。
  • 通常は FPS、起動時間、バンドルサイズ、メモリなど、最も影響の大きい経路から最適化します。
  • シェルコマンドやリモートロードの例は、プロジェクトでのレビューが必要なガイダンスとして扱います。

回避

  • 実際のボトルネックを確認せずに、すべての最適化を適用しないでください。
  • 軽微なバンドル上の懸念だけを理由に、Re.Pack や remote chunks へ移行しないでください。
  • ソースを確認せずに、ドキュメント内のインストーラーコマンドを実行しないでください。

よくある質問

このスキルはプロファイリングツールを自動で実行しますか？
いいえ。プロファイリングツールの使い方と、一般的な結果の解釈方法を説明します。
Expo と bare React Native アプリの両方に役立ちますか？
はい。Expo、React Native CLI、Hermes、Re.Pack、iOS、Android 向けのガイダンスが含まれています。
このスキルは JavaScript パフォーマンスだけを対象にしていますか？
いいえ。ネイティブモジュール、threading、起動時間、ネイティブメモリ、assets、Android リリースチェックも扱います。
セキュリティリスクが medium なのはなぜですか？
ほとんどの警告は誤検知ですが、ドキュメントには pipe-to-shell とリモートコードロードの例が含まれています。
人によるパフォーマンステストの代わりになりますか？
いいえ。ユーザーには引き続き、実機、リリースビルド、プロファイラー出力、製品固有の受け入れ基準が必要です。
どのツールでこのスキルを使用できますか？
レポートでは、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