wasely/ui-max

UI Max

Priorisiere die Benutzerfreundlichkeit des Produkts gegenüber dekorativen Effekten. Wähle das einfachste kohärente System, das die Anforderung erfüllt; baue keine Komponentenbibliotheken an.

Beginne mit dem Produkt

Bevor du Code änderst:

1. Überprüfe das Framework, den Router, das CSS-System, die Komponentenbibliothek, die Icon- und Animationsbibliotheken, den Formular-Stack, die Design-Tokens, den Dark Mode und die etablierten Muster.
2. Definiere das Benutzerziel, den primären Arbeitsablauf, die Informationshierarchie, primäre und sekundäre Aktionen, erforderliche Zustände, responsive Oberflächen und das Tastaturverhalten.
3. Verwende in dieser Reihenfolge wieder: lokale Komponenten, vorhandene Designsystem-Primitive, shadcn/ui, Radix UI, 21st.dev, eine spezialisierte Erweiterungsbibliothek, eine benutzerdefinierte Implementierung.
4. Behalte ein bestehendes, stabiles UI-System bei. Führe niemals ein konkurrierendes Gesamtsystem für eine einzige attraktive Komponente ein.

Wähle eine Grundlage

Für neue React-Produktoberflächen verwende standardmäßig:

React + TypeScript + Tailwind CSS
shadcn/ui -> Radix UI Primitive
Lucide Icons
Motion for React nur dort, wo es nützlich ist
React Hook Form + Zod für umfangreiche Formulare
TanStack Table nur für fortgeschrittenes Tabellenverhalten

Erzwinge diesen Stack nicht in Projekten mit einem etablierten System oder in Vue/Svelte-Projekten. Verwende dort die Ökosystem-eigenen Bibliotheken.

Klassifiziere die Oberfläche, bevor du Ergänzungen auswählst:

• Core-Produkt-UI: shadcn/ui + Radix UI + Tailwind CSS.
• KI-Produkt-UI: Füge Cult UI nur für echte KI-Workflow-Muster hinzu; verwende Motion Primitives für zurückhaltende Übergänge.
• Marketingseite: Verwende 21st.dev für die Struktur, Magic UI selektiv und Aceternity nur für wirklich wirkungsvolle Abschnitte.
• Datendichte Anwendung: Füge TanStack Table hinzu, wenn Sortierung, Filterung, Paginierung, Auswahl, Sichtbarkeit, Virtualisierung oder komplexe Datenmodelle dies rechtfertigen.
• Mikro-Interaktion: Verwende Motion Primitives oder Motion. Verwende UIverse nur nach einer Überprüfung der Barrierefreiheit und Wartbarkeit.

Lese references/component-selection.md bei der Auswahl, Installation oder Beschaffung von Bibliotheken/Komponenten, beim Vergleich von Alternativen oder bei der Recherche visueller Muster.

Implementiere kohärent

Normalisiere jede wiederverwendete oder kopierte Komponente auf die folgenden Projekteigenschaften:

• semantische Farb-Tokens
• Typografie-, Abstands-, Radius- und Schattenskalen
• Icon-Familie
• Barrierefreiheitskonventionen
• responsives Verhalten
• helle und dunkle Designs

Verwende semantische Tokens anstelle von verstreuten hartcodierten Werten. Halte zusammengehörige Steuerelemente nahe beieinander; trenne nicht zusammengehörige Abschnitte; vermeide ungerechtfertigte verschachtelte Karten; verwende Listen/Tabellen für Vergleiche und Karten für einzeln klickbare, heterogene Elemente. Halte primäre Aktionen offensichtlich und zerstörerische Aktionen fern von Routineaktionen.

Verwende eine Oberflächenschriftart und eine Icon-Familie, sofern es das Branding nicht anders erfordert. Verwende Bewegung nur, um Zustand, Hierarchie, Kontinuität, Ursache/Wirkung, Fortschritt oder Fokus zu kommunizieren. Respektiere prefers-reduced-motion.

