mcpField
R
react-native-best-practices

react-native-best-practices

github.com/software-mansion-labs開発2975.7k 回インストール2 週間前に更新
リポジトリ

react-native-best-practices について

New Architecture を採用する React Native 開発者向けのリファレンススキルです。Software Mansion のパターンを、アニメーション、ジェスチャー、グラフィック、AI、音声、テキスト、スレッド、JSI のテーマ別にまとめています。

主な機能

  1. 01テーマ別のサブスキル
  2. 02アニメーションとジェスチャーのパターン
  3. 03オンデバイス AI と音声のガイド
  4. 04JSI とマルチスレッドのガイド
  5. 05SVG とリッチテキストのガイド

活用シーン

  1. 01タッチ操作の実装
  2. 02アニメーションや SVG グラフィックの追加
  3. 03オンデバイス AI や音声機能の構築
  4. 04JSI とネイティブスレッドの利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/software-mansion-labs/skills --skill react-native-best-practices

インストール後、Claude Code で/react-native-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
references/animations/
animation-functions.md
animations-performance.md
animations.md
canvas-animations.md
canvas-atlas.md
css-pseudo-selectors.md
gpu-animations.md
layout-animations.md
scroll-and-events.md
svg-animations.md
references/audio/
audio.md
effects-and-analysis.md
playback.md
recording.md
system-and-notifications.md
worklets.md
references/enable-worklets-bundle-mode/references/
patching-bun.md
patching-patch-package.md
patching-pnpm.md
patching-yarn-berry.md
uniwind-remap-workaround.md
references/gestures/
continuous-gestures.md
gesture-composition.md
gestures.md
swipeable-and-drawer.md
tap-handling.md
testing.md
v2-to-v3-migration.md
references/jsi/
calling-js-and-async.md

詳細

React Native のベストプラクティス

New Architecture における React Native アプリ向けの Software Mansion の本番環境でのパターンです。

該当するトピックのサブスキルをお読みください。すべてのサブスキルは references/ にあります。

サブスキル

サブスキル使用する場面
references/animations/SKILL.mdCSS トランジション、CSS アニメーション、CSS 疑似セレクターとコールバック、共有値アニメーション、GPU シェーダーアニメーション（WebGPU、TypeGPU）、レイアウトアニメーション（開始／終了、トランジション、キーフレーム）、スクロール駆動アニメーション、アニメーション関数（withSpring、withTiming、withDecay）、コアフック（useSharedValue、useAnimatedStyle）、補間、パーティクルシステム、プロシージャルノイズ、SDF レンダリング、アニメーションのパフォーマンス、120fps、アクセシビリティ、Reanimated 4
references/gestures/SKILL.mdタップ、パン、ピンチ、回転、スワイプ、長押し、フリング、ホバー、ドラッグ、Pressable、RectButton、Swipeable、DrawerLayout、VirtualGestureDetector、ジェスチャーの合成、ジェスチャーのテストなど、Gesture Handler を使ったあらゆるタッチ操作
references/svg/SKILL.mdReact Native SVG を使ったベクターグラフィックス、アイコン、チャート、イラスト
references/on-device-ai/SKILL.mdオンデバイス AI：LLM（チャット、ツール呼び出し、構造化出力、視覚言語モデル）、コンピュータービジョン（分類、物体検出、OCR、セマンティック／インスタンスセグメンテーション、スタイル変換、埋め込み、テキストから画像への生成）、音声処理（タイムスタンプ付き STT、音素付き TTS、VAD）、VisionCamera のリアルタイムフレーム処理、モデルの読み込み、リソース管理、ExecuTorch を使ったカスタムモデル
references/rich-text/SKILL.mdリッチテキストエディター、書式付きテキスト入力、WYSIWYG、メンション、HTML／Markdown のレンダリング、react-native-enriched-html（旧 react-native-enriched）、react-native-enriched-markdown
references/multithreading/SKILL.mdマルチスレッド、react-native-worklets、バックグラウンド処理、Worker Runtimes、UI スレッド、scheduleOnUI、scheduleOnRN、Serializable、Synchronizable、JS スレッドからの計算処理のオフロード
references/enable-worklets-bundle-mode/SKILL.mdExpo、RN CLI、またはブラウンフィールドアプリでの react-native-worklets Bundle Mode の有効化（worklet 内のインポート、worklet ランタイム上でのサードパーティ製 npm ライブラリ）：babel bundleMode プラグインオプション、bundleModeMetroConfig / getBundleModeMetroConfig、パッケージマネージャーごとに必須の metro および metro-runtime パッチ、「Failed to get the SHA-1」エラー、worklet コードで Fast Refresh が使えない問題、uniwind/NativeWind リゾルバーの競合
references/audio/SKILL.mdオーディオ再生（バッファーソース、オシレーター、ストリーミング、キュー再生）、録音（ファイル、データコールバック、グラフ処理）、オーディオエフェクト（ゲイン、フィルター、ディレイ、コンボルバー、パンナー、ウェーブシェイパー）、リアルタイム分析と可視化、オーディオ worklet（カスタム処理、合成）、システム連携（セッション、中断、通知、権限）、モックを使ったテストなど、react-native-audio-api を使ったあらゆるオーディオ機能
references/jsi/SKILL.mdJSI、C++ ネイティブモジュール、jsi::Runtime、jsi::Value、jsi::Object、jsi::Function、jsi::HostObject、jsi::HostFunction、jsi::NativeState、jsi::PropNameID、jsi::ArrayBuffer、jsi::WeakObject、jsi::Scope、jsi::BigInt、JSIException、JSError、JSINativeException、C++ からの JS 呼び出し、JS からの C++ 呼び出し、HostObject のデストラクターに関する制約、shared_ptrjsi::Value、CallInvoker、invokeAsync、JSI のスレッド安全性、ゼロコピー ArrayBuffer、rt.global()、ISerialization、WithRuntimeDecorator、jsi.h

コメント

Markdown 対応