lym2128094758/liquid-glass-switch

Flüssig-Glas-Schalter für Harness-Oberflächen

Verwende dieses Skill, wenn ein Benutzer darum bittet, den vorgefertigten Glasschalter in eine Web-Oberfläche, ein KI-Coding-Harness oder ein ähnliches Projekt-UI einzufügen. Ziel ist es, die Komponente an das Host-Projekt-Framework und das Zustandsmodell anzupassen, nicht aber nicht zusammenhängende Teile des Harness neu zu gestalten.

Das Installieren dieses Skills in Codex oder Claude stattet den Coding-Agenten mit wiederverwendbaren Anweisungen und Komponentendateien aus; es gewährt keine API zum Ändern der Applikations-Chrome dieser Produkte selbst. Arbeite stattdessen am bearbeitbaren Projekt oder Harness-Quellcode des Benutzers.

Arbeitsablauf

1. Untersuche das Host-Projekt vor der Bearbeitung. Finde den UI-Einstiegspunkt, das Framework, vorhandene segmentierte Steuerelemente, den State-Owner, den Styling-Ansatz und verfügbare Build- oder Vorschau-Befehle. Befolge die lokalen AGENTS.md, CLAUDE.md und andere Projektanweisungen.
2. Identifiziere das Paar von Zuständen, das der Benutzer umschalten möchte. Diese Komponente ist für genau zwei Auswahlmöglichkeiten gedacht, z. B. Ebene/Kugel oder Global/Lokal. Wenn der Benutzer nach mehr Auswahlmöglichkeiten fragt, erkläre, dass die vorgefertigte Steuerung binär ist, und passe sie nur an, wenn die angeforderte Interaktion dennoch sinnvoll ist.
3. Lies references/harness-porting.md und die Dateien unter assets/. Verwende assets/liquid-controls.js und assets/liquid-controls.css wieder, wenn ihr DOM-Vertrag passt. Ansonsten portiere deren Interaktionsmodell in das Host-Framework.
4. Verbinde die Auswahl mit der tatsächlichen Zustandsquelle des Hosts. Ein Klick oder Ziehen muss sowohl den visuell ausgewählten Zustand als auch die angezeigte Ansicht aktualisieren. Leite in deklarativen Frameworks das aktive Styling und aria-pressed vom Framework-State ab, anstatt das DOM hinter dem Rücken des Frameworks zu mutieren.
5. Bewahre das wesentliche Interaktionsverhalten: kontinuierliches Zeigerziehen, wiederholte Richtungsumkehr während einer Geste, Umschalten bei 70 % der Zugschwelle, Einrasten an der gewählten Option und Begrenzung des Linsenüberhangs auf 20 CSS-Pixel pro Seite. Respektiere prefers-reduced-motion.
6. Scoping oder Umbenennung von CSS-Selektoren, wenn die Host-App bereits .view-switch, .view-button oder .view-lens verwendet. Vermeide es, die nicht zusammenhängende Navigation, Panels, Routen oder Persistenz des Harness zu ändern.
7. Überprüfe das tatsächliche Host-UI mit seinem verfügbaren Build-, Test- oder Browser-Vorschau-Workflow. Teste Maus- und Touch-Ziehen, direkte Button-Aktivierung, umgekehrte/schnelle Gesten, Größenänderung, Tastaturfokus und reduzierte Bewegung. Berichte, welche Prüfungen durchgeführt wurden und ob es Einschränkungen im Host-Harness gibt.

Mitgelieferte Ressourcen

• assets/liquid-controls.js: dependency-freies Zeiger- und Linsen-Animationverhalten.
• assets/liquid-controls.css: helles und dunkles Glas-Aussehen.
• assets/demo.html: eigenständiges Browser-Beispiel.
• references/harness-porting.md: Framework- und Harness-Integrationsleitfaden.

Der Schalter verwendet native Buttons. Das Host-Projekt bleibt dafür verantwortlich, den ausgewählten Zustand als Reaktion auf die normalen click-Events der Buttons zu ändern.