Gluestack UI v4 デザインパターン

このスキルは gluestack-ui v4 の制約のある独断的なスタイリングパターンを強制し、意思決定の疲労を軽減し、パフォーマンスを向上させ、一貫したテーマ設定を可能にし、ソリューション空間を正規パターンに限定します。

コアプリンシプル

1. React Native プリミティブスより Gluestack コンポーネント - Gluestack は RN をテーマ、アクセシビリティ、クロスプラットフォーム互換性でラップします
2. className ユーティリティより コンポーネント props - 利用可能な場合、className の代わりに組み込み props (size, variant, space) を使用します
3. 任意の値より セマンティックトークン - トークンは外見だけでなく意図を符号化します
4. インラインスタイルより className - インラインスタイルは最適化と一貫性をバイパスします
5. ピクセル値より スペーシングスケール - 任意の値は持続不可能な例外を生み出します
6. コピー・ペースト哲学 - コンポーネントは依存関係としてインストールされるのではなく、コードベースにコピーされます
7. コンポーザブルなサブコンポーネント - 柔軟性のためにコンパウンドコンポーネントパターンを使用します
8. デッドコードを削除 - 未使用パターンは AI を誤解させ、認知負荷を増加させます

このスキルをいつ使用するか

• 新しいコンポーネントをスタイリングで作成するとき
• 既存のコンポーネントスタイルをレビューするとき
• デザインシステムに従うようにスタイルをリファクタリングするとき
• スタイリングの不一貫性を修正するとき
• ダークモードサポートを追加するとき
• コンポーネントをテーマするとき
• gluestack-ui からプロジェクトにコンポーネントをコピーするとき

任意のコンポーネントを使用する前に、常に https://v4.gluestack.io/ui/docs/components/${componentName}/ の最新の使用パターンを確認してください

サブスキル組織

このスキルはトークン効率を改善するため、特化したサブスキルに組織されています：

1. gluestack-ui-v4:setup

用途： 初期プロジェクト設定、インストール、構成、コンポーネント追加

カバー範囲：

• 公式 CLI の使用 (npx gluestack-ui@alpha init -y と npx gluestack-ui@alpha add --all -y)
• Expo、React Native CLI、Next.js のプロジェクト初期化
• 依存関係管理
• 構成ファイル (tailwind、metro、babel など)
• GluestackUIProvider セットアップ
• 個別コンポーネント追加
• セットアップ問題のトラブルシューティング

呼び出す場合： 新しいまたは既存のプロジェクトで gluestack-ui をセットアップするとき、CLI 経由でコンポーネントを追加するとき、またはインストールの問題をトラブルシューティングするとき

2. gluestack-ui-v4:creating-components

用途： ステップバイステップのコンポーネント作成、テンプレート、レシピ

カバー範囲：

• コンポーネント作成ワークフロー
• 6 つの既成テンプレート (simple、variants、compound、form、interactive、loading)
• 一般的なコンポーネントレシピ (プロフィールカード、バッジ、検索、リスト)
• ベストプラクティスチェックリスト
• クイックスタートガイド

呼び出す場合： 最初からコンポーネントを作成するとき、またはコンポーネントテンプレートが必要なとき

3. gluestack-ui-v4:components

用途： コンポーネント使用法、コンパウンドパターン、アイコン、プロバイダー設定

カバー範囲：

• React Native プリミティブスより Gluestack コンポーネント
• コンポーネント props と className ユーティリティ
• コンパウンドコンポーネントパターン (Input、Button、FormControl など)
• アイコン使用階層
• プロバイダー設定

呼び出す場合： コンポーネント構造、props、コンポジションで作業するとき

4. gluestack-ui-v4:styling

用途： 色、スペーシング、ダークモード、variants、className

カバー範囲：

• セマンティックカラートークン
• スペーシングスケール準拠
• CSS 変数を用いたダークモード
• tva によるバリアントベースのスタイリング
• className マージング

呼び出す場合： コンポーネントをスタイリングするとき、テーマを設定するとき、または色とスペーシングで作業するとき

5. gluestack-ui-v4:variants

用途： コンポーネントのカスタムバリアント作成、デザインシステム拡張

カバー範囲：

• バリアント作成のいつ・どのように
• バリアント管理に tva を使用
• 既存の Gluestack コンポーネント拡張
• 親子バリアント関係
• 複雑な組み合わせ用コンパウンドバリアント
• 一般的なバリアントパターン (バッジ、アラート、カード)
• 繰り返されたスタイルをバリアントに変換

呼び出す場合： コンポーネントのカスタムバリアント作成が必要なとき、コンポーネントスタイルオプション拡張、または繰り返されたスタイルパターンを標準化するとき

