Habilidades vercel-react-native-skills
📦

vercel-react-native-skills

Baixo Risco ⚡ Contém scripts

React Native のベストプラクティスを適用する

パフォーマンスの高い React Native アプリを構築するには、リスト、アニメーション、状態管理に対してプラットフォーム固有のパターンに従う必要があります。このスキルは、最適化されたモバイル開発のための 35 以上の AI エージェントのルールを提供します。

Suporta: Claude Codex Code(CC)
📊 70 Adequado
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "vercel-react-native-skills". React Native FlatList で再レンダリングを回避するために、リストアイテムをどのように構成すべきですか？

Resultado esperado:

  • リストアイテムコンポーネントに React.memo() を使用する
  • レンダリング中にスタイルオブジェクトを作成しない
  • コールバック関数をコンポーネントの外に抽出する
  • アイテムに渡されるイベントハンドラに useCallback() を使用する
  • 大規模なリスト（1000+ アイテム）には FlashList を検討する

A utilizar "vercel-react-native-skills". 再レイアウトを引き起こさずに安全にアニメーションできるプロパティはどれですか？

Resultado esperado:

  • アニメーション可能: opacity、transform (translateX/Y、scale、rotate)
  • アニメーションを避ける: width、height、padding、margin、border
  • 計算されたアニメーション値には useDerivedValue を使用する
  • 単純なタップ操作には Gesture.Tap を Pressable よりも優先する

Auditoria de Segurança

Baixo Risco
v1 • 1/28/2026

Documentation-only skill containing React Native best practices. All static findings are false positives triggered by code examples in markdown files. No executable code present.

42
Arquivos analisados
6,143
Linhas analisadas
1
achados
1
Total de auditorias

Fatores de risco

⚡ Contém scripts (2)
SKILL.md:1-122 metadata.json:1-16
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
Conteúdo
33
Comunidade
90
Segurança
91
Conformidade com especificações

O Que Você Pode Construir

React Native アプリのリストパフォーマンスを最適化する

フィード、タイムライン、または多数のアイテムを持つスクロール可能なリストを構築する際は、仮想化とメモ化のルールを適用してカクつくスクロールを防ぎます。

Reanimated でスムーズなアニメーションを実装する

ジェスチャーやアニメーションを追加する際は、GPU に優しいプロパティと正しい Reanimated フックを使用して 60fps のパフォーマンスを維持します。

React Native モノレポを構成する

Expo または React Native でモノレポプロジェクトをセットアップする際は、ビルドの問題を回避するためにネイティブ依存関係とバージョン管理のルールに従います。

Tente Estes Prompts

初心者向け - リスト最適化 
React Native アプリでスクロール可能なリストを構築しています。仮想化、メモ化、リストアイテム内でインラインオブジェクトを作成しないことなど、リストパフォーマンスのベストプラクティスについて教えてください。
中級者向け - アニメーション実装 
React Native Reanimated を使用してスワイプして非表示にするジェスチャーを実装する必要があります。スムーズな 60fps のアニメーションと適切なジェスチャーハンドリングを確保するために、どのルールに従うべきですか？
上級者向け - ネイティブナビゲーションの設定 
Expo Router アプリでナビゲーション遷移中にパフォーマンスの問題があります。ネイティブスタックナビゲーターと JS ベースのナビゲーターのどちらを使用する場合のルールは何ですか？
エキスパート向け - React Compiler 互換性 
React Native アプリで React Compiler を有効にしています。コードを正しくコンパイルするために、関数の分解と共有値の処理でどのルールに従う必要がありますか？

Melhores Práticas

  • まずリストパフォーマンスのルールを優先する - スクロールのスムーズさはモバイル UX にとって重要
  • 本番アプリにはネイティブナビゲーションコンポーネント（ネイティブスタック、ネイティブタブ）を使用する
  • 後にパフォーマンスの問題をデバッグするのではなく、早い段階でメモ化を適用する

Evitar

  • リストアイテムでインラインスタイルオブジェクトを使用しない - レンダリング外で定義する
  • 潜在的な falsy 値で条件付きレンダリングに && を使用しない
  • ビューで measure() を呼び出さない - 代わりに onLayout コールバックを使用する

Perguntas Frequentes

このスキルは私のコードを直接変更しますか？
いいえ。このスキルは AI エージェントが従うためのルールとガイダンスを提供します。実際のコード変更はこれらのガイドラインに基づいて AI エージェントが実行します。
このスキルには何個のルールが含まれていますか？
このスキルには 13 のカテゴリにわたる 35 以上のルールが含まれており、重要度の順に配置されています（リストパフォーマンスが最優先、フォント設定などは影響が低い順）。
これらのルールは Expo 固有ですか？
ほとんどのルールは Expo とベア React Native プロジェクトの両方に適用されます。フォント設定プラグインのような一部のルールは Expo 固有です。
これらのルールを適用する際、どのように優先順位を付けるべきですか？
リストパフォーマンスとアニメーションのルールから始め、これらは直接ユーザー体験に影響します。次にナビゲーションと UI パターンのルール、その後に状態管理とレンダリングの最適化です。
これらのルールは React Native New Architecture で動作しますか？
はい。これらのルールは、従来のアーキテクチャと新しいアーキテクチャの両方と互換性があります。一部の最適化は異なるパフォーマンス特性を持つ場合があります。
これらのルールはどのくらいの頻度で更新されますか？
ルールは Vercel によって維持されており、React Native、Expo、関連するライブラリの進化に応じて更新されます。最新バージョンについては GitHub リポジトリをご確認ください。

Detalhes do Desenvolvedor

Licença

MIT

Repositório

https://github.com/vercel-labs/agent-skills/tree/main/skills/react-native-skills/

Referência

main

Estrutura de arquivos

📁 rules/

📄 _sections.md

📄 _template.md

📄 animation-derived-value.md

📄 animation-gesture-detector-press.md

📄 animation-gpu-properties.md

📄 design-system-compound-components.md

📄 fonts-config-plugin.md

📄 imports-design-system-folder.md

📄 js-hoist-intl.md

📄 list-performance-callbacks.md

📄 list-performance-function-references.md

📄 list-performance-images.md

📄 list-performance-inline-objects.md

📄 list-performance-item-expensive.md

📄 list-performance-item-memo.md

📄 list-performance-item-types.md

📄 list-performance-virtualize.md

📄 monorepo-native-deps-in-app.md

📄 monorepo-single-dependency-versions.md

📄 navigation-native-navigators.md

📄 react-compiler-destructure-functions.md

📄 react-compiler-reanimated-shared-values.md

📄 react-state-dispatcher.md

📄 react-state-fallback.md

📄 react-state-minimize.md

📄 rendering-no-falsy-and.md

📄 rendering-text-in-text-component.md

📄 scroll-position-no-state.md

📄 state-ground-truth.md

📄 ui-expo-image.md

📄 ui-image-gallery.md

📄 ui-measure-views.md

📄 ui-menus.md

📄 ui-native-modals.md

📄 ui-pressable.md

📄 ui-safe-area-scroll.md

📄 ui-scrollview-content-inset.md

📄 ui-styling.md

📄 AGENTS.md

📄 metadata.json

📄 README.md

📄 SKILL.md