实现可拖动关闭的弹层
提供现有弹层组件与支持的输入方式。明确组件怎样跟随指针、何时关闭，以及键盘用户怎样完成同一操作。
Apple Design
将拖动、滑动或弹层动作实现为响应及时的网页交互。分别验证手势进行中、松手后和启用减少动效时的状态。
实现并核对网页手势
提供目标组件与预期状态，让 Agent 验证手势和可访问的替代路径。
带入 Floatboat 的请求
请求可预览和复制，不会从此处自动发送。
参考来源: Apple Design https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md 先阅读原始说明并核对当前环境与依赖。需要安装或连接新工具时，先提出方案。 我的任务: 用 Apple Design 检查这段网页弹层。沿用现有技术栈，实现可打断的拖动关闭，并检查键盘关闭、快速反转和减少动效。记录实际验证的状态。 期望交付: 可运行的交互及明确的状态检查记录。
关于 Apple Design
Emil Kowalski 的这项 MIT 许可 Skill 将 Apple 设计演讲中的原则用于网页。它提供手势、弹簧动效、交互打断与可访问替代方式的指引。实现时使用现有的网页组件与适用的动效库。
Apple Design Skill 的网页交互场景
选择一个需要用动效传达位置或控制感的交互。明确动作怎样结束，同时为减少动效和键盘操作保留可用路径。
调整可中断的过渡
在上一个过渡尚未完成时触发导航变更。从元素当前可见位置开始反向移动，并验证反转时没有明显突跳。
增加滑动操作
提供列表行组件与预期动作。验证手势阈值和反馈，并保留功能等价的点击或键盘入口。
适配减少动效设置
选择移动幅度较大的动画，说明其传递的关键信息。实现减少移动的替代状态，再分别验证两种设置下的反馈。
如何实现一个手势并逐状态复核
先约定指针移动时、松手后与中途打断时的表现。让 Agent 在真实组件中验证三个阶段，并记录交互如何结束。
定义状态和输入
列出静止、拖动、松手和打断状态，以及支持的指针与键盘路径。
在现有组件实现
沿用现有技术栈与动效工具。让反馈跟随实际输入，并保留可用的替代操作。
验证松手、反转和可访问性
在代表设备上检查中途打断与减少动效。记录已经执行的状态和待核事项。
探索更多 Agent Skills
查看其他 Skill 指南，并在使用前核对原始来源。
Apple Design 常见问题
这个 Skill 是 Apple 发布的吗？
它由 Emil Kowalski 发布，参考 Apple 设计演讲并转换为网页交互指引。
适用于 SwiftUI 吗？
本指南针对网页，可使用 CSS、指针事件和项目现有的动效工具。
中途打断动画时怎么处理？
从元素当前的可见位置开始新的过渡。从旧目标位置开始可能造成突跳。
什么时候适合弹簧动效？
需要体现物理反馈的交互可以考虑使用。用真实手势和内容验证效果。
减少动效时应保留什么？
保留必要的状态反馈和等价操作入口，同时减少不必要的位移。
手势应测试哪些状态？
检查初始状态、拖动、松手、打断，以及代表设备上的键盘或点击替代路径。