getxuui/present

In xuui präsentieren

Verwandeln Sie die Arbeit im aktuellen Gespräch in eine laufende, überprüfbare xuui-Studie. Die Übergabe ist eine verifizierte lokale URL, eine kurze Erklärung der Designfrage und die Unterschiede, die es zu überprüfen gilt. Hören Sie nach der Übergabe weiter auf die Überprüfung der Person.

Bleiben Sie in xuui

xuui ist die Präsentationsfläche für diese Arbeit. Sobald ein Design in xuui ist, präsentieren Sie es dort weiter.

• Wenn eine andere Fähigkeit oder ein anderer Workflow ebenfalls im Spiel ist, verwenden Sie dessen Methode zur Auswahl der Richtungen, aber bauen Sie die Richtungen als xuui-Varianten auf. Bauen Sie niemals dessen Auswahl, einen Schalter innerhalb der Anwendung oder eine separate Vorschauseite.
• "Im Ganzen anzeigen", "auf der Website" oder "im Kontext" bedeutet eine größere xuui-Studie: Rendern Sie die umgebende Seite oder das Layout um das Design herum mit denselben Varianten.
• Ändern Sie die echte Anwendung nur, wenn die Person darum bittet, eine Richtung zu implementieren oder auszuliefern. Behalten Sie die Studie bei, damit die Wahl überprüfbar bleibt.

Entscheiden, was präsentiert werden soll

Verwenden Sie die angeforderte Benutzeroberfläche, die Referenz oder die aktuelle Arbeit als Anweisung. Präsentieren Sie eine bestehende Implementierung originalgetreu. Wenn die Anweisung nach Alternativen fragt, lassen Sie deren Unterschiede die Designfrage beantworten; wählen Sie die Anzahl aus der Anweisung und die nützlichen Vergleiche. Fragen Sie nur, wenn das Gespräch und der Arbeitsbereich das Thema unklar lassen.

Finden Sie den Studienarbeitsbereich aus dem aktuellen Projekt: Ein installierter Arbeitsbereich enthält xuui.studies.ts und eine lokale xuui-Abhängigkeit. Lesen Sie die README dieser Version, docs/authoring.md und die exportierten Typen sowie eine nahegelegene Registrierung. Verwenden Sie die installierte CLI, anstatt ein neueres Alpha in einen bestehenden Arbeitsbereich herunterzuladen. Ein xuui-Quellcode-Checkout verwendet stattdessen examples/studies.ts, src/xuui/model.ts und src/xuui/parameters.ts; lesen Sie dort CONTEXT.md. Leiten Sie den Verbraucherarbeitsbereich nicht durch Aufwärtssuche von einer installierten Fähigkeit ab.

Das Alpha präsentiert registrierte React-Komponenten in einem eigenständigen Arbeitsbereich. Wenn ein neuer Arbeitsbereich benötigt wird, führen Sie npx --package @getxuui/[email protected] xuui init <verzeichnis> aus, verwenden Sie dann dessen fixierte Installation. Für Arbeiten aus einer anderen Codebasis überprüfen Sie deren Tokens, benachbarte Benutzeroberfläche, responsive Einschränkungen, Provider und Daten. Passen Sie die relevante Komponente und die erforderlichen Abhängigkeiten an, ohne sie stillschweigend neu zu entwerfen. Fügen Sie einen Kontext-Wrapper hinzu, wenn die Isolation die Überprüfung verzerren würde, und legen Sie simulierte Daten oder nicht verfügbares Backend-Verhalten offen.

Eine Exploration gestalten

Wenn Alternativen angefordert werden, geben Sie die Designfrage an, nennen Sie die primäre Variable und sagen Sie, was konstant bleibt. Planen Sie Richtungen, die diese Frage beantworten. Beginnen Sie sie mit passendem Inhalt, aussagekräftigem Zustand, Darstellungsbereichsbreite und Maßstab. Generieren Sie keine Alternativen für eine Anfrage, ein bestehendes Design originalgetreu zu präsentieren. Lassen Sie die Anweisung und die nützlichen Vergleiche die Anzahl bestimmen.

Die Studie registrieren

