Instruction file imported from daviddr17/gwada-app (
.cursor/rules/ui-shared-classes.mdc). Copyright stays with the author.
UI: gemeinsame Klassen statt Duplikaten
Wenn Buttons, Container, Chips, Karten-Ränder usw. an verschiedenen Stellen optisch identisch sein sollen, darf die gleiche lange className / cn(...)-Kette nicht mehrfach in Seiten und Komponenten stehen.
Vorgehen
- Einen Namen exportieren — Konstante (z. B.
settingsAccentSaveButtonClassName) odercva/buttonVariants-Erweiterung in einer passenden Datei:- am ehesten neben dem primären UI-Baustein (z. B. unter
components/settings/,components/ui/); - nur bei wirklich app-weitem Muster in eine kleine
lib/ui/…- odercomponents/ui/…-Hilfsdatei.
- am ehesten neben dem primären UI-Baustein (z. B. unter
- Import und Wiederverwendung — an allen Stellen nur
className={cn("…layout-only…", sharedClassName)}bzw.variant/Slot nutzen. - Keine optischen Forks — wenn sich das Design ändnt, wird an einer Stelle angepasst.
Anti-Pattern
Lange identische Tailwind-Strings an mehreren Call-Sites kopieren → schwer wartbar, leicht inkonsistent.
Positiv-Beispiel (Projekt)
Primär-Speichern / Akzent-Aktion: settingsAccentSaveButtonClassName aus @/components/settings/settings-sticky-save-bar wiederverwenden statt die Kette zu duplizieren.
Primär Neu anlegen über Listen (volle Breite): modulePrimaryAddButtonFullWidthClassName aus @/lib/ui/module-primary-add-button mit Button size="lg" und Plus-Icon — siehe Regel module-primary-add-button.mdc. Kompakt-Pill: modulePrimaryAddButtonClassName.
Filter-Dropdowns mit lesbarem Namen (nicht UUID im Trigger): SearchableSelect aus @/components/ui/combobox mit { value, label } — wie im Bestand.