sukirman1901/polish

Was macht polish?

Überblick

Nach Tokens, Struktur und Anti-Slop werden Mikro-Craft-Arbeiten angewendet, damit sich die UI auf der gerenderten Oberfläche richtig anfühlt. Numerische Rezepte hier sind Heuristiken, sofern ein Standard oder ein Projekt-Token sie nicht vorgibt.

Wann verwenden

• Abschluss von /ui-Aufbauten (nach anti-slop-design)
• /polish / „rapihin detail“ / „fühlt sich falsch an“
• Hover-, Press-, Enter/Exit-, Icon-Wechsel-Mikrointeraktionen

Wann überspringen

• Strukturelles Grid/Abstand/Hierarchie → design-foundations
• Vergleich gerenderter Richtungen / Betonen aller Zustände → prototype
• Verschachtelte Radius-/Elevationssprache → design-surfaces
• Typografie-Rollen, Umbruch, Zuschneiden → design-typography
• Konformität (Kontrast, Namen, Tastatur) → accessibility
• Bewegungssysteme / benannte Familien → motion
• Nur Text / „tulisan AI“ / Leerzustandsformulierungen → content-design
• „Rapikan kode“ / generierte Implementierung → anti-slop-code
• Backend-Only-Änderungen ohne sichtbare UI-Änderung

MUSS

Regel	Detail
Gerenderter Nachweis	Beurteile Umbruch, Ausrichtung, Press und Radius anhand der gerenderten UI, nicht nur des Quellcodes
Zuerst Tokens	Verwende --radius, Abstands- und Typografie-Tokens; erfinde keine Einmalwerte, wenn ein Token existiert
Rezepte klassifizieren	Markiere 0.96, Stagger-ms und ähnliche Zahlen als Heuristiken
Günstigste gültige Lösung	Lösche Dekoration → natives CSS → verwende Projekttokens neu → füge dann Abstraktion hinzu
Mobile Craft	Vollbreite primärer CTA <768; Safe-Area auf sticky Chrome; daumenereichbare Aktionen
Kein transition: all	Benenne Eigenschaften; überspringe Tailwind nackte transition
Geometrienachweis steuern	Rendere die vollständige Steuermatrix, einschließlich ausstehend/ladend und zutreffend LTR/RTL, bevor du optische Ausrichtung akzeptierst

Craft (Ausgangspunkte)

Anliegen	Ausgangspunkt	Klasse	Übergabe
Verschachtelte Ecken	Außen ≈ innen + Einzug, wenn Kurven ein gemeinsames Zentrum haben	Heuristik	design-surfaces
Symbol im Steuerelement	Optischer Schub über geometrischem Zentrum	Empfehlung	—
Bereichstiefe	Projekt-Rand-/Elevationssprache	Projektstandard	design-surfaces
Hover/Toggle	Unterbrechbare CSS-Übergänge	Empfehlung	motion bei Choreografie
Press	scale(0.96) wenn Press-Feedback gewünscht	Heuristik	—
Dynamische Zahlen	tabular-nums	Empfehlung	design-typography
Kurze Titel	text-wrap: balance	Empfehlung	design-typography
Trefferfläche	44×44 Touch / ≥40 dicht Desktop	Empfehlung	accessibility für WCAG 2.5.8 (24px)

Ausnahmen: Pillen/Kreise, dichte Toolbars (Press-Skala deaktivieren), reduzierte Bewegung, Markensprache, die nicht konzentrisch ist, Bilder, die keine Umrisse benötigen.

Steuergeometrie

• Gerenderte optische Variantenmatrix: nur Text, führendes Symbol, nachgestelltes Symbol, nur Symbol und ausstehend/ladend.

Geometrische Zentrierung (inline-flex / items-center / justify-center) ist notwendig, aber kein Nachweis. Es gibt keinen universellen Pixelversatz: vergleiche zuerst die gerenderte Matrix, wende dann den kleinstmöglichen Ausgleich innerhalb des festen Symbolslots oder Glyphen an.