6. gluestack-ui-v4:performance

用途： クロスプラットフォーム、パフォーマンス最適化、ベストプラクティス

カバー範囲：

• クロスプラットフォームレンダリング (Native & Web)
• TypeScript 使用法
• コンポーネント memoization
• Reanimated によるアニメーション
• セーフエリア処理
• リスト用の FlatList
• プラットフォーム固有コード

呼び出す場合： パフォーマンスを最適化するとき、クロスプラットフォーム互換性を確保するとき、または React Native ベストプラクティスに従うとき

7. gluestack-ui-v4:validation

用途： コードレビュー、アンチパターン、バリデーションチェックリスト

カバー範囲：

• 完全なバリデーションチェックリスト
• 避けるべきアンチパターン
• 一般的な間違い
• エスカレーション指針

呼び出す場合： コードをレビューするとき、実装を検証するとき、またはアンチパターンをチェックするとき

クイックリファレンス

解決優先順位 (優先順)

1. コンポーネント props - 組み込み props (size、variant、space) を使用
2. className ユーティリティ - 既存の Tailwind/NativeWind クラスを使用
3. Gluestack コンポーネントバリアント - 組み込みコンポーネントバリアントを使用
4. tva (Tailwind Variant Authority) - 再利用可能なバリアントパターンを作成
5. NativeWind interop - サードパーティコンポーネントで className を有効化
6. インラインスタイル - 文書化された正当な理由がある場合のみの最後の手段

一般的なパターン

// props を使用したコンポーネント使用法
<VStack space="lg" className="p-4">
  <Heading size="xl" bold>Title</Heading>
  <Text size="md" className="text-muted-foreground">Description</Text>
</VStack>

// コンパウンドコンポーネント付きボタン
<Button variant="outline" size="lg">
  <ButtonText>Click Me</ButtonText>
  <ButtonIcon as={ChevronRightIcon} />
</Button>

// アイコン付き入力 (InputIcon は InputSlot 内に配置必須)
<Input>
  <InputSlot>
    <InputIcon as={MailIcon} className="text-muted-foreground" />
  </InputSlot>
  <InputField placeholder="Enter email" />
</Input>

// セマンティックカラートークン
<Box className="bg-primary text-primary-foreground">
  <Text className="text-foreground">Content</Text>
</Box>

主要ルール概要

1. React Native プリミティブスの代わりに常に Gluestack コンポーネントを使用
2. 利用可能な場合、className の代わりにコンポーネント props (space、size、variant) を使用
3. 色にセマンティックトークンを使用 (text-primary、bg-card など)
4. インラインスタイルは絶対に必要な場合を除き禁止
5. スペーシングスケールに従う (0、0.5、1、2、3、4 など) - 任意の値は使用禁止
6. コンパウンドコンポーネント必須 - ButtonText、InputSlot、FormControlLabel など
7. InputIcon は InputSlot でラップ必須 - これは重要です
8. 複数のスタイルを持つカスタムコンポーネント作成時は tva を使用
9. ダークモードは dark: プレフィックス - CSS 変数を使用
10. クロスプラットフォーム互換 - 直接 React Native インポートではなく Gluestack ラッパーを使用

リファレンスドキュメント

重要：コンポーネントを使用する前に、常に公式 v4 ドキュメントでコンポーネント使用法とパターンを確認してください。

• コンポーネントドキュメント: https://v4.gluestack.io/ui/docs/components/${componentName}/
• 完全なドキュメント: https://v4.gluestack.io/ui/docs
• インポートパス: @/components/ui/${componentName}

サブスキルの使用方法

特定のタスクで作業する場合、詳細なガイダンスのために適切なサブスキルを呼び出します：

• gluestack-ui をセットアップするか、コンポーネントを追加しますか？ → gluestack-ui-v4:setup を使用
• 新しいコンポーネントを作成していますか？ → gluestack-ui-v4:creating-components を使用
• コンポーネント構造に関する質問がありますか？ → gluestack-ui-v4:components を使用
• スタイリングとテーマに関する質問がありますか？ → gluestack-ui-v4:styling を使用
• コンポーネントバリアントを作成または拡張していますか？ → gluestack-ui-v4:variants を使用
• パフォーマンスまたはクロスプラットフォームに関する質問がありますか？ → gluestack-ui-v4:performance を使用
• コードを検証またはレビューする必要がありますか？ → gluestack-ui-v4:validation を使用

各サブスキルは、これらのコアプリンシプルとの一貫性を維持しながら、その特定の領域に焦点を絞った詳細なガイダンスを提供します。