felipebasurto/unslop-ui

Unslop UI

Bearbeite den sichtbaren Text und die dekorativen Elemente einer Webseite, eines App-Bildschirms, eines Diagramms oder eines Dashboards, sodass es nicht mehr wie KI-generiert wirkt. Eine gute Benutzeroberfläche wird benutzt, nicht gelesen: Behalte die Wörter, die eine Person zum Handeln benötigt, und entferne den Rest.

Ziel: $ARGUMENTS (falls leer, verwende die in dieser Unterhaltung geänderten Dateien oder frage nach).

Schreibregeln von /pstack:unslop

Wende diese auf jede beibehaltene Zeichenfolge an. Zitiere sie mit ihrer Nummer.

!python3 ${CLAUDE_SKILL_DIR}/scripts/load_unslop.py

Wenn die obige Zeile noch einen Befehl anzeigt anstelle von Regeln (andere Agenten als Claude Code), führe python3 scripts/load_unslop.py aus dem Ordner dieses Skills aus und wende das an, was es ausgibt.

UI-Regeln

IDs sind stabil. Zitiere sie als U1 bis U16 im Bericht.

Oberflächentexte

• U1. Augbrauenlabels. Kleine Großbuchstaben oder mit Buchstabenabstand versehener Text über einer Überschrift („PASSPORT“, „FEATURES“, „HOW IT WORKS“). Lösche ihn. Die Überschrift sagt bereits, worum es in dem Abschnitt geht.
• U2. Dekorative Nummerierungen. „01 02 03“, „01 // Features“, „§“, „//“-Präfixe. Lösche sie, es sei denn, die Reihenfolge ist echt und der Benutzer folgt ihr (Schritte eines Checkouts, eine nummerierte Installationsanleitung).
• U3. Untertitel-Reflex. Ein Untertitel unter jeder Überschrift oder eine Zeile über der H1. Behalte nur einen, wenn er eine Tatsache angibt, die die Überschrift nicht enthält. „Analytics / Understand your data better“ verliert die zweite Zeile.
• U4. Botsplaining. Bildunterschriften, Hilfetexte und Beschreibungen, die erzählen, was das Element sichtbar tut („Klicken Sie auf die Schaltfläche unten, um zu beginnen“, „Dieses Diagramm zeigt den Umsatz im Zeitverlauf“). Lösche sie. Überschriften und Bildunterschriften bleiben bei 5 Wörtern oder weniger. Ausgenommen: Leerzustände, Fehlermeldungen und Bestätigungen von zerstörerischen Aktionen, die einen vollständigen Satz verwenden dürfen.
• U5. Durchgesickerte Designnotizen. Text darüber, wie der Bildschirm funktioniert oder warum er so gestaltet wurde, lange Klammerausdrücke, „(aktualisiert in Echtzeit)“, „(unterstützt von KI)“. Lösche ihn oder verschiebe ihn in einen Tooltip, wenn ein Benutzer tatsächlich danach suchen würde.
• U6. Statuszeichenketten. Tatsachen, die mit „·“ oder „|“ verknüpft sind („12 Elemente · Aktualisiert vor 2 Minuten · Synchronisiert · v2.1“). Behalte die eine Tatsache, auf die der Benutzer reagiert. Platziere andere dort, wo sie benötigt werden, oder lasse sie weg.
• U7. Alles beschriften. Ein Label, das den Platzhalter, das Icon, den Schaltflächentext oder die Abschnittsüberschrift wiederholt. Wähle einen Hinweis. Ein Suchfeld mit einem Lupen-Icon benötigt weder ein „Suche“-Label noch einen „Suche...“-Platzhalter, wenn nur eines davon vorhanden ist.
• U8. Abgehackte und leere Slogans. „One. Big. Thing.“, „Built different.“, „Ship faster. Think less.“ Schreibe sie als einen Satz um, der das Ding und seine Funktion benennt, oder lösche sie.

Dekoration

• U9. Badges und Pillen ohne echten Status. „LIVE“, „NEU“, „KI“, „Beta“, „Pro“, „🔥 Beliebt“ als Würze hinzugefügt. Behalte ein Badge nur, wenn es Daten widerspiegelt, die die App tatsächlich verfolgt (ein echter Stream ist live, ein Artikel ist tatsächlich neu seit dem letzten Besuch).
• U10. Statuspunkte. Pulsierende oder farbige Punkte (animate-pulse, kleine rounded-full-Punkte) neben Text. Behalte sie nur, wenn sie an einen echten Live-Status gebunden sind.
• U11. Dekorative Emojis und Icons. In Überschriften, Schaltflächen, KPI-Labels und Listenelementen. Lösche sie. Ein Icon bleibt nur, wenn es das Steuerelement selbst ist (Icon-Schaltfläche mit einem aria-label) oder wenn es eine Bedeutung trägt, die der Text nicht hat.

Diagramme und Dashboards

