monorepo-tamagui について
monorepo-tamaguiは、TypeScript、React、Next.js、Expo、Tamaguiを使ったクロスプラットフォームアプリの開発指針です。Turbo monorepoでWebとネイティブアプリを開発するチーム向けに、UI、状態管理、ローカライズ、サブスクリプションを扱います。
主な機能
- 01TamaguiによるクロスプラットフォームUI
- 02Turbo monorepoの構成
- 03Zodによるスキーマ検証
- 04ZustandとReact Queryによる状態管理
- 05Webとネイティブのローカライズ
- 06Stripeサブスクリプションの指針
活用シーン
- 01Webとネイティブの共通アプリ構成
- 02Zodを使ったデータ検証
- 03取得データとローカル状態の管理
- 04ローカライズされた画面の実装
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/monorepo-tamaguiを入力して読み込まれたか確認します。
詳細
Tamagui を使用した Monorepo
TypeScript、React、Next.js、Expo、Tamagui、Supabase、Zod、Turbo、i18next、Zustand、TanStack React Query、Solito、Stripe を使用してクロスプラットフォームアプリケーションを構築するための、経験豊富な開発者向けガイドラインです。
コードスタイルと構成
- 関数型のパターンを用いて、簡潔な TypeScript を記述します
isLoadingのような補助動詞を含む、説明的な変数名を使用します- 名前付きエクスポートを使い、エクスポートするコンポーネント、ヘルパー、型ごとにファイルを構成します
TypeScript とバリデーション
- 型よりもインターフェースを優先します
- スキーマのバリデーションには Zod を活用します
- enum ではなくリテラル型を使用します
- props には TypeScript インターフェースを使い、関数コンポーネントを作成します
UI とスタイリング
- クロスプラットフォームのコンポーネントには Tamagui を適用します
- モバイルファーストのレスポンシブデザインを実装します
- Web とネイティブの間でスタイリングの一貫性を保ちます
- Tamagui のテーマ機能を活用します
状態管理
- 状態管理には Zustand を使用します
- データの取得とキャッシュには TanStack React Query を活用します
useEffectの使用を最小限に抑えます
国際化
- Web では i18next と react-i18next を使用します
- React Native では expo-localization を適用します
- ユーザーに表示されるすべてのテキストを国際化します
エラー処理
- エッジケースを優先して考慮します
- ガード節を使って早期にエラーを処理します
- 一貫性を保つためにカスタムエラー型を実装します
パフォーマンスの最適化
- Web とネイティブの両方のプラットフォームを最適化します
- Next.js では動的インポートを使用します
- 遅延読み込みを実装します
- 適切な形式を使用して画像を最適化します
Monorepo の構成
- Turbo のベストプラクティスに従います
- 適切な依存関係管理により、パッケージを分離します
- 共有設定を使用します
package.jsonに従ってワークスペースを構成します
クロスプラットフォーム開発
- ナビゲーションには Solito を使用します
- プラットフォーム固有のコードには
.native.tsxファイルを作成します - クロスプラットフォームの画像互換性には SolitoImage を使用します
Stripe の統合
- 決済処理とサブスクリプションを実装します
- Stripe Customer Portal を使用します
- サブスクリプションイベントの Webhook を処理します
- Supabase とサブスクリプションのステータスを同期します
コメント
Markdown 対応