getxuui/present

xuuiでプレゼンテーション

現在の会話での作業内容を、実行可能でレビュー可能なxuuiスタディに変換します。受け渡しは、検証済みのローカルURL、デザイン上の問いかけの簡単な説明、およびレビューすべき差異です。受け渡し後も、相手のレビューに引き続き耳を傾けてください。

xuuiに留まる

xuuiはこの作業のプレゼンテーション面です。デザインがxuuiに配置されたら、そこに表示し続けてください。

• 別のスキルやワークフローも同時に使用されている場合は、その方法で方向性を選択しますが、方向性はxuuiのバリアントとして構築してください。その選択ツール、アプリケーション内部のスイッチャー、または別のプレビューページを決して構築しないでください。
• 「ページ全体で表示」、「サイト内で」、または「コンテキスト内で」とは、より大きなxuuiスタディを意味します。デザインの周囲のページやレイアウトを、同じバリアントとともにレンダリングしてください。
• 実際のアプリケーションを変更するのは、相手が方向性の実装や出荷を依頼した場合のみにしてください。スタディは保持し、選択がレビュー可能なままにしておいてください。

何を提示するか決定する

要求されたUI、リファレンス、または最近の作業を概要として使用します。既存の実装を忠実に提示してください。概要が代替案を求める場合、その違いがデザイン上の問いに答えるようにし、概要から数と有用な比較を選択してください。会話とワークスペースから主題が不明確な場合にのみ質問してください。

現在のプロジェクトからスタディワークスペースを見つけてください。インストール済みのワークスペースには xuui.studies.ts とローカルのxuui依存関係があります。そのバージョンのREADME、docs/authoring.md、エクスポートされた型、および近くの登録を読んでください。インストール済みのCLIを使用し、既存のワークスペースに新しいアルファ版をダウンロードしないでください。xuuiソースチェックアウトの場合は、代わりに examples/studies.ts、src/xuui/model.ts、src/xuui/parameters.ts を使用し、そこの CONTEXT.md を読んでください。インストール済みのスキルから上方向にたどってコンシューマーワークスペースを推測しないでください。

アルファ版は、登録されたReactコンポーネントをスタンドアロンワークスペースに表示します。新しいワークスペースが必要な場合は、npx --package @getxuui/[email protected] xuui init <directory> を実行し、その固定されたインストールを使用してください。別のコードベースからの作業の場合は、そのトークン、近隣のUI、レスポンシブ制約、プロバイダー、データを検査してください。関連するコンポーネントと必要な依存関係を、黙って再設計することなく適応させてください。分離によってレビューが歪む場合はコンテキストラッパーを含め、モックデータや利用できないバックエンドの動作を開示してください。

探索を枠組みする

代替案が要求された場合、デザイン上の問いを述べ、主要な変数に名前を付け、何が一定に保たれるかを説明してください。その問いに答える方向性を計画してください。一致するコンテンツ、意味のある状態、ビューポート幅、スケールから開始してください。既存のデザインを忠実に提示する要求に対しては、代替案を生成しないでください。概要と有用な比較が数を決定できるようにしてください。

スタディを登録する

デザインとそのアダプターを、既存のスタディに従ってスタディの登録の隣に配置してください。スタディを中央レジストリに追加するか、作業が同じ問いを探求する場合は関連する既存のスタディを拡張してください。

• 製品用語として スタディ、バリアント、キャンバス、レイヤー、ガイド を使用してください。defineStudy でスタディを登録し、その variants をリストしてください。
• 各バリアントに、登録済みのすべてのスタディ間で一意の、安定したわかりやすいIDを付けてください。レビュー可能に保つべき方向性を進めるときは、新しいIDを追加してください。以前の実装を保持してください。可変コンポーネントを共有しても、その履歴は固定されません。
• 各バリアントに有用な名前、説明、および根拠を書いてください。
• 通常のReactコンポーネントを登録してください。xuuiがナビゲーション、パン、ズーム、検査、比較、コメントを提供します。スタディはデザインと、それが必要とするプロバイダーまたはデータを提供します。
• スタジオのクロームや無関係なバリアントを再スタイルできないように、スタディのCSSのスコープを制限してください。デザインに意味のある寸法を与えてください。サイズ指定された包含ブロックがない場合のパーセンテージ幅は、キャンバス上で崩れる可能性があります。
• DOMだけでは役に立たないレイヤー名になる場所に data-xuui-layer-name を追加してください。

状態とコントロールを公開する

サイドバーはバリアントが宣言するコントロールを表示し、レビュアーはレンダリングされたものすべてにコメントします。デザインに一致するコントロールの種類を選択してください。

