specsfy-specialist-react-ui-components

React インターフェースコンポーネント

使用する場面

• assets/components/ にバージョン管理されている 231 個の TSX サンプルをもとに、React インターフェースを作成する必要がある場合に使用します。
• ランタイムライブラリを導入せずに、ナビゲーション、フォーム、データ、フィードバック、マーケティング、タイポグラフィのバリエーションを比較する場合に使用します。
• 見た目の作業を伴わず、state、effects、並行処理を修正する場合は使用せず、$specsfy-specialist-react を使用します。
• 必ず $specsfy-specialist-ui-design と併用します。アセットを選ぶ前に、階層、構成、密度を決定します。

フロー

1. 併用することを伝え、参照先を選ぶ前に $specsfy-specialist-design-system と $specsfy-specialist-ui-design を読み込みます。DESIGNSYSTEM.MD をマクロな情報源として、 INTERFACE.md をローカルの記録として適用します。
2. 利用側プロジェクトの React のバージョン、フレームワーク、Tailwind、デザインシステム、ローカルコンポーネント、 アイコン、テスト戦略を確認します。shadcn/ui がある場合は、アセットを適合させる前に、 各コンポーネントのプリミティブの基盤を $specsfy-specialist-shadcn-ui に確認します。
3. UX および UI とともに、主なタスク、画面、情報の流れ、フォーム、 開き方のパターン、階層、構成、密度、状態、ブレークポイントを確認します。 カタログはこれらを選択しません。
4. 認証が必要な CRUD では、まず PageHeader、DataGrid、DetailLists、 フォーム、フィードバックのファミリーを選びます。ダッシュボードでは、 PageHeader、フィルター、指標、メインの視覚化、詳細な調査を選びます。 カタログを参照する前に、各サーフェスを分けておきます。
5. references/catalog.md でファミリーを選び、 assets/components/<familia>/ にある候補アセットだけを一覧表示します。
6. バリエーションを比較できる最小限の TSX ファイルを読みます。
7. 参照先を、確認済みのトークン、コンポーネント、ルート、データ、規約に合わせて適合させます。 サンプルの構造でローカルのアーキテクチャを置き換えてはいけません。
8. 関連するすべての状態を実装し、動作、外観、レスポンシブ対応、アクセシビリティを検証します。

ページ全体については、 references/composition-map.md を読みます。段階的に選択を進めるには、 references/conversation-flow.md を読みます。

ガイドライン

• assets/ 内のファイルはコピー可能な参照資料として扱い、パッケージやランタイム依存として扱わないでください。
• 適用時には、セマンティクス、キーボード操作、フォーカス、aria-*、sr-only、alt、ダークモード、および有用なブレークポイントを維持してください。
• 利用するプロジェクトで公開済みのトークン、プリミティブ、Link、画像、コンポーネントを優先してください。
• モックデータ、外部 URL、href="#"、デモ用コピーを置き換えてください。
• Headless UI や Heroicons など、アセットが明示的に依存するものを使用前に確認してください。許可なくパッケージをインストールしないでください。
• $specsfy-specialist-ui-design で定義された構成を維持してください。サンプルがあるからといって、セクションを追加する理由にはなりません。
• CRUD のデフォルトを守ってください。リストには DataGrid、詳細には DetailLists、すべての画面には PageHeader を使用し、作成・編集フォームはレスポンシブな 2 カラムのセクションに整理してください。
• DataGrid の行はクリックまたはキーボード操作で詳細を開けるようにし、内部のボタン、チェックボックス、メニューには TableRowAction または同等の仕組みを適用してください。
• すべての画面に Breadcrumb を表示し、アクティブなチーム名、モジュール、現在の画面を維持してください。Laravel では新たなプリミティブを作成せず、レイアウトに既存の Breadcrumb または Breadcrumbs を再利用してください。
• 関連するフィールドは広いブレークポイントでは 2 カラム、モバイルでは 1 カラムにまとめてください。長いフィールドとエラーメッセージには全幅を使用してください。
• ダッシュボードでは、画面の問い、範囲、フィルター、指標、状態に合った ReUI ブロックまたは互換性のある shadcn/ui プリミティブを使用してください。
• フィールドエラーは赤色でフィールドの下にメッセージを表示し、最初のエラーにフォーカスを移し、入力値を保持してください。
• カタログの汎用的な構成をコピーするのではなく、階層、データ、言葉遣い、プロダクトの状態によって画面に個性を持たせてください。
• 状態の所有、effects、競合、または React テストについては $specsfy-specialist-react と連携し、詳細な監査については $specsfy-specialist-web-accessibility と連携してください。

アンチパターン

• ページ全体をコピーし、モックデータ、存在しない import、または # リンクを残すこと。サンプルが参照資料ではなく、密結合した負債になってしまいます。
• タスクと階層を定義する前に見た目でアセットを選ぶこと。カタログが画面の意図に応えるのではなく、プロダクトを左右することになります。
• サンプルに記載された依存関係をすべてインストールし、ローカルのプリミティブを調査しないこと。コンポーネントとトークンの競合する供給元が 2 つ生まれます。
• 便宜上、静的コンポーネントを Client Components に変えること。不要な JavaScript の送信が増え、理由もなく表示と状態が混在します。

検証

• 利用するプロジェクトで定義済みのテスト、lint、typecheck を実行してください。
• 該当する場合は、nominal、loading、empty、error、disabled、permission denied の各状態を確認してください。
• モバイルとデスクトップ、ズーム、overflow、短い／長いコンテンツ、キーボード操作、フォーカス、コントラスト、reduced motion を確認してください。
• import と外部アセットが存在すること、暗黙的にパッケージが追加されていないことを確認してください。
• references/interface-quality-checklist.md と $specsfy-specialist-ui-design を使って最終的なインターフェースを確認してください。
• キーボード操作、好ましくない状態、サポート対象のブレークポイントで overflow が発生しないことを実証せずに、インターフェースが統合済みだと宣言しないでください。
• DESIGNSYSTEM.MD を読んだこと、および視覚的な例外がある場合はその適用範囲が記録されていることを確認してください。

関連スキル

• $specsfy-specialist-interface-experience は、React コンポーネントを選定する前に、画面の発見から実装までを一貫して整理します。
• $specsfy-specialist-shadcn-ui は、プリミティブの基盤を特定し、適応可能なコンポーネントを提供します。このスキルが提供するのはコピー可能な TSX の構成であり、ランタイム依存関係ではありません。
• $specsfy-specialist-ui-design は、構成、階層、密度、視覚的な一貫性を統括します。このスキルは適応可能な React の素材を提供します。
• $specsfy-specialist-design-system は、アセットを選定する前に、マクロルールと CRUD パターンを統括します。
• $specsfy-specialist-react は、状態の所有権、effects、並行処理、動作テストを統括します。
• $specsfy-specialist-tailwind-css は、視覚的な適応に使用するトークンとユーティリティを統括します。
• $specsfy-specialist-web-accessibility は、基本的なインターフェースの確認に加えて、WCAG 監査と支援技術を用いたテストを実施します。
• $specsfy-specialist-nextjs または $specsfy-specialist-astro は、ホストフレームワークのサーバー／クライアント境界とルーティングを統括します。

references/standards.md を読み、選定、適応、状態、依存関係、検証に関するルールを確認してください。また、references/ のその他のファイルは、ワークフローで指定されたステップでのみ読み込んでください。