unvibe

Was macht unvibe?

Dieser Skill verwandelt eine Oberfläche, die generisch wirkt, in eine, die gestaltet aussieht. Er erfindet keinen neuen Stil: Er wendet einen Katalog kleiner, gemessener Details an, die professionelle Oberflächen teilen und generierte vermissen – abgebildet auf die eigenen Farben des Projekts. Er wurde aus einem echten, zweitägigen Überarbeitungsdurchlauf einer Produktions-SaaS extrahiert (references/case-study.md); jede Regel existiert, weil ihr Bruch bemerkt wurde.

Bilde deine Farben ab, behalte die Zahlen. Die Proportionen (Radien, Abstände, Größen, Dauern, Gewichtungen) tragen die Qualität. Farben sind das Einzige, was du anpasst.

Bevor du beginnst

1. Lies references/tells.md (was lässt eine UI generisch aussehen, mit dem Ersatz für jedes Merkmal).
2. Lies die Design-Tokens des Projekts und etwaige Design-Dokumente. Fülle die Token-Tabelle in references/porting.md aus.
3. Frage den Besitzer, welche Bildschirme ihn am meisten stören und was ihm gefällt. Behalte, was ihm gefällt; entferne niemals, was er versteht („Ich liebe das, es ist verständlich – formatiere es nur besser“ bedeutet umgestalten, nicht wegschneiden).
4. Notiere den Stack: React oder nicht, Tailwind 3/4 oder Plain CSS, eine bestehende Komponentenbibliothek oder nicht, eine Headless-Bibliothek (React Aria) oder nicht.

Der Workflow

Phase 1 · Grundlagen (ein Durchlauf, gesamte App)

Tokens (assets/css/unvibe.css Abschnitt 1, abgebildet), native Überbleibsel in der Markenfarbe, tabellarische Zahlen, reduzierte Bewegung, Bewegungskurven. Dann Wörter: Entferne Großbuchstaben-Label, Emoji-Überschriften, ✓-Zeichen in Badges, Ausrufezeichen (Katalog §0–§1). Schnell, sichtbar, kein Risiko.

Phase 2 · Steuerelemente (ein Durchlauf, gesamte App)

Buttons mit Relief und einem primären Button pro Bildschirm (§2) · gefüllte Felder, eine Höhe pro Zeile (§3) · echte Menüs anstelle von nativen Selects (§4; prüfe zuerst jede Aufrufstelle, references/pitfalls.md) · Switches für jedes Ja/Nein, Switch-Karten für wichtige, Radio-Karten für sichtbare Auswahlmöglichkeiten, Tags (§6) · Segmentierte Steuerelemente, deren Pill gleitet (§5).

Phase 3 · Die sichtbarsten Bildschirme anhand von Referenzen neu aufbauen

Wähle die 3–5 Bildschirme, die die Leute am meisten sehen, und baue jeden anhand der nächsten professionellen Vorlage neu auf, vermessen (references/method.md): Analyse-Übersicht → KPI-Kacheln (§9); KI-Bildschirm → Agenten-Thread (§12); Aktivität → Feed (§11); Einstellungen → Zeilen (§7); Bulk-Listen → Daten-Grid (§10); lange Jobs → Journal (§13); Datumsangaben → Voreinstellungen + zwei Monate (§15).

Phase 4 · Der Durchlauf

Jeder verbleibende Bildschirm erhält die gleichen Details: ein Tabellenkopf-Band, ein Feldstil, ein Menü, ein Badge-Stil, Callouts als gefüllte Zonen, Listen als umrahmte Blöcke, die gleiche Filterhöhe auf jeder Listenseite (§8, §10, §16). Inkonsistenz zwischen Geschwisterbildschirmen ist selbst ein verräterisches Zeichen.

Phase 5 · Beweise es

Before/After-Aufnahmen von Production vs. Branch mit scripts/capture.mjs und einer Side-by-Side-Seite mit scripts/compare.mjs. Behalte nur Paare, deren Unterschied auf einen Blick offensichtlich ist. Führe dann den vollständigen No-Regression-Durchlauf in references/verification.md aus, bevor du pusht.

Goldene Regeln