• machine: デザインの異なる状態と、それらの間を移動するイベント（空、ローディング中、ロード済み、エラー、閉じている、開いている、フォームやフローのステップなど）に使用します。レビュアーはサイドバーから任意の状態にジャンプし、Playモードで遷移を追えるため、各状態を判断してコメントできます。状態とイベントには製品と同じ名前を付けてください。machine.value からレンダリングし、デザインの実際のインタラクションを machine.send(event) に配線することで、Playモードでのクリックが同じマシンに従うようにしてください。
• state: デザインが反応する独立した値（お気に入りトグルやアイテム数など）に使用します。
• props: 比較する価値のあるデザインパラメータ（コピー、半径、幅など）に使用します。

デザインにハッピーパスを超えた意味のある状態がある場合は、1つの状態を提示するのではなく、マシンで公開してください。デザインにない状態を発明しないでください。レンダリングされたデザインを変更するコントロールのみを公開し、すべての状態がレンダリングされることを確認してください。正確な形状については、インストール済みの docs/authoring.md を参照してください。

変更は、要求されたスタディと、それを提示するために必要な登録に限定してください。プレゼンテーション要求は、スタジオ自体の再設計を許可するものではありません。

完了とは、要求されたデザインが登録されたバリアントからレンダリングされ、公開されたコントロールが機能することを意味します。

実行と検証

インストール済みのワークスペースでは npx --no-install xuui dev を使用し、ソースチェックアウトではそのパッケージスクリプトを使用してください。既存のプレビューがないか確認し、目的のワークスペースに使用できる場合は再利用してください。無関係なプロセスはそのままにしておいてください。ローカルサーバーはレビュアーのために起動したままにし、実際に出力されたオリジンを使用してください。

実際のサーバーオリジンと登録されたIDを使用してURLを開いてください。

• フォーカスされたバリアント: /?study=<study-id>&variant=<variant-id>
• 比較: 同じURLに &view=all を追加

HTTP 200を証明として扱うのではなく、レンダリングされたバリアントの同一性を検証してください。不明なIDは既存のスタディにフォールバックします。UIを検査し、Playモードで重要なインタラクションを実行し、公開された各コントロールを試してください。各方向性に同じユーザビリティ基準を適用してください。キーボードアクセス、可視の全体コントロールフォーカス、読み取り可能なテキスト、適切な reduced motion、現実的なコンテンツ、状態、幅。関連するプロジェクトチェックを実行し、失敗または利用できないチェックを正確に報告してください。

提出チェックには分離されたテストストレージを使用してください。レビュアーの実際の下書きコメントと送信済みレコードはそのままにしておいてください。

完了とは、リンクが意図したデザインを開き、意味のあるインタラクションが機能し、レビューの境界が明確であることを意味します。

受け渡し

フォーカスされたリンクと、有用な場合は比較リンクを返してください。判断すべき点を数文で説明し、モックデータなどの重要な制限事項を挙げてください。レビュアーはPlayでインタラクション、Cでコメント、Submit reviewで受け渡しを行います。最後に、レビューに耳を傾けており、その間チャットを続けてもよいと伝えてください。

代替案の場合は、変更点、各方向性が適している場合、その主なコストを短い表で追加してください。レビューされた幅と状態を記載してください。黙って勝者を選ばないでください。選択を進めるよう求められた場合は、プロモートされたデザインをソースコンテキストで検証し、レビュー可能なスタディを保持してください。古い実装を保存し、さらなる比較作業のために安定したIDを追加してください。

フィードバックを待つ

受け渡し後、尋ねられることなくレビューを待機してください。

• xuui MCPツールが利用可能な場合、xuui_wait_for_review をスタディの studyId で呼び出してください。各呼び出しは50秒以内に返ります。返された knownReviewIds を使って再度呼び出し、レビューが到着するか、相手が停止を求めるまで続けてください。
• 利用できない場合、ワークスペースのMCPサーバーが接続されていません。インストール済みの docs/mcp.md に従って接続することを提案し、ホストがロードするために再起動が必要かどうかを伝えてください。それまでは、ホストがバックグラウンドコマンドを実行して終了時に通知できる場合は、それを使用して .xuui/reviews/ 内の新しいファイルを待機してください。そうでない場合は、相手に送信したら知らせるよう依頼してください。

レビューが到着したら、完全なパッケージを読み、その後 xuui_acknowledge_review で確認してください。受信は、読んだことを意味し、そのリクエストが完了したことを意味するわけではありません。ブラウザの下書きは送信されたフィードバックではありません。コメントに基づいて行動してください。新しいIDを持つ新しいバリアントとして変更を加え、検証し、新しいリンクを受け渡し、再度待機してください。