Platzieren Sie das Design und seinen Adapter neben der Registrierung der Studie, den bestehenden Studien folgend. Fügen Sie die Studie zur zentralen Registry hinzu oder erweitern Sie die relevante bestehende Studie, wenn die Arbeit dieselbe Frage untersucht.

• Verwenden Sie die Produktbegriffe Studie, Variante, Canvas, Ebene und Anleitung. Registrieren Sie eine Studie mit defineStudy und listen Sie ihre Variants auf.
• Geben Sie jeder Variante eine stabile, beschreibende ID, die über alle registrierten Studien hinweg eindeutig ist. Fügen Sie eine neue ID hinzu, wenn Sie eine Richtung vorantreiben, die überprüfbar bleiben soll. Bewahren Sie die frühere Implementierung auf; das Teilen einer veränderlichen Komponente friert ihren Verlauf nicht ein.
• Schreiben Sie einen aussagekräftigen Namen, eine Beschreibung und eine Begründung für jede Variante.
• Registrieren Sie gewöhnliche React-Komponenten. xuui stellt Navigation, Schwenken, Zoomen, Inspektion, Vergleich und Kommentare bereit; die Studie liefert das Design und die Provider oder Daten, die es benötigt.
• Begrenzen Sie das CSS der Studie, sodass es weder das Studio-Chrome noch nicht zusammenhängende Varianten umgestalten kann. Geben Sie dem Design aussagekräftige Abmessungen; eine prozentuale Breite ohne dimensionierten containing block kann auf der Leinwand kollabieren.
• Fügen Sie data-xuui-layer-name hinzu, wo das DOM allein einen unbrauchbaren Ebenennamen liefert.

Zustände und Steuerelemente verfügbar machen

Die Seitenleiste zeigt die Steuerelemente an, die eine Variante deklariert, und der Prüfer kommentiert, was immer gerendert wird. Wählen Sie die Art von Steuerelement, die zum Design passt:

• machine für die unterschiedlichen Zustände des Designs und die Ereignisse, die zwischen ihnen wechseln: leer, laden, geladen und Fehler; geschlossen und offen; die Schritte eines Formulars oder Ablaufs. Der Prüfer kann von der Seitenleiste aus zu jedem Zustand springen und die Übergänge im Wiedergabemodus verfolgen, sodass jeder Zustand beurteilt und kommentiert werden kann. Benennen Sie Zustände und Ereignisse so, wie das Produkt es tut. Rendern Sie basierend auf machine.value und verdrahten Sie die echten Interaktionen des Designs mit machine.send(event), sodass ein Klick im Wiedergabemodus derselben Maschine folgt.
• state für unabhängige Werte, auf die das Design reagiert, wie z. B. einen favorisierten Schalter oder eine Artikelanzahl.
• props für Designparameter, die sich zu vergleichen lohnen, wie z. B. Text, Radius oder Breite.

Wenn das Design aussagekräftige Zustände über den Happy Path hinaus hat, machen Sie sie mit einer Maschine zugänglich, anstatt nur einen Zustand darzustellen. Erfinden Sie keine Zustände, die das Design nicht hat. Machen Sie nur Steuerelemente zugänglich, die das gerenderte Design ändern, und überprüfen Sie, ob jeder Zustand rendert. Siehe die installierte docs/authoring.md für die genaue Form.

Beschränken Sie die Änderungen auf die angeforderte Studie und die Registrierung, die zu ihrer Darstellung erforderlich ist. Eine Präsentationsanfrage autorisiert keine Neugestaltung des Studios selbst.

Fertig bedeutet, dass das angeforderte Design von einer registrierten Variante gerendert wird und die verfügbar gemachten Steuerelemente funktionieren.

Ausführen und verifizieren

Verwenden Sie in einem installierten Arbeitsbereich npx --no-install xuui dev; in einem Quellcode-Checkout verwenden Sie dessen Paketskripte. Überprüfen Sie zuerst auf eine vorhandene Vorschau und verwenden Sie diese wieder, wenn sie für den beabsichtigten Arbeitsbereich dient. Lassen Sie nicht zusammenhängende Prozesse in Ruhe. Lassen Sie den lokalen Server für den Prüfer laufen und verwenden Sie den tatsächlich ausgegebenen Ursprung.

