lym2128094758/liquid-glass-switch

Seletor de Vidro Líquido para Harnesses de IA

Use este skill quando um usuário solicitar a adição do seletor de vidro empacotado a uma interface web, um harness de IA ou um projeto similar. O objetivo é adaptar o componente ao framework e modelo de estado do projeto hospedeiro, não redesenhar partes não relacionadas do harness.

Instalar este skill no Codex ou Claude dá ao agente de codificação instruções reutilizáveis e arquivos de componente; não concede uma API para modificar a interface dos próprios produtos. Trabalhe no código-fonte editável do usuário ou no harness.

Fluxo de Trabalho

1. Inspecione o projeto hospedeiro antes de editar. Encontre o ponto de entrada da interface, framework, controles segmentados existentes, proprietário do estado, abordagem de estilo e comandos de build ou preview disponíveis. Siga as instruções locais do projeto, como AGENTS.md, CLAUDE.md e outras.
2. Identifique o par de estados que o usuário deseja alternar. Este componente é para exatamente duas escolhas, como Plano/Esfera ou Global/Local. Se o usuário solicitar mais opções, explique que o controle empacotado é binário e adapte-o apenas se a interação solicitada ainda fizer sentido.
3. Leia references/harness-porting.md e os arquivos em assets/. Reutilize assets/liquid-controls.js e assets/liquid-controls.css quando o contrato DOM deles for compatível. Caso contrário, porte o modelo de interação para o framework hospedeiro.
4. Conecte a seleção à fonte de estado real do hospedeiro. Um clique ou arrasto deve atualizar tanto o estado visual selecionado quanto a visualização exibida. Em frameworks declarativos, derive o estilo ativo e aria-pressed a partir do estado do framework, em vez de manipular o DOM por fora.
5. Preserve o comportamento chave de interação: arrasto contínuo do ponteiro, reversões de direção repetidas durante um gesto, troca no limite de 70% de deslocamento, estabilização na opção selecionada e limite de sobra da lente em 20 pixels CSS por lado. Respeite prefers-reduced-motion.
6. Escope ou renomeie seletores CSS se o aplicativo hospedeiro já usar .view-switch, .view-button ou .view-lens. Evite alterar navegação, painéis, roteamento ou persistência não relacionados do harness.
7. Verifique a interface real do hospedeiro com seu fluxo de build, teste ou preview do navegador disponível. Teste arrasto com mouse e toque, ativação direta do botão, gestos reversos/rápidos, redimensionamento, foco de teclado e movimento reduzido. Relate quais verificações foram executadas e qualquer limitação no harness hospedeiro.

Recursos Empacotados

• assets/liquid-controls.js: comportamento de animação de ponteiro e lente sem dependências.
• assets/liquid-controls.css: aparência de vidro em temas claro e escuro.
• assets/demo.html: exemplo standalone para navegador.
• references/harness-porting.md: guia de integração com framework e harness.

O seletor usa botões nativos. O projeto hospedeiro continua responsável por alterar o estado selecionado em resposta aos eventos normais de click dos botões.