1-Pankaj/slopless-ui

Slopless UI

Slop ist der maschinell erzeugte Look: der Standard-Gradient-Hero, der pulsierende Punkt, ein Icon auf jeder Überschrift, ein Button auf jeder Aktion, Texte voller Gedankenstriche und Adjektive, und keine Entscheidung, die man in einem Review verteidigen könnte. Moderne generierte Oberflächen scheitern selten an kaputtem Markup. Sie scheitern daran, austauschbar zu sein: kompetent, poliert und unmöglich zu merken.

Dieses Skill existiert, damit die Ausgabe eines Agenten genau das nicht ist. Es gibt dem Bau eine schriftliche Richtung vor jedem Code, Disziplin während des Bauens und einen Verifizierungsdurchlauf, bevor jemand das Ergebnis zu sehen bekommt. Es fügt kein weiteres Styling hinzu. Es fügt Entscheidungen hinzu, dann den Abschluss.

Die Methode

Arbeite in dieser Reihenfolge. Jeder Schritt hat eine Aufgabe, und die Details jedes Schrittes leben in einer Referenzdatei. Lies eine Referenz nur dann, wenn du den Schritt erreichst, der sie benötigt.

1. Die Lage lesen

Bevor du eine Zeile schreibst, finde die bereits existierenden Entscheidungen: eine DESIGN.md-Datei oder Token-Datei, die CSS-Variablen des Projekts, einen tailwind.config.*- oder @theme-Block, die vorhandenen Komponenten. Wenn das Projekt bereits einen Look hat, folge ihm genau. Deine Aufgabe ist zuerst Konsistenz, dann Geschmack. Style nichts um, es sei denn, der Benutzer hat ein Restyling verlangt.

2. Das Briefing schreiben

Vier Zeilen, niedergeschrieben vor jedem Code. Sie sind ein Vertrag mit dir selbst, und spätere Schritte prüfen gegen sie.

1. Zielgruppe: Wer nutzt dies, und was macht er hier in zehn Sekunden.
2. Gefühl: Ein oder zwei Adjektive, die du in einem Review verteidigen könntest (ruhig, dicht, warm, präzise).
3. Signatur: Das Eine, an das sich ein Fremder erinnern wird. Wenn du es nicht benennen kannst, wird das Ergebnis generisch sein. Wähle eines: eine ungewöhnliche Schriftart, eine kühne Zahl, eine unerwartete Farbe, eine starke Komposition.
4. Modus: Überzeugen (Landing, Preise), Bedienen (Dashboard, App), Lesen (Dokumentation, Artikel) oder Erleben (Portfolio, Galerie). Der Modus ändert jede spätere Entscheidung.

Vollständige Anleitung, die vier Modi und eine Bibliothek von 28 Startrichtungen für gängige Website-Kategorien: references/direction.md.

3. Die Entscheidungen als Token treffen

Wandle das Briefing in echte Werte um, nicht in Adjektive: zwei Schriftfamilien mit Gewichten und einem Fallback-Stack, eine Akzentfarbe mit einer Aufgabe, eine Abstandsskala, eine Radiusskala, Bewegungsdauern und Easings. Schreibe sie als CSS-Variablen oder das Token-Format des Frameworks. „Sauber und modern“ ist keine Entscheidung. --accent: #8E3B2F ist es.

• Typografie: references/typography.md
• Farbe: references/color.md
• Bewegung: references/motion.md

4. Mit der Faser bauen

Wende dann die Disziplinregeln während des Bauens an:

• Die Gesetze kommen zuerst. Ein Raster, eine Spalte, 4- oder 8-Punkt-Abstände, ein Brennpunkt pro Ansicht, alle acht Komponentenzustände, Tastatur- und Kontrastminima. Dies sind kein Stil; sie sind die Physik, auf die sich jedes Designsystem einigt: references/foundations.md.
• Ein Brennpunkt, eine primäre Aktion pro Ansicht. Hierarchie kommt von Größe, Gewicht und Raum, nicht von Boxen.
• Buttons sind Zusagen. Ein gefüllter Button pro Ansicht ist normal. Sekundäre Aktionen sind Links oder leise Buttons. Wenn eine Region mehr als zwei Buttons zeigt, gestalte sie neu: references/icons-and-buttons.md.
• Icons sind Möbel. Worte sind klarer. Wenn Icons einen Platz verdienen, dann ein Set, ein Gewicht, konsistente Größe: references/icons-and-buttons.md.
• Text ist Design. Kurze Sätze, konkrete Nomen, verb-erste Buttons, keine Gedankenstriche, kein Jargon: references/copy.md.
• Jeder Zustand existiert: leer, ladend, Fehler, langer Inhalt. Fünf perfekte Zeilen und ein Happy Path sind kein fertiger Bildschirm.
• Die Seite hat einen Puls. Steuerelemente antworten auf Druck, Übergänge laufen so aus, wie sie eingelaufen sind, ein Eingang choreografiert die erste Sekunde, und Abschnitte werden beim Scrollen einmal aufgedeckt. Höchstens ein Signatur-Ambient, benannt im Briefing. Das Bewegungsbudget und jede Kurve, die es braucht: references/motion.md.
• Textblöcke linksbündig ausrichten. Zentriere nur kurze, einzeilige Elemente.

5. Vor der Auslieferung fertigstellen

Präsentiere niemals eine UI, die du dir nicht angesehen hast. Der Fertigstellungsdurchlauf, in dieser Reihenfolge:

