lym2128094758/liquid-glass-switch

Conmutador de Vidrio Líquido para Interfaces de Harness

Usa este skill cuando un usuario solicite agregar el conmutador de vidrio empaquetado a una interfaz web, un harness de codificación de IA o un proyecto de interfaz similar. El objetivo es adaptar el componente al framework y modelo de estado del proyecto anfitrión, no rediseñar partes no relacionadas del harness.

Instalar este skill en Codex o Claude le proporciona al agente de codificación instrucciones reutilizables y archivos de componentes; no otorga una API para modificar el chrome de la aplicación de esos productos. Trabaja en el proyecto editable del usuario o en el código fuente del harness.

Flujo de Trabajo

1. Inspecciona el proyecto anfitrión antes de editar. Encuentra el punto de entrada de la UI, el framework, los controles segmentados existentes, el propietario del estado, el enfoque de estilo y los comandos de compilación o vista previa disponibles. Sigue sus instrucciones locales de AGENTS.md, CLAUDE.md y otras instrucciones del proyecto.
2. Identifica el par de estados que el usuario desea conmutar. Este componente es exactamente para dos opciones, como Plano/Esfera o Global/Local. Si el usuario solicita más opciones, explica que el control empaquetado es binario y adáptalo solo si la interacción solicitada aún tiene sentido.
3. Lee references/harness-porting.md y los archivos bajo assets/. Reutiliza assets/liquid-controls.js y assets/liquid-controls.css cuando su contrato DOM sea adecuado. De lo contrario, adapta su modelo de interacción al framework anfitrión.
4. Conecta la selección a la fuente de estado real del anfitrión. Un clic o arrastre debe actualizar tanto el estado visual seleccionado como la vista mostrada. En frameworks declarativos, deriva el estilo activo y aria-pressed del estado del framework en lugar de mutar el DOM por detrás del framework.
5. Conserva el comportamiento clave de interacción: arrastre continuo del puntero, inversiones repetidas de dirección durante un solo gesto, cambio al alcanzar el umbral del 70% de recorrido, establecimiento en la opción seleccionada y límite de desbordamiento de la lente a 20 píxeles CSS por lado. Respeta prefers-reduced-motion.
6. Limita o renombra los selectores CSS si la aplicación anfitriona ya usa .view-switch, .view-button o .view-lens. Evita cambiar la navegación, paneles, enrutamiento o persistencia no relacionados del harness.
7. Verifica la UI anfitriona real con su flujo de trabajo de compilación, prueba o vista previa en navegador disponible. Comprueba el arrastre con ratón y táctil, activación directa del botón, gestos invertidos/rápidos, redimensionamiento, enfoque de teclado y movimiento reducido. Informa qué comprobaciones se realizaron y cualquier limitación en el harness anfitrión.

Recursos Empaquetados

• assets/liquid-controls.js: comportamiento de animación de puntero y lente sin dependencias.
• assets/liquid-controls.css: apariencia de vidrio claro y oscuro.
• assets/demo.html: ejemplo independiente para navegador.
• references/harness-porting.md: guía de integración con frameworks y harness.

El conmutador utiliza botones nativos. El proyecto anfitrión sigue siendo responsable de cambiar el estado seleccionado en respuesta a los eventos normales click de los botones.