用途:让界面超越常规限制,借助浏览器能力让界面的任意部分体验出彩,例如处理百万行的表格、从触发元素变形的对话框、实时流式校验的表单、电影感页面转场。
使用方式:调用前必须先执行 /impeccable 获取设计原则与上下文采集协议;若尚无设计上下文,需先运行 /impeccable teach。技能强调先提出 2-3 个方向并用 AskUserQuestion 让用户确认,再写代码;需借助浏览器自动化反复预览与迭代,因为技术上有效的效果很少一次成型。
主要能力:View Transitions 实现共享元素形变;@starting-style 实现纯 CSS 入场;弹簧物理;animation-timeline: scroll() 滚动驱动动画;WebGL、WebGPU、Canvas/OffscreenCanvas、SVG 滤镜链;虚拟滚动、GPU 加速图表、数据过渡动画;@property、Web Animations API;Web Workers、WASM;Web Audio 与设备 API。
限制:需渐进增强并提供降级方案;滚动驱动动画在 Firefox 仅 flag;WebGPU 支持有限需回退 WebGL2;性能目标 60fps,低于 50 需简化;必须尊重 prefers-reduced-motion;需真实中端设备测试;音频需用户主动授权。该技能只提升界面感受,不改变产品功能。