Lese references/design-standards.md vor einer umfangreichen visuellen Implementierung, Responsive-Arbeit, Zustandsdesign, Formularen, Tabellen oder Barrierefreiheitsarbeit.

Decke reale Zustände ab

Berücksichtige für asynchrone oder datengesteuerte UI:

• anfängliches Laden und Hintergrundaktualisierung
• leere Ergebnisse und keine Suchergebnisse
• Erfolg, Warnung, Fehler und teilweiser Fehler
• deaktivierte und Offline-Zustände
• fehlende Berechtigungen oder Integrationen
• veraltete Daten

Bevorzuge Skelette, wenn die Struktur bekannt ist. Mache bei Fehlern deutlich, was fehlgeschlagen ist, warum (wenn bekannt), ob die Arbeit erhalten bleibt und was das Problem behebt. Verwende niemals bedeutungslose Mock-Daten, gefälschte Analysen, erfundene Agentenaktivitäten oder nicht funktionierende Steuerelemente in einem fertigen Produkt.

Bereinige bestehende UI

Auditiere Duplikate, Abstände, Farben, Typografie, Varianten, Icons, verschachteltes Layout, wiederholte Utilities, Reaktionsfähigkeit, Barrierefreiheit, ungenutzten Code/Abhängigkeiten, Animationsüberladung und fehlende Zustände.

Konsolidiere wiederholte oder verhaltenstragende Primitive wie Buttons, Eingabefelder, Status-Badges, Dialoge, Menüs, Tabs, Seitenkopfzeilen, Leer-/Fehler-/Ladezustände, Sidebar-Elemente und Projektzeilen. Abstrahiere kein einmaliges Markup ohne einen Konsistenz-, Logik-, Wiederverwendungs- oder Testvorteil.

Tokenisiere wiederholte Werte. Entferne unnötige Wrapper, verschachtelte Karten, dekorative Trennlinien, wiederholte Beschriftungen, redundante Aktionen/Status, übermäßige Beschreibungen und ungerechtfertigte Bewegung.

Validiere die gerenderte Ausgabe

Überprüfe:

• semantisches HTML, zugängliche Namen, Beschriftungen, logische Tab-Reihenfolge, Tastaturbedienung, Dialogfokus, sichtbarer Fokus und Kontrast
• Lade-, Leer-, Deaktiviert-, Fehler-, Erfolgs-, Langtext- und Bestätigungszustände für zerstörerische Aktionen
• schmale und breite Layouts ohne Abschneiden, unlesbare Tabellen, Layoutverschiebungen oder horizontalen Überlauf
• reduziertes Bewegungsverhalten, helle/dunkle Designs und responsive Navigation
• Formatierung, Linting, TypeScript, Tests, Produktionsbuild und Konsolenausgabe

Teste bei 320, 375, 768, 1024, 1280 und 1440 px, wenn relevant. Teste für Browsererweiterungen auch Popup-Breiten um 320–420 px und Seitenleisten um 320–600 px.

Überprüfe die tatsächlich gerenderte UI bei schmalen und breiten Breiten, bevor du die Fertigstellung behauptest. Verwende eine Screenshot-Schleife oder den vorhandenen visuellen Validierungs-Workflow des Projekts; bestätige plattformspezifische Oberflächen auf dem tatsächlichen Zielsystem.

Berichte über UI-Arbeit

Wenn du gebeten wirst, eine Seite zu entwerfen oder neu zu erstellen, erstelle prägnante Abschnitte für:

1. Produktinterpretation: Ziel, primärer Arbeitsablauf, Schlüsselinformationen, Hauptaktion.
2. Komponentenplan: Struktur, wiederverwendbare Komponenten, Grundlage, spezialisierte Ergänzungen, responsives Verhalten, wichtige Zustände.
3. Implementierung: Arbeitscode im vorhandenen Stack.
4. Validierung: Barrierefreiheit, Reaktionsfähigkeit, Zustände, Tastaturverhalten, Konsistenz der Design-Tokens und visuelle Überprüfung des gerenderten Ergebnisses.

Gib keinen Bibliothekskatalog zurück, es sei denn, der Benutzer fragt nach Optionen.