vercel-react-native-skills

React Native Skills

React Native および Expo アプリケーション向けの包括的なベストプラクティスです。パフォーマンス、アニメーション、UI パターン、プラットフォーム固有の最適化など、複数のカテゴリにわたるルールを収録しています。

適用するタイミング

以下の場合にこれらのガイドラインを参照してください:

• React Native または Expo アプリを構築するとき
• リストとスクロールのパフォーマンスを最適化するとき
• Reanimated でアニメーションを実装するとき
• 画像やメディアを扱うとき
• ネイティブモジュールやフォントを設定するとき
• ネイティブ依存関係を含むモノレポプロジェクトを構成するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響	プレフィックス
1	リストパフォーマンス	CRITICAL	list-performance-
2	アニメーション	HIGH	animation-
3	ナビゲーション	HIGH	navigation-
4	UI パターン	HIGH	ui-
5	状態管理	MEDIUM	react-state-
6	レンダリング	MEDIUM	rendering-
7	モノレポ	MEDIUM	monorepo-
8	設定	LOW	fonts-, imports-

クイックリファレンス

1. リストパフォーマンス (CRITICAL)

• list-performance-virtualize - 大きなリストには FlashList を使用する
• list-performance-item-memo - リストアイテムのコンポーネントをメモ化する
• list-performance-callbacks - コールバックの参照を安定させる
• list-performance-inline-objects - インラインのスタイルオブジェクトを避ける
• list-performance-function-references - 関数をレンダリングの外に切り出す
• list-performance-images - リスト内の画像を最適化する
• list-performance-item-expensive - 重い処理をアイテムの外に移動する
• list-performance-item-types - 異種混在のリストにはアイテムタイプを使用する

2. アニメーション (HIGH)

• animation-gpu-properties - transform と opacity のみをアニメーションさせる
• animation-derived-value - 計算されるアニメーションには useDerivedValue を使用する
• animation-gesture-detector-press - Pressable の代わりに Gesture.Tap を使用する

3. ナビゲーション (HIGH)

• navigation-native-navigators - JS ナビゲーターではなくネイティブのスタックとネイティブのタブを使用する

4. UI パターン (HIGH)

• ui-expo-image - すべての画像に expo-image を使用する
• ui-image-gallery - 画像のライトボックスには Galeria を使用する
• ui-pressable - TouchableOpacity の代わりに Pressable を使用する
• ui-safe-area-scroll - ScrollView でセーフエリアを扱う
• ui-scrollview-content-inset - ヘッダーには contentInset を使用する
• ui-menus - ネイティブのコンテキストメニューを使用する
• ui-native-modals - 可能な場合はネイティブのモーダルを使用する
• ui-measure-views - measure() ではなく onLayout を使用する
• ui-styling - StyleSheet.create または Nativewind を使用する

5. 状態管理 (MEDIUM)

• react-state-minimize - 状態のサブスクリプションを最小限にする
• react-state-dispatcher - コールバックにはディスパッチャーパターンを使用する
• react-state-fallback - 最初のレンダリングでフォールバックを表示する
• react-compiler-destructure-functions - React Compiler のためにデストラクチャリングする
• react-compiler-reanimated-shared-values - コンパイラを使用して共有値を扱う

6. レンダリング (MEDIUM)

• rendering-text-in-text-component - テキストは Text コンポーネントで囲む
• rendering-no-falsy-and - 条件付きレンダリングで falsy な && を使用しない

7. モノレポ (MEDIUM)

• monorepo-native-deps-in-app - ネイティブ依存関係はアプリパッケージに置く
• monorepo-single-dependency-versions - パッケージ間で単一のバージョンを使用する

8. 設定 (LOW)

• fonts-config-plugin - カスタムフォントには設定プラグインを使用する
• imports-design-system-folder - デザインシステムのインポートを整理する
• js-hoist-intl - Intl オブジェクトの生成を巻き上げる

使い方

個別のルールファイルで詳細な説明とコード例を確認してください:

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

各ルールファイルには以下が含まれています:

• なぜそれが重要かの簡単な説明
• 誤ったコード例とその説明
• 正しいコード例とその説明
• 追加のコンテキストと参考資料

完全なコンパイル済みドキュメント

すべてのルールを展開した完全なガイドは AGENTS.md を参照してください。