用于工具UI的液态玻璃开关
当用户要求向Web界面、AI编码工具或类似项目UI添加封装的玻璃开关时，使用此技能。目标是调整该组件以适配宿主项目的框架和状态模型，而不是重新设计工具中无关的部分。
将此技能安装到Codex或Claude中，可为编码代理提供可复用的指令和组件文件；它不会授予修改这些产品自身应用程序框架的API。请改为在用户的可编辑项目或工具源码上进行操作。
工作流程
- 编辑前检查宿主项目。查找UI入口点、框架、现有的分段控件、状态所有者、样式方法以及可用的构建或预览命令。遵循其本地的
AGENTS.md、CLAUDE.md和其他项目说明。 - 确定用户想要切换的两个状态。此组件仅限两个选择，例如“平面/球体”或“全局/局部”。如果用户要求更多选择，请说明封装的控件是二元的，仅当所请求的交互仍然合理时才进行调整。
- 阅读
references/harness-porting.md和assets/目录下的文件。当assets/liquid-controls.js和assets/liquid-controls.css的DOM契约符合时，直接复用它们。否则，将其交互模型移植到宿主框架中。 - 将选择与宿主的实际状态源连接起来。点击或拖动必须同时更新选中的视觉状态和显示的视图。在声明式框架中，从框架状态派生活动样式和
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 事件来更改选中状态。