ui-pattern

UI パターンジェネレーター

使用する場面

デザインシステムのプリミティブを使って、複合 UI パターン（カードレイアウト、リスト、フォームセクション、グリッドなど）を生成する必要がある場合に、このスキルを使用します。

使用しない場面

• 単一のプリミティブコンポーネントの場合 → /ss-component を使用します
• モバイル画面全体の場合 → /ss-page を使用します
• 複数ページにわたるユーザーフロー全体の場合 → /ss-flow を使用します
• デザイントークンや色・余白の決定の場合 → /ss-tokens を使用します

パターンの種類：$0 説明：$ARGUMENTS

利用可能なパターンの種類

レイアウトパターン

• card-section：ページセクション内のタイトルとコンテンツを含むカード（mx-6）
• grid-2col：カードを2列に並べたグリッド（grid grid-cols-2 gap-4 px-6）
• scroll-horizontal：横スクロールできるカードリスト（flex gap-3 overflow-x-auto scrollbar-hide）
• list-section：カード内の縦方向の項目リスト
• form-section：ラベル付き入力欄を含むカード内のフォーム
• stat-grid：StatCard コンポーネントのグリッド

データ表示パターン

• data-table：ヘッダーと行を含むテーブル
• detail-card：キーと値のペア表示
• chart-card：Recharts チャートを囲むカード
• ranking-list：強調表示を含む番号付きランキング

インタラクティブパターン

• action-sheet：アクションボタンを含むボトムシート
• filter-bar：横方向のフィルター／タブバー
• search-header：ヘッダー領域の検索入力欄

手順

1. デザインシステムのリファレンスを確認します：

   • 規約については CLAUDE.md
   • 利用可能なプリミティブについては components/ui/
   • 既存のパターンについては components/patterns/

2. 既存のコンポーネントを組み合わせてパターンを構成します。プリミティブを作り直してはいけません。

3. デザインシステムのレイアウトルールに従います：

   • カード：bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]
   • セクションラッパー：水平方向の余白には mx-6
   • セクションタイトル：text-foreground font-bold text-[18px] mb-4
   • リストの間隔：space-y-3
   • グリッドの間隔：gap-4

4. すべての視覚プロパティにセマンティックトークンを使用します。

5. 動的コンテンツ用の props を備えた、再利用可能なコンポーネントとしてパターンを作成します。

例

ユーザーのリクエスト：

デザインシステムのプリミティブを使って、複合 UI パターン（カードレイアウト、リスト、フォームセクション、グリッドなど）を生成してください。

制限事項

• このスキルは、タスクが上流のソースとローカルプロジェクトのコンテキストに明確に合致する場合にのみ使用してください。
• 変更を適用する前に、コマンド、生成コード、依存関係、認証情報、外部サービスの動作を確認してください。
• 例を、環境固有のテスト、セキュリティレビュー、破壊的または高コストな操作に対するユーザー承認の代わりとして扱わないでください。

実行範囲

このガイドは、既存の StyleSeed プロジェクトを対象としています。記載されているプロジェクトパス、コンポーネント、トークン、/ss-* コマンドは、この単一ファイルのエントリーポイントには含まれていません。実際のプロジェクトルートを特定し、変更前に前提条件を確認してください。リソースが見つからない場合は、作り上げずにその旨を報告してください。ホストでサポートされている実行方法と、既存のプロジェクト規約を使用してください。レイアウトの数値はデザインシステム上の選択であり、普遍的なユーザビリティを保証するものではありません。実際のインターフェースで、キーボード操作、レスポンシブ時のオーバーフロー、動きを抑える設定をテストしてください。