vercel-react-native-skills
React Native と Expo のアプリを書く・直すときに、一覧の速さ、動き、画面の移動、ネイティブの部品、状態の持ち方など 36 件の規則に沿わせる。規則ごとに悪い例と良い例のコードが付く
npx skills add vercel-labs/agent-skills/vercel-react-native-skills入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 262,500
- 実用度
- 25
- GitHub star
- 33,634
- 最終更新
- 2026/10/29
頼み方の例
そのままコピーして使えますvercel-react-native-skillsを使って、このアプリの一覧画面がスクロールで引っかかる原因を探してください。一覧の性能の規則（list-performance-）から当てはまるものを挙げ、該当するコードの場所と直し方を示してください。コードの書き換えはまだしないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
いつ使うか
React Native か Expo でモバイルアプリを書く・直すときのスキルです。説明文は、部品を作るとき、一覧の性能を詰めるとき、動きを実装するとき、ネイティブのモジュールを扱うときに呼ぶよう書いています。
公開しているのは Vercel です（metadata の作者は vercel、版は 1.0.0）。同じ公開元の vercel-react-best-practices と同じ作りで、規則が 1 件ずつ別のファイルに分かれています。
- 規則のファイル（rules/ の中）
- 36 件
- 同梱ファイル（2026-10-23 時点）
- 41 件
- SKILL.md の大きさ（2026-10-23 時点）
- 4,439 バイト
- 全規則をまとめた AGENTS.md（2026-10-23 時点）
- 約 72KB
SKILL.md は目次で、中身は規則のファイル
SKILL.md にあるのは、分類の表と規則の名前の一覧だけです。詳しい説明とコードは rules/ の規則のファイルにあり、必要なものだけ読ませる作りです。SKILL.md によると、規則のファイルは「なぜ大事か」「悪い例」「良い例」「補足」の形で書かれています。
全部を 1 枚にまとめた AGENTS.md（73,771 バイト、2026-10-23 時点）も同梱されています。同梱の 41 件の内訳は、rules/ の 38 件（規則 36 件と、分類の説明 _sections.md・雛形 _template.md）、AGENTS.md、README.md、metadata.json です。
規則の分類
SKILL.md は 8 分類に重みを付けて並べています。
| 順 | 分類 | 重み | 接頭辞 |
|---|---|---|---|
| 1 | 一覧の性能 | CRITICAL | list-performance- |
| 2 | 動き | HIGH | animation- |
| 3 | 画面の移動 | HIGH | navigation- |
| 4 | 画面の部品 | HIGH | ui- |
| 5 | 状態の管理 | MEDIUM | react-state- |
| 6 | 描画 | MEDIUM | rendering- |
| 7 | モノレポ | MEDIUM | monorepo- |
| 8 | 設定 | LOW | fonts-、imports- |
落ちる規則が 2 つある
いちばん先に知っておきたいのは描画の 2 件です。文字列を <View> の直下に置くと、React Native は落ちます。必ず <Text> で包みます。
{count && <Text>…</Text>} のように書くと、count が 0 や空の文字列のときに、その値を <Text> の外で描こうとして本番で落ちます。三項演算子で null を返すか、!! で真偽値にするよう書かれています。eslint-plugin-react の react/jsx-no-leaked-render で機械的に見つけられる、とも添えられています。
一覧の規則が 8 件
一覧の性能は 8 件あり、SKILL.md が最も重く見ている分類です（下は主な 5 件）。
list-performance-virtualize短い一覧でも、ScrollView に並べず LegendList か FlashList を使うlist-performance-function-references一覧に渡す前に map や filter で新しい配列を作らない。変換は項目の中でlist-performance-item-memo項目には文字列や数値などの値を渡し、memo()を効かせるlist-performance-item-expensive項目の中でデータを取得しない。Context より zustand の選択関数list-performance-item-types形の違う項目にはtypeを持たせ、getItemTypeで使い回しの単位を分ける
ネイティブの部品を優先する
画面の移動と部品の規則は、JavaScript で作った部品よりネイティブの部品を使え、という方向でそろっています。
- 画面の移動
@react-navigation/stackではなく native-stack。タブも native のもの - メニュー自作のメニューではなく zeego でネイティブのメニュー
- 下から出る画面JavaScript の bottom sheet ではなく
<Modal>の formSheet - 画像React Native の
Imageではなく expo-image。拡大表示は Galeria - 押せる部品
TouchableOpacityではなくPressable - 安全な領域SafeAreaView で包まず
contentInsetAdjustmentBehavior="automatic"
使わないほうがいいとき
Web の React
規則は React Native の部品と API（<Text>、FlashList、Reanimated、native-stack など）に結び付いています。Web の React や Next.js なら、同じ公開元の vercel-react-best-practices のほうです。部品の組み立て方の設計なら vercel-composition-patterns があります。
動きの質を見直したい
このスキルの動きの規則は 3 件で、速く動かすための書き方（transform と opacity を動かす、など）が中心です。動きの長さや緩急が適切かを見たいなら、review-animations のような見直し用のスキルが向きます。
ネイティブのライブラリを増やせない
規則の多くは、特定のライブラリ（LegendList か FlashList、Reanimated、Gesture Handler、expo-image、zeego、Galeria など）を入れる前提です。依存を増やせないプロジェクトでは、勧めのまま当てられない規則が出ます。
注意点
解析で分かったこと
SKILL.md の解析では、外部通信・シェル実行・ファイル書き換えの記述は見つかっていません。同梱ファイルは 41 件です（2026-10-23 時点）。規則のファイルには、書体の規則のあとに npx expo prebuild を流してアプリを作り直すよう書かれています。コードを書き換えるのは、頼んだときにエージェントがすることです。
件数と重みが、ファイルによって食い違う
分類の数と重みもそろっていません。SKILL.md は 8 分類で「一覧の性能」を CRITICAL の 1 番にしていますが、_sections.md と AGENTS.md は 14 分類で、「描画」を CRITICAL の 1 番、一覧を HIGH にしています。metadata.json の説明は「13 分類」です。優先順位を決めるときは、どれを基準にするかを先に決めておきます。
SKILL.md の一行説明と規則の中身が違うものがある
SKILL.md の一覧では、list-performance-virtualize は「大きな一覧には FlashList」、ui-styling は「StyleSheet.create か Nativewind を使う」となっています。しかし規則のファイルは、一覧は短くても仮想化し LegendList か FlashList を使う、という内容です。ui-styling の規則のファイルには StyleSheet.create も Nativewind も出てきません（中身は角の丸め方、gap、影、グラデーションの書き方です）。
書きかけの規則がある
list-performance-callbacks の規則のファイルは、タグが tag1, tag2 のまま、参考の場所が example.com のままです。重みも frontmatter が MEDIUM、本文が HIGH と食い違い、良い例のコードは renderItem の外で item を参照しています。react-state-fallback の例も、引数の名前（fallbackEnabled）と使っている名前（defaultEnabled）がずれています。例のコードは写す前に読み直してください。
React Compiler の有無で変わる規則
react-compiler- の 2 件は、React Compiler を使っているときだけの規則です。逆に、一覧の規則のいくつかは、React Compiler を使っていれば memo() や useCallback() の手作業がいらなくなる、と注記しています。自分のプロジェクトで使っているかを、先に伝えておくと話が早いです。
インストール数の推移
日次で記録9月18日 〜 11月7日（49日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
review-animations
変更（差分）の中の動きのコードだけを、厳しい基準で見直させる。10 の譲れない基準で指摘し、直しは「前・後・理由」の表で出す。最後に通すか差し戻すかを明言する。既定は指摘する側
expo-dev-client
Expo のアプリの開発用のビルド（development client）を、手元か EAS のクラウドで作らせ、実機やシミュレーターに入れて開発サーバーにつなぐところまで進めさせる。Expo Go で足りるか、開発用のビルドが要るかの見分けも手伝わせる
vercel-composition-patterns
真偽値の引数を足して部品を分岐させる書き方をやめさせ、組み合わせで作る React の部品の設計に寄せる。複合部品・状態の持ち上げ・文脈の型・明示的な派生など 8 つの規則を、悪い例と良い例で示す
vercel-react-best-practices
React と Next.js の性能の規則 70 件。重みで並べ、待ち行列の解消を最上位に置く
よくある質問
FlashList と LegendList のどちらを使えばいいですか
規則のファイルは「LegendList か FlashList のような仮想化の部品」と、どちらも挙げています。コード例の多くは LegendList で、FlashList は代わりの書き方として出てきます。SKILL.md の一行説明は FlashList だけを挙げていますが、規則のファイルのほうが詳しい内容です。
スクロールの位置を useState に入れてはいけないのですか
いけない、と規則にあります。スクロールのイベントは頻繁に起きるので、状態を更新するたびに描き直しが走り、コマ落ちします。動きに使うなら Reanimated の共有値、動きに使わないなら useRef に入れるよう書かれています。この規則は SKILL.md の一覧には無く、規則のファイルと AGENTS.md にだけあります。
モノレポで、共有のパッケージに入れたネイティブのライブラリが動きません
規則によると、自動のリンクはアプリのパッケージの node_modules しか見ません。共有のパッケージで使っていても、ネイティブのコードを持つライブラリはアプリのパッケージにも入れる必要があります。版はモノレポ全体で 1 つにそろえ、範囲指定ではなく固定の版で書くよう勧めています。
押したときに縮む動きは Pressable で書けばいいですか
押したときの動き（縮む、薄くなる）なら、Pressable の onPressIn ではなく、Gesture Handler の GestureDetector と Gesture.Tap() を使うよう書かれています。動きの処理が UI のスレッドで走り、JavaScript のスレッドを往復しないためです。押した状態を 0 と 1 で持ち、縮む量はそこから計算する書き方が例になっています。