specsfy-specialist-interface-experience

インターフェース体験

使用するタイミング

• 人が利用する画面、ダッシュボード、リスト、フォーム、ユーザーフロー、CRUDを新規作成または変更するときに実行します。
• UX、UI、実装に着手する前に実行し、既存のシステムを把握して、インターフェースについての検討を整理します。
• 人が利用する画面がないエンドポイント、ジョブ、内部的な変更には使用しません。

フロー

1. $specsfy-setup を読み込み、.specsfy/STACK.md、 .specsfy/PACKAGES.md、マニフェスト、ローカルの指示、最新のドキュメントを読みます。 画面を提案する前に $specsfy-specialist-design-system を読み込み、 DESIGNSYSTEM.MD を読みます。ファイルが存在しない場合は、 .specsfy/templates/DESIGNSYSTEM.MD からソースを作成します。 詳細を読み込む前に、node .agents/skills/specsfy-setup/scripts/inspect_interface.mjs --project <raiz> を実行して、ルート、コンポーネント、テクノロジーを特定します。
2. 影響を受ける領域に関連する画面、フロー、ルート、コンポーネント、コンテンツ、権限、状態、テストを調べます。 ユーザーがすでにできること、維持すべきこと、今回の変更で変わることを記録します。
3. プロジェクトで使用されているフレームワーク、ルーティング、プリミティブ、スタイル、フォーム、テストランナーを特定します。 それらの既存の仕組みに従い、ユーザーの確認なしにテクノロジーやライブラリを変更しません。
4. 実際に不足している情報に限り、質問の基本ルールを適用します。 画面、情報の流れ、フォーム、アクションの形式、構成について、一度に一つの不足事項を質問します。 ユーザーからビジュアルの方向性が示されない場合は、DESIGNSYSTEM.MD のデフォルトを適用し、 標準の方向性として記録します。既存のルールに反する依頼の場合に限り、構成について質問します。 現在のシステムに合ったテキスト形式の選択肢に加え、別の回答を書く、 他の選択肢を生成、次へ を提示します。
5. spec のセクション10に、確認したスタック、各画面、フロー、フォーム、構成、状態、アクセシビリティを記録します。 CRUDをAPI、データベース、サービスだけに限定してはいけません。CRUDでは、必ず一覧に PageHeader と、行をクリックして詳細を開ける DataGrid を割り当てます。 詳細画面には PageHeader と DetailLists、作成・編集画面には PageHeader と 2カラムのレスポンシブなフォームセクションを割り当てます。 すべての画面に、チーム、モジュール、現在の画面を示す Breadcrumb も割り当てます。 Laravelでは、レイアウトですでに使われているコンポーネントを再利用します。 PageHeader はこれらの画面で共通して再利用する単一のコンポーネントです。 一覧は利用可能な幅をすべて使い、専用の列に ID を表示します。 詳細へのリンクに加え、各行に編集と削除の操作を用意します。
6. セクション14に インターフェースフェーズ を作成し、画面ごとにタスクを一つずつ設けます。 また、ナビゲーション、フォーム、バリデーション、フィードバック、キーボード操作のテストも追加します。
7. ユーザーフローには $specsfy-specialist-ux-design、構成には $specsfy-specialist-ui-design を呼び出します。Reactプロジェクトでは、 JSXまたはTSXを書く前にコンポーネントを選択、再利用、調整するため、 $specsfy-specialist-react-ui-components を読み込みます。 スタックの実装には $specsfy-specialist-react も読み込みます。 それ以外のテクノロジーでは、setupで特定した同等のスペシャリストを読み込みます。

期待される結果

タスクに適した、情報が分かりやすく、機能的で、既存のシステムと製品の個性に一貫性のあるインターフェースです。 計画には画面、フォーム、状態、ビジネスルール、コンポーネント、テストが示されます。 実装では、記録された範囲外のすべてを維持します。

標準

• 各画面、アクション、フォーム、状態、戻り値を計画にマッピングします。
• すでに確認されている技術スタック、コンポーネント、ナビゲーションパターンを維持します。
• キーボード操作、フォーカス、レスポンシブ対応、メッセージを該当する画面と併せて記録します。
• すべての画面に Breadcrumb を表示し、現在のチーム名が常に見えるようにします。Laravel では、既存の Breadcrumb または Breadcrumbs と、その項目の型を再利用します。
• DESIGNSYSTEM.MD をマクロな基準として適用し、INTERFACE.md をローカルの記録として使用します。
• 定義された CRUD 画面では DataGrid、DetailLists、PageHeader を使用します。行を開くと詳細が表示され、内部のコントロールは独立して動作します。
• すべての CRUD 画面で、コンポーネント化された同じ PageHeader を再利用します。DataGrid は全幅にし、ID、編集、削除を行内で見えるようにします。
• 依頼されていない場合でも、開発中にボーダー、間隔、マージン、パディング、タイポグラフィを確認し、結果をタスクの VISUAL 項目に記録します。
• 作成と編集は、コンテキスト列を含むセクションに整理します。広いブレークポイントでは2列のパネル、モバイルでは1列にします。
• フィールドのエラーは赤色で表示し、フィールドの下にメッセージを示して、適切にフォーカスできるようにします。
• 汎用的なビジュアル構成に陥ることなく、プロダクトのデータ、表現、状態に基づいて階層を設計します。

アンチパターン

• 現在のルートとコンポーネントを確認せずに画面を提案する。
• CRUD をエンドポイントとして扱い、ユーザーの操作を説明しない。
• 正常な状態だけを検証し、空、エラー、権限の状態を無視する。

検証

• インターフェースを作成または変更するすべての納品物で、画面についてユーザーに質問したことを確認します。
• 提案の前に、セクション10に現在の技術スタックとシステムが記録されていることを確認します。
• DESIGNSYSTEM.MD が読まれているか作成済みであり、標準の方向性または例外が適用範囲とともに記録されていることを確認します。
• 工程に応じて、validate_spec.mjs、validate_tasks.mjs、validate_interface_tasks.mjs を実行します。
• インターフェースを完成させる前に、モバイルとデスクトップ、読み込み中、空、エラー、成功、権限、キーボード操作、フォーカスを確認します。

関連スキル

• ジャーニー、タスク、コンテンツには $specsfy-specialist-ux-design を使用します。
• ビジュアル構成と状態には $specsfy-specialist-ui-design を使用します。
• React 画面のコンポーネントの選定と再利用には $specsfy-specialist-react-ui-components を使用します。
• マクロなルール、デフォルト、CRUD シナリオには $specsfy-specialist-design-system を使用します。

アクセシビリティとインターフェースの検査に関する情報源については、 references/standards.md をお読みください。