• U12. Diagrammtitel, die den Diagrammtyp nennen. „Balkendiagramm des monatlichen Umsatzes“ wird zu „Monatlicher Umsatz“ oder der Erkenntnis: „Umsatz seit März verdoppelt“.
• U13. Leseanleitungen. Untertitel oder Bildunterschriften, die erklären, wie das Diagramm zu lesen ist („Jeder Balken repräsentiert einen Monat“, „Bewegen Sie den Mauszeiger für Details“). Lösche sie.
• U14. Zweimaliges Nennen. Jede Menge erhält eine Kodierung. Ein Balken, eine Zahl auf dem Balken, eine Gitterlinie auf seiner Höhe und ein Achsenmarkierung, die alle denselben Wert angeben, sind drei zu viele; ein KPI mit Pfeil plus Prozent plus dem Wort „oben“ plus einem Satz darunter („Der Umsatz stieg im Vergleich zum Vormonat um 12 %“) ist derselbe Fehler im Text. Behalte die Kodierung, die der Leser benötigt: Achse und Gitterlinien für die Form, einen gedruckten Wert für die Zahl, die wichtig ist (oft nur der letzte Punkt oder das Maximum).
• U15. Diagrammgerüst, das mit den Daten konkurriert. Ein Rahmenfeld um den Plotbereich, dunkle oder dichte Gitterlinien, kleine Teilungen, dicke Achsenrahmen, 3D, Schlagschatten und Glühen auf Markierungen, Hintergrundfüllungen hinter dem Plot. Lösche sie oder mache das, was bleiben muss (ein paar Gitterlinien, eine Grundlinie) zu einem Haarstrich in einem hellen Grau. Daten oben, Labels daneben, Gerüst am blassesten. Gestalte das Diagramm nicht neu: gleicher Typ, gleiche Daten, gleiche Serienfarben.
• U16. Legende, wo eine direkte Beschriftung funktioniert. Ein Legendekästchen, das den Leser zwingt, Farben Namen zuzuordnen, wenn der Name am Ende der Linie oder neben dem Balken stehen könnte. Beschrifte die Serie direkt, idealerweise mit ihrem aktuellsten Wert („Dieses Jahr 1.150“), und entferne die Legende. Behalte eine Legende für mehr als vier Serien oder wenn die Markierungen zu dicht für eine Beschriftung sind.

Lies für Vorher/Nachher-Paare references/examples.md, wenn du dir unsicher bist, wie weit du kürzen sollst.

Schutzmaßnahmen

• Ändere nur sichtbaren Text und dekorative Elemente. Berühre keine Logik, Daten, Farben, Abstands-Tokens oder das Layout. Die einzige Ausnahme ist das Diagrammgerüst unter U15, das ausgedünnt oder aufgehellt werden darf.
• Wenn du ein Element löschst, lösche auch seinen nun leeren Wrapper und jeden Abstand oder Zwischenraum, der nur dafür existierte. Ein Wrapper, der nur ein einziges untergeordnetes Element hält, das er nur gruppieren sollte, wird ebenfalls entfernt.
• Lösche niemals aria-label, alt, title auf Icon-Schaltflächen oder Text, der nur für Screenreader bestimmt ist. Wenn der entfernte sichtbare Text der einzige zugängliche Name war, verschiebe ihn in aria-label.
• Text, der aus Daten, Props, i18n-Dateien oder einem CMS stammt: Bearbeite ihn an seiner Quelle (der Übersetzungsdatei, dem Fixture) oder melde ihn, kodiere keinen Ersatz fest in der Komponente.
• Wenn ein gekennzeichneter Fall seinen Platz verdient (echter Status, echte Reihenfolge, rechtlicher Text), behalte ihn und erkläre im Bericht, warum.

Vorgehensweise

Kopiere diese Checkliste und verfolge sie:

- [ ] 1. Zähle: python3 ${CLAUDE_SKILL_DIR}/scripts/count_tells.py <target>   (${CLAUDE_SKILL_DIR} ist der Ordner dieser Datei)
- [ ] 2. Lies jede sichtbare Zeichenfolge und jedes dekorative Element; markiere jedes Problem mit U1-U16 oder einer Unslop-Regelnummer
- [ ] 3. Bearbeite
- [ ] 4. Zähle erneut mit demselben Befehl
- [ ] 5. Berichte

Der Zähler ist ein Regex-Heuristik. Er findet Kandidaten und liefert eine Vorher/Nachher-Zahl. Er übersieht U3, U4, U5, U7, U8, U12, U13 und U14, die gelesen werden müssen. Für U15 und U16 sieht er nur die Code-Formen (Schatten, dicke Achsenrahmen und Gitterlinien, aktivierte Legenden). Er markiert auch einige legitime Fälle. Dein Lesen in Schritt 2 ist die echte Überprüfung.

Berichtsformat:

Regel	Vorher	Nachher
U1 Augbrauenlabel	6	0
unslop 13 Gedankenstrich	4	0

Liste dann auf, was du absichtlich behalten hast, eine Zeile pro Eintrag, mit dem Grund.