react-native-architecture
React Native アーキテクチャを迅速に設計
複雑な React Native アプリはスケーリングと保守が困難になることがあります。このスキルでは、ナビゲーション、オフライン同期、ネイティブモジュールを備えた本番用アプリを構築するための、実証済みの Expo アーキテクチャパターンとコード例を提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「react-native-architecture」を使用しています。 Outline an Expo Router structure with auth and tabs
期待される結果:
- ルートを (auth) および (tabs) フォルダにグループ化する
- ルートレイアウトで共有プロバイダを設定する
- 未認証ユーザーをログインページにリダイレクトする
- 一貫したアイコンでタブ画面を定義する
「react-native-architecture」を使用しています。 Show how to persist data offline
期待される結果:
- React Query と AsyncStorage パーシスターを使用する
- キャッシュ用に staleTime と gcTime を設定する
- UX 向上のため楽観的更新を実装する
- 接続が回復したらデータを同期する
「react-native-architecture」を使用しています。 What native modules should I use
期待される結果:
- セキュアなトークンストレージに expo-secure-store を使用
- 触覚フィードバックに expo-haptics を使用
- バイオメトリクスに expo-local-authentication を使用
- プッシュアラートに expo-notifications を使用
セキュリティ監査
安全This is a documentation-only skill containing architectural patterns and example code. Static analyzer flagged documentation keywords as security issues, but all findings are false positives. No executable code, file access, or network requests exist. The skill contains only markdown documentation with TypeScript/JavaScript examples for React Native development.
リスク要因
🌐 ネットワークアクセス (6)
⚙️ 外部コマンド (22)
品質スコア
作れるもの
アプリ構造を計画する
新しい React Native アプリのフォルダレイアウト、ルーティンググループ、プロバイダを定義する。
オフライン同期を追加する
オフライン使用のための React Query 永続化と楽観的更新パターンを選択する。
パフォーマンスを向上させる
大容量データセットのためのリストレンダリングとメモ化戦略を選択する。
これらのプロンプトを試す
タブと認証付きの React Native プロジェクト構造と Expo Router レイアウトを提案する。
ルート保護と安全なトークンストレージを備えた AuthProvider パターン提供する。
React Query によるオフラインキャッシュ、楽観的更新、無効化を説明する。
Expo でのハプティクス、バイオメトリクス、プッシュ通知のベストプラクティスを一覧にする。
ベストプラクティス
- Expo Router グループを使用してナビゲーションフローを整理する
- オフラインアクセスと高速起動のためにクエリを永続化する
- プラットフォーム動作を確認するために実際のデバイスでテストする
回避
- シークレットをソースコードに直接保存する
- レンダー関数内でデータをフェッチする
- iOS と Android の UI の違いを無視する