Wähle eine Bibliothek
Vor jeder Entscheidung wende product-ui §1 (das Geschmacks-Tagebuch und die Präzedenz) und §5 (welches Skill wofür zuständig ist) an. Eine Tagebuch-Regel, die eine Bibliothek nennt, gewinnt.
Wenn ohne Aufgabe aufgerufen, frage in einer einzigen Zeile danach und stoppe.
Entscheidungsreihenfolge
Gehe diese Schritte von oben nach unten durch. Stoppe beim ersten Schritt, der die Aufgabe vollständig löst.
- Was ist bereits installiert? Lese
package.json. Wenn eine aufgeführte Bibliothek oder ein Konkurrent die Aufgabe bereits erledigt, verwende sie. Markiere einen besseren Fund in einer Zeile und tausche niemals eine Abhängigkeit ungefragt aus. Warum: Eine zweite Bibliothek für denselben Zweck verdoppelt das Bundle und die Konventionen. - Löst die Plattform es vollständig? Überprüfe die Tabelle unten. Warum: Die Plattform hat keine Bundle-Kosten, keinen Upgrade-Pfad und kein Abwanderungsrisiko.
- Hat die Liste einen Eintrag? Öffne references/catalogue.md, finde die Kategorie und nimm den mit Standard markierten Eintrag. Empfehle eine Bibliothek, kein Menü.
- Wird dieser Eintrag gewartet? Überprüfe die Status-Spalte. Wenn dort Nicht gewartet steht, empfehle sie niemals; verwende den im Eintrag genannten Ersatz.
- Nichts passt? Sage „Diese Aufgabe ist nicht in der Liste“, wähle dann aus deinem eigenen Wissen und führe die untenstehende Überprüfung dafür durch. Warum: Ein ungeprüftes Paket ist der übliche Weg, wie veralteter Code ins Projekt gelangt.
„Vollständig lösen“ bedeutet, dass jede Anforderung der Aufgabe erfüllt ist, einschließlich Tastatur-, Fokus- und Screenreader-Verhalten. Wenn eine Anforderung nicht erfüllt ist, gehe zu Schritt 3.
Plattform zuerst
| Aufgabe | Plattform-Antwort | Wechsel zu einer Bibliothek, wenn |
|---|---|---|
| Modal | <dialog> mit showModal() | Du gestapelte Dialoge mit animiertem Ausgang über alle von dir unterstützten Browser hinweg benötigst, oder nicht-modales Fokusmanagement |
| Popover, Dropdown-Panel, Tooltip-ähnliche Karte | popover-Attribut plus CSS-Ankerpositionierung, wo unterstützt | Du überall Kollisions-Flipping oder ein Menü mit Roving-Fokus benötigst |
| Akkordeon, Offenlegung | <details name> | Du kontrollierten Zustand oder animierte Höhe über interpolate-size hinaus benötigst |
| Dunkelmodus ohne Umschalter | prefers-color-scheme, color-scheme, light-dark() | Der Benutzer wählt das Design manuell aus und es muss dauerhaft sein |
| Datums-, Uhrzeit- oder Monatseingabe | <input type="date"> und seine Geschwister | Du Bereiche, einen benutzerdefinierten Kalender oder ein einheitliches Erscheinungsbild benötigst |
| Zahlenformatierung, relative Zeit, Pluralformen, Listen | Intl.NumberFormat, RelativeTimeFormat, PluralRules, ListFormat | Niemals. Verwende immer Intl |
| Einmalcode, Einzelfeld | <input autocomplete="one-time-code" inputmode="numeric"> | Du ein Feld pro Ziffer benötigst |
| Ein-, Aus- und Layout-Animation | CSS-Übergänge, @starting-style, WAAPI, View Transitions | Du Federn, Gesten oder unterbrechbare Layout-Animation benötigst |
| Formularvalidierung | Constraint-Validierung (required, pattern, setCustomValidity) | Du feldübergreifende oder asynchrone Regeln oder ein typisiertes Schema benötigst |
| Select mit wenigen Optionen | <select> | Du Suche, Mehrfachauswahl oder umfangreiche Zeilen benötigst |
| Klebrige Kopfzeilen, Scroll-Snap, faule Listen | CSS position: sticky, scroll-snap, content-visibility: auto | Die Liste 1.000+ Zeilen enthält |
Paare
| Kaputt | Gefixt | Warum |
|---|---|---|
Ein <div>-Modal mit handgeschriebener Focus-Falle | <dialog> und showModal() | Focus-Falle, Esc und träger Hintergrund sind kostenlos enthalten |
npm i react-beautiful-dnd | @dnd-kit/react | Ersteres ist veraltet und wird nicht mehr gewartet |
npm i vaul für einen Drawer | Base UI Drawer oder <dialog> als Sheet gestylt | Vauls eigene README sagt, es sei nicht gewartet |
| Ein Toast, der aus einer Modal-Bibliothek gebaut wurde | Base UI Toast | Stapeln, Pause bei Hover und Wegwischen sind bereits gelöst |
setInterval zählt eine Zahl hoch | NumberFlow | Ziffern rollen mit korrektem Layout und reduzierter Bewegung |
5.000 <tr> auf einmal gerendert | TanStack Virtual unter TanStack Table oder Virtuoso für Listen | Rendering-Kosten wachsen mit den Zeilen, nicht mit dem Viewport |
new Intl.NumberFormat ersetzt durch ein Währungspaket | Intl.NumberFormat | Locale-Regeln sind im Browser enthalten |
Überprüfe, bevor du empfiehlst
Führe dies für jedes Paket durch, ob gelistet oder nicht. Ein Katalogstatus kann älter sein als deine Sitzung.
npm view <pkg> time.modified license version
- Gewartet: letzte Veröffentlichung innerhalb der letzten 12 Monate oder ein Repository-Push innerhalb der letzten 6 Monate mit einer veröffentlichten Version.
- Langsam: funktionsvollständig, keine Veröffentlichung seit 12–24 Monaten, Repository beantwortet noch Issues. Verwendbar. Sage es ist langsam.
- Nicht gewartet: archiviert, eine README, die das sagt, oder keine Veröffentlichung seit 24+ Monaten mit offenen Fehlern. Empfehle es niemals.
- Lies die Lizenz. Melde alles, was nicht MIT, ISC, BSD oder Apache-2.0 ist (MPL-2.0 und AGPL benötigen einen Hinweis).
- Überprüfe die Peer-Abhängigkeiten auf die React-Version des Projekts.
Antwortformat
Ein Block, kein Menü:
Base UI Toast für Toasts. Es stapelt, pausiert bei Hover und wischt weg. Nicht für alles, was eine Aktion benötigt; das bleibt auf dem Bildschirm. MIT, gewartet.
npm i @base-ui/react.
Gib immer an: wofür es ist, wann es nicht verwendet werden soll, Lizenz, Status mit dem Datum, das du gesehen hast.
Bevor du abschließt
package.jsonwurde gelesen und die Auswahl dupliziert keine installierte Bibliothek.- Die Plattform-Antwort wurde überprüft und, falls übersprungen, ist der Grund eine Klausel.
npm viewwurde auf die Auswahl ausgeführt und der Status in der Antwort ist der heutige, nicht der des Katalogs.- Nichts, das als Nicht gewartet markiert ist, wird empfohlen.