office-web-ui-system

Office Web UI System

レコードの確認、フィルタリング、比較、編集、管理を支える、わかりやすく使いやすい運用インターフェースを作成します。使いやすい領域と、製品のビジュアルアイデンティティを維持してください。

委任

デフォルトではメインの会話で実行します。委任すると使用量が増えることがあります。サブエージェントを使用する前に、提案するエージェント数とスコープについて明示的な承認を得てください。承認された範囲内では、その承認を再利用できます。承認済みの数やスコープを拡大する場合は、改めて確認してください。

ページの役割を把握する

フレームワーク、コンポーネントライブラリ、デザインシステムのソース、共通シェル、代表的な画面を調べます。依頼内容とプロジェクトから、運用向けの画面かどうかを推測してください。その区別が不明確で、デザインに影響する場合に限り、確認してください。

主要なタスクと支配的な領域を特定します。ダッシュボード／レポート、CRUD／リスト、ワークスペース／詳細、フォーム／ウィザードを構成の参考にしてください。不慣れなページタイプの場合は、page-type-playbook.md を読んでください。

スクリーンショットを基に作業する場合は、何を一致させ、既存の製品に合わせて何を調整すべきかを明確にします。提示されたターゲットが、選択された方向性です。

実務に即して構成する

• タイトル、コンテキスト、主要なアクション、フィルター、データの階層を明確にします。補助パネルを追加する前に、テーブルやフォームに必要な幅を確保してください。
• 情報量の多いCRUD画面は控えめなデザインにします。ユーザーがページを理解する助けになる場合に限り、表現豊かなサマリーやヒーロー表示を使用してください。
• 指標は意味ごとにまとめ、関連する場合は日付範囲、単位、比較、詳細表示を定義します。ユーザーのタスクに結び付かない装飾的な統計は避けてください。
• 共通コンポーネント、トークン、ユーティリティ、モーションのルールを再利用します。具体的な見た目や動作の不足を補う場合に限り、局所的な例外を追加してください。
• 関連する読み込み、空、エラー、検証、選択、無効、フォーカスの各状態に対応します。サポート対象のテーマやビューポートで、キーボード操作、タッチ操作の使いやすさ、読みやすさを維持してください。
• プリミティブは、導入済みのフレームワークとライブラリに合わせて調整してください。一貫性のある既存の製品に、新しいシェル、ピル型トップバー、グラスモーフィズム、ダークテーマを無理に適用しないでください。

設計するコンポーネントについては、visual-language.md、navigation-and-panels.md、component-recipes.md を参照してください。ライブラリの内部構造やスコープ付きスタイルの問題には、framework-adaptation.md を使用してください。

各領域を見つけやすくする

重要な領域の特定には、セマンティックなマークアップ、アクセシブルな名前、既存のコンポーネント境界、または安定したプロジェクトロケーターを使用してください。実際に領域を見つけにくい問題を解決できる場合は、意味のわかるクラスを追加します。クラスのルールに合わせるだけのために、無関係なマークアップを一律に変更しないでください。

そのようなクラスを追加する場合は、locator-class-contract.md を読んでください。任意のスキャナーは、これらのクラスをファイルに対応付けます。

python3 "<skill-directory>/scripts/scan_ui_locators.py" "<project-root>" --match layout-sidebar

直接ソースを検索すれば対象を特定できる場合は、その方法を使用してください。スキャナーはアクセシビリティを検証するものではなく、ブラウザーでの確認に代わるものでもありません。

結果を検証する

ホストのブラウザーポリシーに従い、実際にレンダリングされたページを確認してください。変更を示す領域またはページをキャプチャします。変更前後や参照画像を比較する場合は、ビューポート、テーマ、アカウント、データを揃えてください。重要な判断に役立つ場合に限り、不明瞭な画像に注釈を付けます。

階層、情報密度、オーバーフロー、テキストの収まり、テーブルの操作、キーボード操作で表示されるフォーカス、サポート対象のテーマやレスポンシブ状態を確認してください。オーバーライドがダークモードに影響する場合は、ライブラリの実際のレンダリング済みノードを調べます。選択したターゲットとの重大な差異を修正してください。レンダリングできない場合は、その制約を報告してください。

対象を絞ったプロジェクトチェックと、関連する回帰テストを実行します。ユーザーから見える変更、証拠、ブラウザーの表示面、残っている課題を報告してください。手動のスクリーンショットは自動E2Eテストのカバレッジと区別してください。