lym2128094758/liquid-glass-switch

Sélecteur en Verre Liquide pour Interfaces de Harness

Utilisez ce skill lorsqu'un utilisateur demande d'ajouter le sélecteur en verre liquide packagé à une interface web, un harness de codage IA ou un projet similaire. L'objectif est d'adapter le composant au framework et au modèle d'état du projet hôte, et non de redessiner des parties non liées du harness.

L'installation de ce skill dans Codex ou Claude fournit à l'agent de codage des instructions réutilisables et des fichiers de composant ; cela n'accorde pas d'API pour modifier l'interface applicative propre de ces produits. Travaillez plutôt sur le projet éditable de l'utilisateur ou la source du harness.

Flux de travail

1. Inspectez le projet hôte avant de modifier. Trouvez le point d'entrée de l'interface utilisateur, le framework, les contrôles segmentés existants, le propriétaire de l'état, l'approche stylistique et les commandes de construction ou d'aperçu disponibles. Suivez ses instructions locales AGENTS.md, CLAUDE.md et autres.
2. Identifiez la paire d'états que l'utilisateur souhaite basculer. Ce composant est prévu pour exactement deux choix, comme Plan/Sphère ou Global/Local. Si l'utilisateur demande plus de choix, expliquez que le contrôle packagé est binaire et adaptez-le uniquement si l'interaction demandée reste pertinente.
3. Lisez references/harness-porting.md et les fichiers sous assets/. Réutilisez assets/liquid-controls.js et assets/liquid-controls.css lorsque leur contrat DOM correspond. Sinon, portez leur modèle d'interaction dans le framework hôte.
4. Connectez la sélection à la source d'état réelle du hôte. Un clic ou un glissement doit mettre à jour à la fois l'état visuel sélectionné et la vue affichée. Dans les frameworks déclaratifs, dérivez le style actif et aria-pressed de l'état du framework au lieu de muter le DOM derrière lui.
5. Préservez le comportement d'interaction clé : glissement continu du pointeur, inversions répétées de direction pendant un même geste, basculement au seuil de 70 % de déplacement, positionnement sur l'option sélectionnée, et limitation du débordement de la lentille à 20 pixels CSS par côté. Respectez prefers-reduced-motion.
6. Limitez ou renommez les sélecteurs CSS si l'application hôte utilise déjà .view-switch, .view-button ou .view-lens. Évitez de modifier la navigation, les panneaux, le routage ou la persistance non liés du harness.
7. Vérifiez l'interface utilisateur réelle du hôte avec ses workflows de construction, test ou aperçu navigateur disponibles. Testez le glissement souris et tactile, l'activation directe par bouton, les gestes inversés/rapides, le redimensionnement, le focus clavier et le mouvement réduit. Rapportez quels tests ont été effectués et toute limitation dans le harness hôte.

Ressources packagées

• assets/liquid-controls.js : comportement d'animation du pointeur et de la lentille sans dépendance.
• assets/liquid-controls.css : apparence vitreuse claire et sombre.
• assets/demo.html : exemple autonome dans un navigateur.
• references/harness-porting.md : guide d'intégration pour framework et harness.

Le sélecteur utilise des boutons natifs. Le projet hôte reste responsable de la modification de l'état sélectionné en réponse aux événements click normaux des boutons.