Interface Polish
Verwende dieses Skill, wenn der Benutzer eine bestehende Oberfläche aufgeräumter wirken lassen möchte, oder bei der Implementierung einer Komponente, bei der kleine visuelle Details wichtig sind. Verbessere Klarheit, Konsistenz und Feedback, ohne die visuelle Identität, die Informationsarchitektur oder das Interaktionsmodell des Produkts zu ändern, es sei denn, dies wird ausdrücklich gewünscht.
Lokale visuelle Sprache festlegen
Bevor du Änderungen vornimmst, identifiziere das Framework, den Styling-Ansatz, die Komponentenbibliothek, die Design-Tokens und die gängigen Konventionen benachbarter Komponenten. Folge dem vorhandenen System und verwende gemeinsame Komponenten und Werte wieder. Bevorzuge eine Reparatur an der gemeinsamen Quelle gegenüber vielen lokalen Patches. Füge keine Abhängigkeit oder ein Styling-System für ein Polish-Detail hinzu.
Visuelle Konsistenz ist Beleg, aber persönlicher Geschmack ist kein Fehler. Bewahre bewusste Projektkonventionen, wie flache Oberflächen oder zurückhaltende Animationen, wenn sie konsistent angewendet werden.
Den richtigen Modus wählen
Implementierung. Nimm nur die Änderungen vor, die ein beobachtetes Problem lösen oder eine explizit angeforderte Behandlung abschließen. Halte das Verhalten barrierefrei und die Implementierung idiomatisch für das Projekt.
Review. Bleibe schreibgeschützt, es sei denn, eine Implementierung wird ebenfalls angefordert. Gib den geprüften Umfang an, bewerte die relevanten Zustände und berichte nur über Ergebnisse, die durch die gerenderte Oberfläche oder Quellenbelege gestützt werden. Präsentiere nicht beobachtetes visuelles Verhalten als Tatsache.
Lies für beide Modi references/polish-checklist.md für den Entscheidungsleitfaden, die Zustandsabdeckung und das Berichtsformat. Lies für die Implementierung references/implementation-recipes.md nur für den tatsächlichen Stack des Projekts: CSS, Tailwind, React Motion, GSAP oder Three.js. Lies für Arbeiten an Farbe, Fokus, Animation, Steuerelementen oder Zielgrößen references/wcag-accessibility.md; führe scripts/check_contrast.py aus, wenn Vorder- und Hintergrundfarben in Hex-Werte aufgelöst werden können.
Hochwertige Verfeinerungen anwenden
- Text: Wähle den Zeilenumbruch basierend auf Inhaltslänge und Viewport; stabilisiere Live-Zahlenwerte, wenn ihre sich ändernde Breite benachbarte Inhalte stört.
- Oberflächen: Behandle verschachtelte Radien, Tiefe, Bildkanten und Symbolplatzierung als visuelle Beziehungen. Korrigiere sie, wenn sie in ihrem gerenderten Kontext falsch aussehen.
- Feedback: Gestalte Ruhe-, Hover-, Fokus-, Gedrückt-, Ausgewählt-, Lade- und Deaktiviert-Zustände leicht unterscheidbar. Mache Bewegung nicht zum einzigen Anzeichen, dass sich etwas geändert hat.
- Bewegung: Verwende reversible Übergänge für benutzergesteuerte Zustandsänderungen. Hebe inszenierte Bewegungen für seltene Momente auf, in denen sie Hierarchie oder Richtung erklären. Respektiere
prefers-reduced-motion. - Eingabekontexte: Lass Touch-Geräte keinen klebrigen Hover-Effekt erben. Behalte sichtbares Fokusverhalten, Tastaturbedienung und praktikable Zielgrößen bei, während du Steuerelemente polierst.
Vermeide dekorative Änderungen ohne Nutzen für den Benutzer. Verwende keine breiten Übergänge, permanenten Performance-Hinweise oder Bewegungen, die Routine-Aktionen langsamer oder schwerer erfassbar machen.