液態玻璃切換開關 (Liquid Glass Switch) 用於操作介面 UI
當使用者要求將此封裝好的玻璃切換開關加入到網頁介面、AI 編碼操作介面或類似專案的 UI 中時，請使用此技能。目標是根據主機專案的框架和狀態模型來適配該元件，而非重新設計操作介面中無關的部分。
將此技能安裝到 Codex 或 Claude 中，可為編碼代理提供可重複使用的指示和元件檔案；它並未授予用於修改這些產品自身應用程式外觀的 API。請改為在使用者可編輯的專案或操作介面原始碼上工作。
工作流程
- 在編輯前檢查主機專案。找到 UI 進入點、框架、現有的分段控制項、狀態擁有者、樣式方法以及可用的建置或預覽指令。遵循其本地的
AGENTS.md、CLAUDE.md和其他專案指示。 - 找出使用者想要切換的兩個狀態。此元件僅適用於恰好兩個選擇，例如「平面/球體」或「全域/區域」。如果使用者要求更多選擇，請說明封裝的控制項是二元的，並且僅在要求的互動仍然合理的情況下才進行適配。
- 閱讀
references/harness-porting.md以及assets/下的檔案。當其 DOM 合約符合時，重複使用assets/liquid-controls.js和assets/liquid-controls.css。否則，將其互動模型移植到主機框架中。 - 將選擇連接到主機的實際狀態來源。點擊或拖曳必須同時更新選取的視覺狀態和顯示的檢視。在宣告式框架中，從框架狀態推導出啟用狀態的樣式和
aria-pressed，而不是在框架背後直接操作 DOM。 - 保留關鍵的互動行為：連續的指標拖曳、在同一個手勢內重複方向反轉、在 70% 行程閾值處切換、穩定於選取的選項，並將鏡片帽沿限制在每邊 20 CSS 像素。尊重
prefers-reduced-motion。 - 如果主機應用程式已使用
.view-switch、.view-button或.view-lens，請重新命名或限定 CSS 選擇器。避免變更操作介面無關的導航、面板、路由或持久化功能。 - 使用其可用的建置、測試或瀏覽器預覽工作流程來驗證實際的主機 UI。檢查滑鼠和觸控拖曳、直接按鈕啟用、反向/快速手勢、調整大小、鍵盤焦點以及減少動畫。報告已執行的檢查項目以及主機操作介面中的任何限制。
封裝的資源
assets/liquid-controls.js：無相依性的指標和鏡片動畫行為。assets/liquid-controls.css：淺色和深色玻璃外觀。assets/demo.html：獨立的瀏覽器範例。references/harness-porting.md：框架和操作介面整合指南。
此開關使用原生按鈕。主機專案仍負責根據按鈕的一般 click 事件來變更選取的狀態。