Beurteile, ob die kombinierte Icon-Label-Inhaltsgruppe und ihre wahrgenommene visuelle Masse über Varianten und Zustände hinweg ausbalanciert und zentriert sind. Bewerte die Beziehung von Label-Baseline/Cap-Höhe zum Icon separat; das Label selbst muss bei einer Icon+Text-Variante nicht das Zentrum des Steuerelements einnehmen. Überprüfe das visuelle Gewicht des Icons, den Token-Abstand, die symmetrische Token-Padding, den Fokus, die Trefferfläche, den deaktivierten Zustand und den ausstehenden/ladenden Zustand gemeinsam, ohne unbeabsichtigte Verschiebung der Inhaltsgruppe oder Steuerbreite. Schließe sowohl LTR als auch RTL ein, wenn das Produkt sie unterstützt.

Stabile ausstehende Geometrie ist der Standard. Für eine explizite gemessene Morph-Ausnahme (references/component-patterns.md) überprüfe beide Endpunkte und das Ziel-Playback, bestätige, dass benachbarte Aktionen stabil bleiben, und melde die Ausnahme mit Nachweis. Ein bewusster Morph entschuldigt keine versehentlichen Spinner-Verschiebungen oder fehlende zugängliche Namen.

Arbeitsablauf

1. Umfang — benenne die Oberfläche; überspringe strukturelle oder Token-System-Arbeiten.
2. Scannen — gerendert 1x/2x, hell/dunkel, Hover/Press/Fokus, mobile Breite.
3. Steuermatrix — vergleiche nur Text, führendes/nachgestelltes Symbol, nur Symbol, ausstehend/ladend und zutreffendes LTR/RTL in gerenderter Größe.
4. Beheben — billigste gültige Änderung; bilde Werte auf Tokens ab; behalte optischen Ausgleich innerhalb des Symbolslots.
5. Berichten — Vorher/Nachher-Tabellen gruppiert nach Prinzip; markiere nicht überprüfte Zustände mit „Nicht verifiziert“.

Grenzen

• Darf entscheiden: optische Schübe, benannte Übergänge, tabellarische Zahlen, Umbruch-Helfer, Press-Feedback, wenn das Projekt keines hat.
• Darf nicht: 0.96, Bounce 0 oder konzentrischen Radius als universelles Gesetz behandeln; über kaputtem Layout polieren; Markenschriften ersetzen.

Checkliste

• Verschachtelte Radien optisch verifiziert (oder an design-surfaces übergeben)
• Symbole optisch zentriert, wo sie falsch aussahen
• Vollständige gerenderte Steuermatrix überprüft: nur Text, führendes/nachgestelltes Symbol, nur Symbol, ausstehend/ladend und LTR/RTL wo zutreffend
• Kombinierte Icon-Label-Gruppe/wahrgenommene visuelle Masse zentriert; Label-Baseline/Cap-Höhe-Verhältnis, visuelles Gewicht des Icons und Token-Abstand/Padding verifiziert
• Fokus, Trefferfläche, deaktiviert und laden bewahren Geometrie ohne Label- oder Breitenverschiebung
• Kein transition: all; Hover/Press unterbrechbar
• Dynamische Zahlen verwenden tabular-nums wo sie flackern würden
• Überschriften text-balance; kurze Texte text-pretty wo nützlich
• Trefferflächen erfüllen 44/40-Richtlinie ohne Überlappung
• Mobile Craft: vollbreiter primärer Button <768, Safe-Area, Daumenzone
• Heuristiken gekennzeichnet; ungetestete Zustände mit „Nicht verifiziert“ markiert

Vertiefung

Vollständige Beispiele: references/polish.md. Verwandte Skills: design-surfaces, design-foundations, design-typography, motion, accessibility, references/evidence-policy.md.