1. python3 scripts/foldcheck.py <geänderte_dateien> und behebe jeden Fehler, den es meldet.
2. python3 scripts/contrast.py <vordergrund> <hintergrund> für jedes Textpaar, das du eingeführt hast. Fließtext benötigt 4,5:1 oder besser; große Texte und Grenzen benötigen 3:1.
3. Rendere in einem echten Browser und mache einen Screenshot in Desktop- und Handybreite (node scripts/finish.mjs <url-oder-datei> falls Playwright verfügbar ist, ansonsten das Browser-Tool, das deine Umgebung bietet).
4. Kneife die Screenshots an: verschwimme deine Augen oder skaliere das Bild herunter. Die Hierarchie und der Brennpunkt müssen überleben.
5. Korrigiere, überprüfe nur die geänderten Ansichten erneut und stoppe nach drei Korrekturdurchläufen.

Vollständiges Protokoll, Ehrlichkeitslabels und Berichtsformat: references/verification.md.

Nicht verhandelbare Dinge

Diese Muster wirken maschinell gemacht. Behandele sie standardmäßig als verboten, selbst wenn ein Tutorial sie zeigt:

• Blinkende, pulsierende, hüpfende oder schwebende Punkte und Dekorationen, einschließlich „tippt“-Indikatoren und leuchtende Statuspunkte, die niemand verlangt hat.
• Cyberpunk, Neon, Glitch, Synthwave, Vaporwave, Matrix und holografisches Styling. Leuchten hat keine Quelle, also überzeugt es niemanden.
• Lila-zu-Blau- und Indigo-zu-Fuchsia-Gradient-Heroes, Gradient-Text, unscharfe Farbsphären hinter Inhalten.
• Gedankenstriche in benutzerseitigen Texten. Verwende einen Punkt, ein Komma oder Klammern. Gleiches gilt für die KI-Jargon-Liste in references/copy.md.
• Emojis, die als Icons, Aufzählungszeichen oder UI-Chrom verwendet werden.
• Ein Icon auf jeder Überschrift und ein Button auf jeder Aktion.
• Lorem ipsum, „coming soon“, erfundene Testimonials oder Metriken, die als real präsentiert werden.
• Inter, Roboto, Arial oder der System-Stack als Standardschriftart für die Identität.
• Eine Seite, die sich nie bewegt. Statische Ausgabe wirkt wie eine zusammengebaute Vorlage; das Bewegungsbudget in references/motion.md ist Teil der Fertigstellung, nicht der Garnitur.

Der vollständige Katalog mit Korrekturen: references/anti-slop.md.

Der Squint-Test

Verschwimme deine Augen (oder skaliere einen Screenshot auf Vorschaugröße) und schaue noch einmal hin. Drei Dinge müssen die Unschärfe überleben: der Brennpunkt, die Lesereihenfolge und die primäre Aktion. Wenn die Seite zu grauer Suppe wird, ist das Problem die Hierarchie, und keine noch so große Politur wird es beheben. Korrigiere zuerst Abstände, Größe und Gewicht. Dieser Test dauert zehn Sekunden und fängt mehr schlechtes Design als jede Checkliste.

Wenn der Benutzer nach einem verbotenen Muster fragt

Manchmal möchte eine Person wirklich Neon, starke Verläufe oder ein Cyberpunk-Theme. Bekämpfe sie nicht und belehre sie nicht. Baue es gut: echte Kontraste, echte Hierarchie, funktionierende Zustände, zurückhaltende Bewegung. Sage einmal, in einem Satz, dass das Skill standardmäßig dagegen ist und du ihrer Präferenz gefolgt bist. Die Verbotsliste bewacht ungesteuerte Ausgabe, nicht ausdrückliche Präferenz.

Referenzkarte

Datei	Lesen, wenn
references/direction.md	Schritt 2, bei jeder neuen Seite oder jedem Restyling
references/typography.md	Schritt 3, bei der Wahl oder Überprüfung von Schriftarten
references/color.md	Schritt 3, bei der Wahl oder Überprüfung von Farben
references/motion.md	Schritt 3 für Token, Schritt 4 für den Bewegungsdurchlauf (Budget, Eingänge, Aufdeckungen, Ambient, reduzierte Bewegung)
references/foundations.md	Schritt 4, für Layout, Abstände, Hierarchie, Zustände und die benannten Gesetze
references/copy.md	Schritt 4, wann immer Text geschrieben wird
references/icons-and-buttons.md	Schritt 4, für Aktionen, Steuerelemente und Icons
references/anti-slop.md	Wenn die Ausgabe sich auf eine schlechte Art vertraut anfühlt oder im Review
references/verification.md	Schritt 5, bevor du etwas als erledigt bezeichnest

Berichterstattung

Beende UI-Arbeit mit einem kurzen Bericht: was gebaut wurde, das einzeilige Gefühl des Briefings, das Verifikationslabel aus references/verification.md (visuell verifiziert, statisch verifiziert oder nicht verifiziert, mit Grund), und alles, was unerledigt ist. Nenne ein Ergebnis niemals „pixelgenau“ oder „vollständig getestet“. Sage, was du getan hast.

Skripte

Keine Abhängigkeiten, keine Netzwerkaufrufe, keine Telemetrie. Pfade sind relativ zum Ordner dieser Datei.

python3 scripts/foldcheck.py src/            # statische Prüfung auf maschinelle Muster
python3 scripts/contrast.py "#201B12" "#F6F1E5"   # WCAG-Kontrast für ein Paar
node scripts/finish.mjs ./index.html          # Browser-Durchlauf: Screenshots, Konsole, Überlauf (benötigt Playwright)

foldcheck und contrast laufen immer. finish ist optional und degradiert anmutig, wenn Playwright fehlt; verwende stattdessen jedes Browser-Tool, das deine Umgebung bietet, denn der Punkt ist das Hinsehen, nicht das Werkzeug.