スキル react-native-best-practices
📦
react-native-best-practices
コンテンツリビジョン r1 安全 📁 ファイルシステムへのアクセス🔑 環境変数⚡ スクリプトを含む⚙️ 外部コマンド🌐 ネットワークアクセス
React Nativeアプリのパフォーマンスを最適化
React Nativeアプリでは、起動の遅延、フレーム落ち、過剰な再レンダリング、メモリ使用量の増加、バンドルサイズの肥大化が発生することがあります。このスキルは、JavaScript、iOS、Android、Hermes、Expo全体にわたる測定、診断、対象を絞った最適化、検証をガイドします。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "react-native-best-practices" from https://skillstore.io/skills/callstackincubator-react-native-best-practices.md and its manifest at https://skillstore.io/api/skills/callstackincubator-react-native-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「react-native-best-practices」を使用しています。 商品リストのスクロール中に42 FPSまで低下します。
期待される結果:
- 所見: レンダリングのプロファイリングにより、スクロール中に項目が繰り返し更新されていることが示されています。
- 推奨事項: 項目のpropsを安定させ、適切な仮想化リストを使用してください。
- 検証: 同じ操作を繰り返し、フレームレートと再レンダリング回数を比較してください。
「react-native-best-practices」を使用しています。 Hermesを使用するAndroidで、コールドスタートに3.4秒かかります。
期待される結果:
- 所見: 起動マーカーによって、ネイティブ初期化、バンドル読み込み、意味のある最初のレンダリングが区別されています。
- 推奨事項: 推測に基づくプリロードを追加する前に、測定された中で最も時間がかかるフェーズに対処してください。
- 検証: 同じリリース端末で複数回のコールドスタートを比較してください。
「react-native-best-practices」を使用しています。 複数のライブラリを追加した後、リリースアプリケーションのサイズが増加しました。
期待される結果:
- 所見: バンドルおよびアプリケーションサイズのレポートにより、新たに追加されたJavaScript、ネイティブ、アセットのうち、最も影響の大きい要素が特定されています。
- 推奨事項: 未使用のインポートを削除し、代替となる依存関係を比較して、R8とアセットの設定を確認してください。
- 検証: 同じリリースバリアントを再ビルドし、ダウンロードサイズとインストールサイズを比較してください。
セキュリティ監査
安全v6 • 2026/7/12 バージョン別レポートを開く
191件の静的アラートはすべて、Markdown、固定パスの例、通常のReact Nativeツールコマンド、公開リンク、およびパフォーマンス用語による誤検知です。プロンプトインジェクション、認証情報の窃取、隠密な偵察、悪意のあるコード実行、またはデータ流出の意図は確認されませんでした。
32
スキャンされたファイル
6,483
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
📁 ファイルシステムへのアクセス (15)
POWER.md:63 POWER.md:142 references/bundle-barrel-exports.md:221 references/bundle-code-splitting.md:214 references/bundle-code-splitting.md:221 references/bundle-hermes-mmap.md:4 references/bundle-hermes-mmap.md:35 references/bundle-hermes-mmap.md:135 references/native-android-16kb-alignment.md:81 references/native-android-16kb-alignment.md:84 references/native-measure-tti.md:221 references/native-platform-setup.md:112 SKILL.md:129 SKILL.md:187 SKILL.md:234
⚡ スクリプトを含む (6)
⚙️ 外部コマンド (26)
references/bundle-code-splitting.md:115-134 references/bundle-code-splitting.md:231-235 references/bundle-code-splitting.md:235-241 references/bundle-tree-shaking.md:27-36 SKILL.md:37 SKILL.md:38 SKILL.md:39 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:61 SKILL.md:62 SKILL.md:69-77 SKILL.md:77-79 SKILL.md:79 SKILL.md:81 SKILL.md:83 SKILL.md:89-94 SKILL.md:94-103 SKILL.md:103-106 SKILL.md:106-114 SKILL.md:114-125 SKILL.md:125-148 SKILL.md:148-153 SKILL.md:153-163 SKILL.md:163-178
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/callstackincubator-react-native-best-practices/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/callstackincubator-react-native-best-practices?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/callstackincubator-react-native-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/callstackincubator-react-native-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/callstackincubator-react-native-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
callstackincubator. (2026). react-native-best-practices security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/callstackincubator-react-native-best-practices/audits/6BibTeX形式の引用
@techreport{callstackincubator-callstackincubator-react-native-best-practices-2026,
author = {callstackincubator},
title = {react-native-best-practices security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/callstackincubator-react-native-best-practices/audits/6},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-native-best-practices security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "callstackincubator"
date-released: "2026-07-12"
url: "https://skillstore.io/skills/callstackincubator-react-native-best-practices/audits/6"
identifiers:
- type: other
value: "skillstore:callstackincubator-react-native-best-practices:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 50
アーキテクチャ
85
保守性
87
コンテンツ
70
コミュニティ
83
仕様準拠
作成できるもの
遅い画面を修正
遅延のある操作をプロファイリングし、再レンダリングまたはリストのボトルネックを特定して、対象を絞った変更を検証します。
起動時間とバンドルコストを削減
コールドスタートとパッケージサイズを測定し、Hermes、バンドル、アセット、ネイティブの最適化に優先順位を付けます。
パフォーマンスのリグレッションをレビュー
リリース間の根拠を比較し、検証基準を含む優先順位付きの改善計画を作成します。
これらのプロンプトを試す
画面をレビュー
このReact Native画面について、明らかなパフォーマンスリスクをレビューしてください。提供されたコードとプロジェクトのバージョンを使用してください。3つの変更に優先順位を付け、それぞれの測定方法を説明してください。
フレーム落ちを診断
[interaction]中のフレーム落ちを診断してください。次のプロファイラー結果を使用してください: [metrics]。考えられる原因を特定し、不足している根拠を求め、測定、変更、再測定の手順を提案してください。
起動とバンドルを最適化
[Hermes or JSC]を使用する、このReact Native [version]アプリ向けの起動およびバンドル最適化計画を作成してください。ベースライン指標を比較し、影響とリスクに基づいて変更に優先順位を付けてください。
リグレッションを調査
JavaScript、ネイティブスレッド、メモリ、バンドル配信の各層にわたって、このリグレッションを調査してください。[trace]、[render profile]、[build data]の相関関係を分析してください。検証基準とロールバック基準を含む最小限の修正を推奨してください。
ベストプラクティス
- コードを変更する前に再現可能なベースラインを取得し、各変更後に同じ操作を繰り返してください。
- バージョン固有のガイダンスを適用する前に、React Nativeとライブラリのバージョンを確認してください。
- 実行前にローカルコマンドと依存関係の変更をレビューしてください。特に、リリースビルドとサードパーティ製プロファイリングツールには注意が必要です。
回避
- 再レンダリングまたはフレームレートに関する測定結果がない状態で、メモ化、状態管理の書き換え、コンパイラの変更を推奨しないでください。
- 結果の要因を特定しにくくなり、リグレッションの切り分けも困難になるため、すべての最適化を同時に適用しないでください。
- ユーザーが制御する、または信頼できないオリジンからリモートJavaScriptチャンクを読み込まないでください。
よくある質問
このスキルは、どのようなパフォーマンス領域を対象としていますか？
フレームレート、再レンダリング、起動時間、バンドル、アプリケーションサイズ、メモリ、アニメーション、リスト、TextInput、ネイティブモジュール、スレッド処理を対象としています。
Expoプロジェクトに対応していますか？
はい。プロジェクトのバージョンが対応している場合、Expo固有のバンドル分析、tree-shaking、prebuild、プロファイリングに関するガイダンスが含まれます。
プロジェクトを自動的に変更しますか？
いいえ。対象を絞った変更とコマンドを推奨します。各変更をレビューし、通常の開発ワークフローに沿って実行してください。
どの測定値を提供すればよいですか？
再現可能な操作、端末の詳細、ビルドタイプ、プロジェクトのバージョン、ベースライン指標、プロファイラーの出力、最近の関連する変更を提供してください。
ネイティブのパフォーマンス問題を診断できますか？
はい。Xcode Instruments、Android Studio Profiler、ネイティブスレッド処理、メモリ所有権、Turbo Modules、ビュー階層、アラインメントを対象としています。
バンドルサイズの削減にリモートチャンクは推奨されますか？
既存のリモートコードアーキテクチャ、または明示的に採用されたリモートコードアーキテクチャに限られます。ファーストパーティの署名済みアーティファクト、信頼できるHTTPSオリジン、固定されたマニフェスト、厳格な検証を使用してください。
開発者情報
ライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
リポジトリ
https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-best-practices/参照
d71c7417a35d5c2624161bd2fe8de8a41a362128
メンテナンスの新しさ
2026/7/18
利用状況
4 ダウンロード · 209 閲覧
ファイル構成
📁 agents/
📄 POWER.md
📁 images/
📄 bundle-treemap-source-map-explorer.png
📄 controlled-textinput-pingpong.png
📄 flashlight-flatlist-vs-flashlist.png
📄 view-hierarchy-flattening.png
📄 xcode-instruments-templates.png
📄 js-lists-flatlist-flashlist.md
📄 js-uncontrolled-components.md
📄 native-android-16kb-alignment.md
📄 native-sdks-over-polyfills.md
📄 SKILL.md