react-native-best-practices

react-native-best-practices skill の概要

この skill は何のためのものか

react-native-best-practices skill は、React Native のパフォーマンス最適化を実務向けに整理したガイドです。起動が遅い、フレーム落ちがある、再レンダリングが重い、メモリリークが起きる、バンドルが肥大化しているといった、実際のアプリの問題を診断して修正するために使います。一般的なプロンプトより一歩踏み込んで、症状に対してどの修正を選ぶべきかを判断しやすい react-native-best-practices ガイドが欲しいときに特に有効です。

向いている読者とユースケース

React Native または Expo アプリを扱っていて、FPS、TTI、Hermes の挙動、bridge のオーバーヘッド、FlashList、native modules、アニメーションのカクつきについて助けが必要なら、この react-native-best-practices skill が向いています。パフォーマンス回帰をレビューするエンジニア、リリース候補を最適化したいチーム、react-native-best-practices for Performance Optimization 向けのスコープを絞ったプロンプトを書きたい場合にも適しています。

何が違うのか

この repo は、素早い参照と深い掘り下げの両方に対応できる構成です。クイックパターン、設定スニペット、コマンドに加え、バンドル解析、スレッド、メモリリーク、native profiling などのテーマについて、より踏み込んだ参照先も用意されています。そのため、抽象的な助言ではなく具体的な証拠へ agent を導ける点で、ゆるいプロンプトよりずっと実践的です。

react-native-best-practices skill の使い方

インストールして有効化する

agent 環境でディレクトリの install フローを使って react-native-best-practices install を実行し、その後、症状とプラットフォームを明示したタスクで呼び出してください。repo のデフォルトプロンプトは Use $react-native-best-practices to diagnose and improve React Native performance. です。もしツールチェーンが package 単位の skill インストールに対応しているなら、repository path は callstackincubator/agent-skills、skill の場所は skills/react-native-best-practices です。

正しい問題設定を与える

react-native-best-practices usage で良い結果を得るには、プラットフォーム、症状、制約を絞って伝えるのが基本です。たとえば「アプリのパフォーマンスを改善して」ではなく、「Android 上の Reanimated bottom sheet でフレーム落ちを減らしたい」のように聞きます。何を変更したのか、どこが遅いのか、すでに何を計測したのかも含めてください。そうすると、skill が問題を適切な reference に素早く結び付けやすくなります。

まず読むべきファイル

最初に SKILL.md を読み、次に POWER.md、agents/openai.yaml、そして問題に最も関連する reference ファイルを確認してください。JS バンドル関連なら references/bundle-analyze-js.md、references/bundle-barrel-exports.md、references/bundle-code-splitting.md を優先します。実行時のカクつきや render 問題なら references/js-measure-fps.md、references/js-profile-react.md、references/js-lists-flatlist-flashlist.md を読みます。native の起動やメモリ周りなら references/native-measure-tti.md、references/native-threading-model.md、references/native-memory-leaks.md を確認してください。

あいまいな目標を使えるプロンプトに変える

この skill に強いプロンプトは、アプリ種別、RN のバージョン、プラットフォーム、計測指標、再現手順、profiler の出力を含みます。たとえば「iOS 17、RN 0.78、Hermes 有効の React Native アプリを監査してください。ナビゲーション中心の画面を 3 つ追加してから TTI が悪化しました。バンドルサイズ、起動時の import、native 初期化順を調べ、検証手順付きで最小限の変更案を提案してください。」のように書くと、react-native-best-practices usage から的を絞った検証可能な出力を引き出しやすくなります。

react-native-best-practices skill FAQ

これはパフォーマンス作業専用ですか？

はい、基本的にはそうです。react-native-best-practices skill は、一般的なアーキテクチャ設計、機能設計、UI コピーではなく、パフォーマンス関連の問題を診断して改善するためのものです。遅延、メモリ、バンドルサイズ、描画コストと無関係な作業なら、通常の React Native 用プロンプトで十分なことが多いです。

通常のデバッグや profiling の代わりになりますか？

いいえ。調査の質は上がりますが、必要なのはやはり実データです。profiler trace、bundle report、ログ、再現手順が欠かせません。この skill は何を調べるべきか、どのトレードオフが重要かを整理する助けにはなりますが、証拠なしにアプリのボトルネックを推測することはできません。

初心者にも向いていますか？

はい、理論中心のドキュメントより、案内付きの react-native-best-practices guide が欲しいなら向いています。初心者が最も得をするのは、具体的な症状を貼って、優先順位付きのチェックリストを求める使い方です。上級者は、repo 内の具体的な reference や最適化パスからさらに価値を引き出せます。

使わないほうがいいのはいつですか？

プロダクト判断、バックエンドの遅延分析、React Native と無関係な JavaScript のトラブルシューティングの代わりには使わないでください。また、パフォーマンスの文脈がないまま、単に手早いコードスタイルの答えだけ欲しい場合にも不向きです。その場合は、この skill を使ってもオーバーヘッドが増えるだけで、結果は良くなりません。

react-native-best-practices skill を改善する方法

計測できる症状から始める

最良の出力は、何が壊れていて、どこで起きていて、どうやって分かったのかが書かれた入力から生まれます。「analytics SDK の初期化を追加したあと起動時間が 1.8 秒増えた」「200 行の画像サムネイル付き FlashList でスクロールが引っかかる」といった具合に伝えてください。症状が具体的であるほど、react-native-best-practices for Performance Optimization は探索範囲を適切に絞り込めます。

環境制約を含める

Hermes、Expo、Reanimated、Fabric、Turbo Modules、独自の native stack を使っているかを明記してください。RN 0.78 と 0.79+ のようなバージョン制約も書いてください。提案内容はリリースによって変わることがあるためです。これは install の判断、起動時の挙動、そして修正に見合う複雑さかどうかを考えるうえで重要です。

根拠のある修正案を求める

単なるアイデアではなく、検証手順付きの提案を依頼してください。たとえば「各提案について、どの指標が改善すべきか、どう検証するか、どんな回帰に注意すべきかも教えてください」と聞くとよいです。そうすると曖昧な助言が減り、チケットや PR 計画に落とし込みやすくなります。

最初の回答から反復する

最初の結果が広いなら、profiler trace、bundle analyzer の出力、または最小限のコードサンプルを追加して再度依頼してください。そのうえで、skill に原因候補を順位付けさせ、高インパクトな変更と低リスクな整理を切り分けます。この反復こそが react-native-best-practices を最も有効に使う方法です。あいまいな直感を、具体的な最適化計画へ変えてくれます。