ui-ux-pro-max

ui-ux-pro-max

トークン、コンポーネント、インタラクションの共通ルールとして、デザインシステムを使用します。保守やレビューでは、プロジェクトのシステムを再利用します。システムがない場合、またはユーザーが新しい方向性を求めた場合にのみ、推奨事項を生成します。

design-gate では、呼び出し元の正式なゲート結果を使用します。これにより、単独の出力と編集の仕組みを置き換えます。レンズ固有の結論は、安定した検出事項 ID とともに、検出事項または review_focus に記載します。インタビューでは、既存の意思決定記録に判断項目を追加します。

作業を選択する

1. 既存のインターフェースをレビューする： 対象となる画面とインタラクションを、選択したシステムと比較します。ユーザーが修正を求めない限り、編集は行わず、検出事項を返します。データベース検索は任意です。
2. 選択したシステムに沿って実装する： 要求された変更に、そのシステムのトークン、コンポーネント、インタラクションルールを適用します。確定済みの判断を再利用します。実装に影響する可能性がある詳細のみを検索します。
3. 新しいシステムを作成または保存する： 生成と永続化のコマンドについては、references/search-reference.md を読んでください。製品、業界、スタイル、ユーザーの要件を検索語として使用します。
4. 具体的なデザイン上の疑問を解決する： ドメインやスタックの検索については、references/search-reference.md を読んでください。検索結果や視覚的な例が作業に役立つ場合にのみ読み込みます。

既存のプロジェクトスタック、またはユーザーが選択したスタックを使用します。選択されたスタックがない新しい成果物に限り、html-tailwind を使用します。

独自のビジュアル実装には frontend-design を使用します。コンポーネントのレンダリング、メモ化、コンテキストの更新、古いクロージャ、フェッチの競合をレビューするには advanced-react を使用します。このスキルの react ドメインが、そのレビュー用の参照データを提供します。

選択したシステムを適用する

保存済みのシステムについては、design-system/<project-slug>/MASTER.md を読みます。対象ページについては、design-system/<project-slug>/pages/<page-slug>.md を確認します。ページのルールは該当するマスターのルールより優先され、マスターにはそれ以外のすべてのルールが適用されます。ページファイルがない場合は、マスターを使用します。

データベースの出力、生成されたチェックリスト、サンプル値は推奨事項として扱います。結果には、ユーザーの要件、選択したシステム、プロジェクトのトークンを適用します。推奨事項を調整する際も、アクセシビリティ要件を維持します。

アイコンの一貫性を保ち、公式ソースでブランドアセットを確認します。インタラクション時のフィードバックを明確にし、レイアウトを安定させます。プロジェクトのカーソルとモーションの規約に従います。

対象のインターフェースを検証する

変更したページとインタラクションには、1 つのチェックセットを使用します。関連するシステムルール、生成されたチェック項目、以下の要件を、重複して確認することなく組み合わせます。

1. 読みやすいコントラスト、視認できるキーボードフォーカス、ラベル、画像の代替テキスト、色以外の手がかり。
2. 一貫したアイコン、明確なインタラクションフィードバック、モーション低減への対応。
3. レスポンシブなレイアウト、意図しないモバイルでの横スクロールがないこと、固定要素の背後にコンテンツが隠れないこと。

共有カラーまたはモードの動作を変更した場合は、対応するライトモードとダークモードを確認します。局所的な変更では、対応モードで影響を受ける箇所を確認します。

変更のない箇所には、既存の検証結果を再利用します。修正後は、影響を受ける動作を再確認します。変更や失敗によって、より広い範囲にリスクがあると分かった場合にのみ、確認範囲を広げます。テストした範囲と、未対応または未テストのモードを報告します。