1. Auswahl ≠ Aktion. Eine ruhige Farbe markiert, was ausgewählt ist; die laute Markenfarbe ist für die eine primäre Aktion pro Bildschirm.
2. Hover ≠ Ausgewählt. Hover ist neutral; ausgewählt ist eine helle Tönung plus ein Häkchen.
3. Drei Oberflächen: Canvas, Weiß für das, was schwebt, eine dunklere versenkte Füllung für Felder und Kacheln.
4. Keine Großbuchstaben, keine Emoji-Überschriften, keine Häkchen-Glyphen, keine farbigen linken Balken.
5. Jedes Steuerelement in einer Zeile teilt sich Höhe und Füllung.
6. Jedes Ja/Nein ist ein Switch; Checkboxen sind für Listen und Zustimmungen.
7. Eine Einstellung ist eine Zeile: was sie tut links, das Steuerelement rechts; gesperrte Zeilen sagen warum in Grau.
8. Zahlen sind 24/34 in gefüllten Kacheln mit einem Icon-Chip und einer Delta-Pille, deren Farbe die Bedeutung anzeigt (ein Kostenanstieg ist rot).
9. Ein Tabellenkopf-Band überall, Satzfall, in einem 16px-Rahmen; ausgewählte Zeilen erhalten einen 3px-Einsatzbalken.
10. KI-Antworten sind Text in einem Thread, mit dem, was gelesen wurde, und der tatsächlich vergangenen Zeit; niemals gefälschte Schritte.
11. Bewegung folgt einer Zustandsänderung, niemals einem Hover; Drücken skaliert auf .985; Menüs und Modals erscheinen.
12. Nie eine geschätzte Zahl, nie ein dekoratives Steuerelement. Wenn Daten fehlen, sage „Nicht bestimmt"; wenn ein Feld nichts tut, entferne es.
13. Erledige die Geschwister im gleichen Durchlauf.
14. Zeige nur sichtbare Unterschiede und beweise, dass es keine Regression gibt.

Was in diesem Skill enthalten ist

Pfad	Verwendung
references/catalogue.md	jedes Detail mit seinen exakten Werten (§0 Grundlagen → §17 Niemals-Liste)
references/tells.md	die verräterischen Zeichen generierter UIs und ihre Ersatz
references/method.md	referenzgetriebenes Redesign: auswählen, messen, abbilden, neu bauen, beweisen
references/pitfalls.md	die Fehler, die Polieren mit sich bringt (Menüs in Modals, doppelte Schlüssel, verlorene Namen, CSS-Layer, Tests)
references/verification.md	Before/After und der No-Regression-Durchlauf
references/porting.md	Token-Mapping, Tailwind 3/4, andere Frameworks, Nachrüstreihenfolge, Dunkel-Stufen
references/case-study.md	der echte Durchlauf, von dem dies stammt, mit den Worten des Besitzers
assets/css/unvibe.css	das einsatzbereite Stylesheet (Plain CSS, uv- Klassen, Tokens auf :root)
assets/react/*	Select, NativeSelect (Drop-in für <select>), Switch/SwitchCard, SettingsRow, Accordion, NumberField, Segmented (gleitende Pill), RollingNumber, ThinkingIndicator, DateRangePicker, useFlipToFit
scripts/capture.mjs	Headless-Chrome-Aufnahmen von [data-shot]-Elementen oder App-Bildschirmen mit einer Konsolenprüfung
scripts/compare.mjs	die Side-by-Side-Before/After-Seite
demo/index.html	jedes Muster, vorher und nachher, mit fiktiven Daten

Verwenden der Assets

• CSS: Kopiere assets/css/unvibe.css in das Projekt, bilde Abschnitt 1 auf die Tokens des Projekts ab, importiere es nach den Basis-Stilen. Verwende die Klassen wie sie sind oder übersetze sie in die eigenen Klassennamen des Projekts (behalte die Werte).
• React: Kopiere die benötigten Komponenten; sie hängen von react-aria-components (und @internationalized/date für die Datumsbereichsauswahl) ab. Sie tragen keine Tailwind-Klassen.
• Vorhandene Komponentenbibliothek: Gestalte ihre Teile mit den Zahlen des Katalogs um, anstatt sie zu ersetzen.

Was zurückgegeben werden soll

1. Die Before/After-Seite (nur sichtbare Unterschiede).
2. Eine kurze Liste, was sich geändert hat, nach Familien geordnet, und die bearbeiteten Bildschirme.
3. Der No-Regression-Bericht: was geprüft wurde, welche Interaktionen in einem Browser getestet wurden, Konsolenstatus, Tests, Build. Sage klar, was nicht überprüft wurde.