Öffnen Sie eine URL mit dem tatsächlichen Serverursprung und den registrierten IDs:

• Fokussierte Variante: /?study=<studien-id>&variant=<varianten-id>
• Vergleich: dieselbe URL mit &view=all

Verifizieren Sie die Identität der gerenderten Variante, anstatt einen HTTP 200 als Beweis zu behandeln: unbekannte IDs fallen auf eine bestehende Studie zurück. Überprüfen Sie die Benutzeroberfläche, führen Sie wichtige Interaktionen im Wiedergabemodus aus und probieren Sie jedes verfügbare Steuerelement aus. Wenden Sie die gleiche Benutzbarkeitsschwelle auf jede Richtung an: Tastaturzugriff, sichtbarer gesamter Steuerelementfokus, lesbarer Text, angemessene reduzierte Bewegung und realistische Inhalte, Zustände und Breiten. Führen Sie relevante Projektprüfungen durch und melden Sie Fehler oder nicht verfügbare Prüfungen genau.

Verwenden Sie isolierten Testspeicher für Einreichungsprüfungen. Lassen Sie die echten Entwurfskommentare und eingereichten Aufzeichnungen des Prüfers intakt.

Fertig bedeutet, dass der Link das beabsichtigte Design öffnet, sinnvolle Interaktionen funktionieren und die Überprüfungsgrenze klar ist.

Übergeben

Geben Sie den fokussierten Link sowie einen Vergleichslink zurück, wenn dies nützlich ist. Erklären Sie in wenigen Sätzen, was zu beurteilen ist, und nennen Sie wesentliche Einschränkungen wie simulierte Daten. Der Prüfer verwendet Wiedergabe für Interaktionen, C für Kommentare und Überprüfung einreichen für die Übergabe. Beenden Sie, indem Sie sagen, dass Sie auf ihre Überprüfung warten und sie in der Zwischenzeit weiter chatten können.

Fügen Sie für Alternativen eine kurze Tabelle hinzu, die zeigt, was sich geändert hat, wann jede Richtung passt und welche Hauptkosten sie hat. Geben Sie die überprüfte Breite und den Zustand an. Wählen Sie nicht stillschweigend einen Gewinner. Wenn Sie gebeten werden, eine Wahl voranzutreiben, verifizieren Sie das beworbene Design in seinem Quellkontext und behalten Sie seine überprüfbare Studie bei; bewahren Sie alte Implementierungen auf und fügen Sie stabile IDs für weitere vergleichbare Arbeiten hinzu.

Auf Feedback warten

Warten Sie nach der Übergabe auf die Überprüfung, ohne gefragt zu werden.

• Wenn die xuui-MCP-Tools verfügbar sind, rufen Sie xuui_wait_for_review mit der studyId der Studie auf. Jeder Aufruf wird innerhalb von 50 Sekunden zurückgegeben. Rufen Sie es erneut mit den zurückgegebenen knownReviewIds auf, bis eine Überprüfung eintrifft oder die Person Sie bittet, aufzuhören.
• Wenn sie nicht verfügbar sind, ist der MCP-Server des Arbeitsbereichs nicht verbunden. Bieten Sie an, ihn zu verbinden, folgen Sie der installierten docs/mcp.md und sagen Sie, ob der Host einen Neustart benötigt, um ihn zu laden. Wenn Ihr Host bis dahin einen Hintergrundbefehl ausführen kann, der Sie benachrichtigt, wenn er fertig ist, verwenden Sie einen, um auf eine neue Datei in .xuui/reviews/ zu warten. Andernfalls bitten Sie die Person, Ihnen zu sagen, wann sie die Überprüfung eingereicht hat.

Wenn eine Überprüfung eintrifft, lesen Sie das vollständige Paket, bestätigen Sie es dann mit xuui_acknowledge_review. Eine Quittung bedeutet, dass Sie es gelesen haben, nicht, dass seine Anfragen erledigt sind. Browser-Entwürfe sind kein eingereichtes Feedback. Handeln Sie nach den Kommentaren: Nehmen Sie Änderungen als neue Varianten mit neuen IDs vor, verifizieren Sie sie, übergeben Sie die neuen Links und warten Sie erneut.