specsfy-specialist-reui

プロダクトインターフェース向け ReUI

Specsfy では、React と Tailwind のインターフェースに shadcn/ui のプリミティブを、無料のコンポジションに ReUI を使用する方針です。これは、Promovaweb の CRUD とプロダクト画面における標準の基盤です。

使用するタイミング

無料の ReUI コンポーネントが必要な React 画面で使用してください。Laravel では、フロントエンドの React が Inertia、Vite、またはすでに設定済みの別の統合上で動作している場合に使用してください。Next.js、Astro、または純粋な React では、ルーティングとハイドレーションをホストフレームワークの設定に従わせてください。

フロー

1. INTERFACE.md、スタック、components.json、Tailwind、ローカルのプリミティブ、影響を受ける画面を確認してください。INTERFACE.md が存在しない場合は、インターフェースを作成する前に $specsfy-setup を実行してください。
2. レジストリの初期化を始める前に、React 19、Tailwind CSS v4、shadcn/ui を確認してください。このスキルと併せて $specsfy-specialist-shadcn-ui を読み込み、components.json、エイリアス、テーマ、プリミティブを初期化または監査してください。
3. プロジェクトの準備方法と、すでに使用されている Base UI または Radix のバリアントの選び方については、references/setup.md を読んでください。
4. 定義済みのユーザージャーニーに適合する無料アイテムだけを選ぶには、references/catalog-free.md を使用してください。代替を作成する前に、公開されているすべてのファミリーを確認するため、references/components-free.md も読んでください。React を使用する Laravel では、必ず references/shadcn-components.md を読んでください。
5. 手動で URL やプレミアムアイテムをコピーせず、レジストリが返す npx shadcn@latest add コマンドを使用して、必要最小限のセットをインストールしてください。
6. システムのデータ、アクション、状態、ルート、権限に合わせて変更する前に、アイテムの API と実際の使用例を読んでください。
7. インターフェースを React コンポーネントに分割してください。ページはフローを構成し、ドメインはグリッド、フォーム、フィルター、アクションをまとめ、再利用可能なプリミティブとコンポジションはプロジェクトですでに定義されているディレクトリに配置してください。
8. 作成または変更したブロックごとに INTERFACE.md を更新してください。ファイル、shadcn/ui または ReUI のどちらに由来するか、用途、props とイベント、状態、アクセシビリティ、利用者、再利用または拡張のルールを記載してください。
9. プロジェクトのテスト、typecheck、lint、build を実行して画面を検証してください。

パターン

• React と Tailwind のインターフェースを使うすべての CRUD では、ReUI をビジュアルの基盤として使用します。参照には Data Grid または List、絞り込みには Filters、作成と編集には Form および ReUI のフィールド、コンテキストに応じた操作には Dialog または Sheet、フィードバックとステータスには Alert/Badge を使います。無料カタログで必要な操作に対応できる場合、独自の代替手段を作成しないでください。
• 詳細表示を伴うリストでは、Data Grid の行全体をクリック可能にし、キーボードでも操作できるようにします。詳細画面が意図せず開かないよう、ボタン、チェックボックス、内部メニューは TableRowAction など、独立したアクションレイヤーに配置します。
• 作成と編集では、Form をセクションに分けて使用します。左側にコンテキスト、右側にフィールドパネルを配置し、広いブレークポイントでは 2 列、モバイルでは 1 列にします。
• すべての画面に、現在のチーム名、モジュール、現在のタイトルを含む Breadcrumb を設けます。Laravel では、レイアウトに既存の Breadcrumb または Breadcrumbs と、ルートで使われている型を再利用します。
• components.json に @reui を https://reui.io/r/{style}/{name}.json で登録します。c-* の項目は無料です。
• 既存のプリミティブライブラリを維持します。Base UI と Radix は API が異なりますが、Tailwind のスタイルは同等です。
• ReUI の意味的な成功、情報、警告、反転、破壊的操作のトークンは、画面で使用する場合に限り追加します。
• Laravel では Form Requests、ポリシー、サーバー側のバリデーションを維持します。ReUI はユーザー体験を向上させますが、PHP の契約に取って代わるものではありません。
• Laravel では、ReUI のレジストリーを導入する前に、Vite、Inertia React、React 19、Tailwind v4、shadcn/ui を整備します。Blade、Livewire、Vue に React コンポーネントを導入するには、先に spec に移行を記録する必要があります。
• 実際のタスクに適した複合コンポーネントを、実データとともに使用します。空、読み込み中、エラー、成功、キーボード、フォーカスの各状態も考慮します。
• ルートにグリッド、フォーム、フィルター、ダイアログ、サイドパネル、再利用可能なカードの実装を集中させないでください。それぞれを、責務と API が明確な React コンポーネントに切り出します。
• ReUI と shadcn/ui の使用した無料コンポーネントすべてに加え、独自の React ブロックすべてについて、説明、パス、API、状態、利用者、正しい再利用または拡張方法を INTERFACE.md に記録します。

アンチパターン

• プレミアムのブロック、アイコン、テンプレートを使用すること。このスキルでは無料カタログのみを対象とし、REUI_LICENSE_KEY は作成しません。
• コンポーネントのインストールのために、既存のプリミティブを Radix から Base UI に、またはその逆に移行すること。
• カタログにあるデモデータ、存在しない import、架空の API をコピーすること。
• 見た目のバリデーションを、認可や永続化のバリデーションとして扱うこと。
• まず ReUI の無料カタログを確認せずに、独自のテーブル、フィルター、モーダル、アップロード、CRUD フォームを作成すること。

検証

• プロジェクトで検出されたコマンドを実行し、キーボード操作、フォーカス、レスポンシブ表示、テーマ、画面の状態をテストします。
• インストールした各項目が @reui/c- で始まるか、レジストリー自身によってインストールされた公開依存関係であることを確認します。
• 終了前に components.json、import、追加したトークンを確認します。

関連スキル

• $specsfy-specialist-react は React の状態とテストを担当します。
• $specsfy-specialist-tailwind-css は Tailwind のトークンとユーティリティを担当します。
• $specsfy-specialist-shadcn-ui はプリミティブと components.json を担当します。
• $specsfy-specialist-laravel は Laravel のバックエンド、Inertia、認可、テストを担当します。
• $specsfy-specialist-ui-design と $specsfy-specialist-ux-design は、コンポーネントを選ぶ前に体験を定義します。

ReUI を適用する際は、公式の情報源、トークン、コマンドについて references/standards.md を読み、セットアップとカタログに関するリファレンスも参照してください。