react-native-skills (vercel-labs/agent-skills)
React Native と Expo のベストプラクティスを、リスト性能、アニメーション、ナビゲーション、ネイティブモジュールに適用します。
react-native-skills：ダブルタップのアニメーションを「JSスレッドの Animated」から Reanimated + Gesture Handler へ引き上げ（0.7 → 5.0）ますが、レビューと最適化のタスクでは対照群と変わらず、一文チェックリスト（4.6 対 5.0）を下回ります。
Codex CLI · gpt-6-astra
24.3 / 30
スキルなしに対するリフト：+1.77 · 推奨 · 18 実行
推奨：合計 24.3/30 が 22 以上、出力品質 4.6 が 3.5 以上、リフト +1.77 が +1.0 以上。
SOTA
合格Codex でテスト済み。
カバー対象 Codex, Claude Code
Codex CLI 0.166（SOTA ティア）：採点対象 18 実行。当ティアのルールでは、ここでの合格は Claude Code もカバーします。第2ティアについては何も述べません。
スコア
各ディメンションは 0〜5 点で、6 つの合計が 30 点満点の合計スコアになります。すべてのディメンションで 5 が最良です。コスト 5 は低コストで高速、インストール 5 は簡単であることを意味します。
- トリガーの信頼性
- 5.0
- スキルなしに対するリフト
- 3.8
- 出力品質
- 4.6
- トークンと時間のコスト
- 4.0
- インストールと移植性
- 3.0
- 安全性
- 4.0
セキュリティレビュー
安全静的スキャン：CRITICAL 0 / HIGH 3 / MEDIUM 0。手動レビュー：ネットワーク無効のサンドボックスで実行しても安全（スキャナのヒットは確認済み）。クリーンなスキャン結果はスキルの安全性を証明しません。
インストール
npx skills@latest add vercel-labs/agent-skills --skill react-native-skills
固定コミット: 1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62
テスト済み: 2026-11-02
テスト内容
- フィード画面のパフォーマンスレビュー — FeedScreen.tsx（Expo アプリ）をパフォーマンス問題がないかレビューしてください。重大なものから順に、それぞれ何を変更すべきか添えて。ファイルは変更しないでください。
- フィードのその場での最適化 — FeedScreen.tsx をパフォーマンス最適化してください。その場で編集し、props と見た目の挙動は変えないでください。必要なものはすべてインストール済みで、ネットワークはありません。
- Reanimated のダブルタップハートの追加 — 投稿の写真をダブルタップすると弾む（拡大縮小とフェード）ハートを追加してください。FeedScreen.tsx を編集し、インストール済みのものを使ってください。
長所
- スキルなしと比べ平均スコアを 2.79 から 4.56 に引き上げ（+1.77）。
- スキルは名前を出さずとも採用されました：スキルあり群 6/6 実行でスキルファイルが読み込まれました。
- スキルありの絶対品質は高水準：5 点中 4.56。
短所
- 一文プロンプトは 5.0、スキルありは 4.56（-0.44）。
- タスク・群ごとに n=2。1 ポイント未満の差はノイズです。
レビュー
専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。意図的な問題を含む 1 つの Expo フィード画面（FeedScreen.tsx）と、FlashList、expo-image、Reanimated、Gesture Handler がすでに記載された package.json（何もインストールできません）。タスクは、パフォーマンス問題のレビュー（編集なし）、挙動を保ったままの最適化、ダブルタップで弾むハートの追加。プロンプトはライブラリ名に一切言及しません。一文プロンプトは主要ルールを一文で列挙します（FlashList、安定したコールバックとインラインスタイルなしのメモ化行、Pressable と expo-image、Reanimated の transform/opacity、ジェスチャーハンドラー）。
3群の比較
| 群 | 平均スコア（0〜5） | 1実行あたりのトークン |
|---|---|---|
| スキルなし | 2.79 | 98k |
| 一文プロンプト | 5.0 | 114k |
| スキルあり | 4.56 | 110k |
Codex CLI で 18 実行を計測し、LLM 判定なしのルールベースのチェックで採点。合計 24.3 / 30、判定は 推奨。
判定：推奨（24.3 / 30）。 出典：vercel-labs/agent-skills、skills/react-native-skills、コミット 1a2c79d に固定。インストール：npx skills@latest add vercel-labs/agent-skills --skill react-native-skills。ライセンス： MIT（リポジトリの LICENSE）。
概要
vercel-labs/agent-skills の react-native-skills スキル：React Native と Expo のパフォーマンスのためのルールライブラリ。リストの仮想化（FlashList）、メモ化された行と安定したコールバック、Pressable、expo-image、UI スレッドでの Reanimated による transform/opacity のアニメーション、タップのための Gesture Handler、そして rules/ フォルダにあるさらに多くのルール（AGENTS.md にコンパイルされたインデックス）。
テスト方法
専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。
問題を意図的に仕込んだ 1 つの Expo フィード画面（FeedScreen.tsx）と、FlashList、expo-image、Reanimated、Gesture Handler がすでに記載された package.json（何もインストールできない）。タスク：パフォーマンス問題のレビュー（編集なし）、振る舞いを保った最適化、ダブルタップで弾むハートの追加。プロンプトはライブラリ名を一切含みません。一文プロンプトは主要ルールを一文で列挙します（FlashList、安定したコールバックとインラインスタイルなしのメモ化された行、Pressable と expo-image、Reanimated の transform/opacity、ジェスチャーハンドラー）。
- フィード画面のパフォーマンスレビュー — FeedScreen.tsx（Expo アプリ）のパフォーマンス問題を、重大な順に、それぞれの変更内容とともにレビュー。ファイルは変更しないでください。
- フィードをその場で最適化 — FeedScreen.tsx をパフォーマンスのために最適化。その場で編集し、props と見た目の振る舞いは同じに保つ。必要なものはすべてインストール済み。ネットワークはありません。
- Reanimated のダブルタップハートを追加 — 投稿の写真をダブルタップしたときに、その上で弾む（拡大縮小とフェード）ハートを追加。FeedScreen.tsx を編集。インストール済みのものを使う。
採点はプログラム的（隠しテスト／仕込み問題の検出／制約チェック／該当する場合はレンダリング+OCR）で、実行ごとに 0〜5 点。スコアはどの LLM 判定者も決めていません。
結果
第 3 群に与えた一文プロンプト："React Native のパフォーマンスプラクティスに従う：長いリストを仮想化し（FlashList）、安定したコールバックで行コンポーネントをメモ化して、インラインスタイルオブジェクトや行ごとの重い処理を避け、Pressable と expo-image を使い、UI スレッド上の Reanimated で transform と opacity のみをアニメーションし（JS ドライバーのレイアウトアニメーションは使わない）、タップにはジェスチャーハンドラーを使う。"
| タスク | 対照群スコア | 一文プロンプト | スキルあり | 対照群トークン | 一文プロンプトトークン | スキルありトークン | スキル読み込み |
|---|---|---|---|---|---|---|---|
| t1-review | 3.8 | 5.0 | 4.6 | 85k | 92k | 71k | 2/2 |
| t2-optimize | 3.87 | 5.0 | 4.09 | 105k | 140k | 142k | 2/2 |
| t3-double-tap | 0.71 | 5.0 | 5.0 | 103k | 107k | 116k | 2/2 |
平均スコア：スキルなし 2.79 vs スキルあり 4.56（差分 +1.77）。1 実行あたりのトークン：98k vs 110k（1.12 倍）。時間：54s vs 52s。一文プロンプト群：5.0（一文プロンプトに対するスキルの上乗せ：-0.44。一文プロンプト自身のスキルなしに対する上乗せ：+2.21）。一文プロンプトのトークンは 1 実行あたり 114k、つまりスキルのコストは一文プロンプトの 0.97 倍。
何が起きたか
- 平均：対照群 2.79、一文プロンプト 5.00、スキルあり 4.56（各 n=6）。ダブルタップのタスクでスキルは対照群を上回りました（5.0 vs 0.71）。対照群の 2 実行は JS スレッドの
Animated.timingと素のプレスハンドラーを使い、インストール済みの Reanimated と Gesture Handler を無視しました。一方、スキルありの 2 実行は Gesture Handler のタップ、shared values、transform/opacity アニメーションを使いました。 - 最適化タスクでは、スキルは結果を変えませんでした：スキルあり 4.09、対照群 3.87。一文プロンプト以外の 4 実行はすべて、インストール済みにもかかわらず
TouchableOpacityと標準 RN のImageをそのまま残し、expo-image を使いませんでした。メモ化、スタイルの巻き上げ、アバターリストは修正しましたが、「見た目の振る舞いを保つ」を保守的である理由にしました。一文プロンプトの 2 実行は Pressable、expo-image、FlashList に切り替えて 5.0 を取りました。 - レビュータスクでは、スキルは仕込み問題の大半を列挙しました（2 実行で 9/10 検出、見落としは TouchableOpacity の 1 点のみ）。対照群は 10 のうち 6〜8。一文プロンプトは両方の実行で 10 すべてを見つけました。
- コスト：スキルは 1 実行あたり 110k トークン（対照群 98k、一文プロンプト 114k）。スキルフォルダには約 40 のファイル（ルールインデックスとルールファイル）があり、すべてのスキルあり実行でプロジェクトにコピーされました（平均 1 実行あたり 42.7 個の新規ファイル）。
- スキルは名前を出さずともスキルあり群 6/6 実行で読み込まれました。
評価項目別スコア
| 評価項目 | スコア | 理由 |
|---|---|---|
| 出力品質 | 4.56 | スキルありの平均スコアは 4.56/5（プログラム的チェック。タスク別の表を参照）。 |
| スキルなしに対するリフト | 3.77 | スキルなしの 2.79 に対して +1.77 ポイント（タスクごとに n=2。約 1 ポイント未満の差はノイズ）。 |
| トリガー | 5.0 | スキルあり群 6/6 実行でスキルファイルが読み込まれました。 |
| 手順の移植性 | 3 | SKILL.md とコンパイル済み AGENTS.md、約 40 のルールファイル。得られる効果に対して大きめ。 |
| 効率 | 4 | トークン 1.12 倍（1 実行あたり 110k vs 98k）、時間 0.97 倍（52s vs 54s）。 |
| 安全性と衛生 | 4 | スキャナは 3 件の HIGH を指摘。すべて |
このテストの限界
- 編集されたファイルとレビュー本文に対するルールベースのチェック。アプリは一度もビルド・実行していません。
- 仕込み問題のある単一のフィクスチャ画面。そのため、同じ問題を名指しする一文プロンプトは、チェックと異例なほどよく一致した上限になります。
- セルごとに n=2。
- タスク・群ごとに n=2。約 1 ポイント未満の差はノイズです。
- ルールベースの採点はチェックが捉えられる範囲を測るもので、センスや、その結果が最善かどうかは判定できません。
セキュリティ
security.md を参照。スキャン：CRITICAL 0 / HIGH 3 / MEDIUM 0。判定：実行しても安全（ネットワーク無効のサンドボックス）。クリーンなスキャン結果はスキルの安全性を証明しません。
結論
ジェスチャーを追加する際にエージェントを Reanimated/Gesture Handler スタックへ誘導するのに有用で、レビューの再現率も向上します。ただし、既存コードを最適化するときにルールセット全体を適用させることはできません。ここではライブラリを名指しする一文の方が良い結果でした。RN のアニメーション作業を頻繁に追加するならインストールしてください。
トランスクリプト
実行ログ：react-native-skills (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) 列：タスク、群-回、スコア（0-5）、トークン、秒、合格したチェック、エージェントが開いたスキルファイル。 t1-review control-1: スコア 4.2, トークン 86173, 秒 48.3, チェック 2/2, 開いたファイルなし t1-review control-2: スコア 3.4, トークン 85790, 秒 52.6, チェック 2/2, 開いたファイルなし t1-review oneliner-1: スコア 5.0, トークン 98552, 秒 59.2, チェック 2/2, 開いたファイルなし t1-review oneliner-2: スコア 5.0, トークン 85716, 秒 49.5, チェック 2/2, 開いたファイルなし t1-review treatment-1: スコア 4.6, トークン 72170, 秒 47.4, チェック 2/2, 開いたファイル react-native-skills t1-review treatment-2: スコア 4.6, トークン 70886, 秒 50.8, チェック 2/2, 開いたファイル react-native-skills t2-optimize control-1: スコア 4.09, トークン 105482, 秒 60.5, チェック 5/7, 開いたファイルなし t2-optimize control-2: スコア 3.64, トークン 105599, 秒 61.9, チェック 4/7, 開いたファイルなし t2-optimize oneliner-1: スコア 5.0, トークン 151869, 秒 109.3, チェック 7/7, 開いたファイルなし
18 実行、3 成果物
サンプル出力
SOTA · With the skill: final message (t1-review, run 1, Codex)
Most serious first: 1. **High — Every rendered row sorts the entire feed** ([FeedScreen.tsx:17](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:17)). Each row copies and sorts all posts, then searches for its rank. Rendering *v* rows costs roughly O(v × n log n), blocking the JS thread during scrolling. **Change:** compute an ID-to-rank map once with `useMemo([posts])`, then use an O(1) lookup per row. Preserve ranking across all posts when filtering. 2. **High — The avatar strip renders every post immediately** ([line 28](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:28)). `ScrollView` with `posts.map()` mounts all avatar views, increasing startup work and image memory as the feed grows. **Change:** use a horizontal `FlatList` or FlashList with stable IDs and a bounded height. The fixed avatar dimensions make layout calculation straightforward. 3. **Medium — Screen rerenders cause avoidable list work** ([line 15](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:15)). Filtering creates a new array and `renderItem` creates a new function each render; rows have no memoization boundary. **Change:** memoize filtered posts using `[posts, query]`, extract a `React.memo` row, and stabilize `renderItem` with the correct dependencies. Pass the computed rank and a stable `onOpen`; move static styles into `StyleSheet.create`. Currently, `setQuery` is unused, so typing-related rerenders aren’t present. 4. **Conditional medium — Image payloads may exceed their display needs** ([lines 20](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:20) and [30](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:30)). Display dimensions don’t guarantee appropriately sized downloads. Original-resolution URLs could add substantial network and decoding cost. **Change:** request compressed thumbnails sized for the display’s pixel density; consider the already-installed `expo-image` for explicit caching and recycling support. The actual source dimensions aren’t available here. 5. **Latent — Width animation uses the JS thread and changes layout every frame** ([line 9](C:/Users/<user>/AppData/Local/Temp/asv-react-nati-be075069/work/FeedScreen.tsx:9)). `grow` is unused, so this has no current animation cost. **Change if activated:** use `scaleX` with the native driver when visual scaling meets the design; it won’t change layout space. Also initialize the value lazily: `useState(() => new Animated.Value(100))`. Static review only; no profiling performed and no files changed.