关于 emilkowalski-motion
用于为已有设计作品补充克制动效的后续 Skill，面向设计师和开发者，通过动画表达层级与界面状态，同时保留原有文案、数据和布局意图。
主要功能
- 01先检查现有作品
- 02按界面目的选择动效
- 03优先使用 transform 和 opacity
- 04统一时长与缓动风格
- 05支持减少动态效果偏好
- 06清理动画相关资源
适用场景
- 01为完成的页面添加入场效果
- 02明确控件悬停与激活状态
- 03为界面状态切换添加动画
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/emilkowalski-motion确认已加载。
详细介绍
Emil Kowalski 动效后续调整
在设计稿已存在后使用此技能。目标是让界面显得鲜活，而不是把它变成动效演示。
工作流
- 添加动画前，检查当前 HTML、组件或选定的页面元素。
- 选择能清晰传达状态或层级的最少动效：
- 主要内容的入场显现
- 重要控件的悬停／激活反馈
- UI 状态间的过渡
- 只有在有助于讲述内容时才添加滚动显现
- 优先使用
transform和opacity。避免对top、left、width或height等布局属性添加动画。 - 在整个设计稿中使用统一的动效风格。不要混用互不相关的缓动、时长或物理效果。
- 为任何自动播放或与滚动联动的动效添加
prefers-reduced-motion备用方案。 - 保持文案、数据和布局意图不变，除非用户明确要求重新设计。
动效规则
- 默认的 UI 过渡应当快速且实用：大多数控件为 140-220ms。
- 较大范围的页面内容显现可以更慢，但不得妨碍阅读。
- 避免无休止的装饰性循环，除非它们用于传达状态或进度。
- 不要添加自定义光标、杂乱的粒子效果，或与内容争夺注意力的动效。
- 只对小范围内容使用交错效果。长列表使用交错效果会让界面显得迟缓。
实现说明
- 对于纯 HTML，CSS 关键帧和少量 JavaScript 观察器就足够了。
- 对于 React 或框架代码，使用代码库中已有的本地技术栈。
- 如果有 GSAP，且动效需要编排顺序，可结合使用
gsap-core、gsap-timeline或gsap-scrolltrigger。 - 始终清理观察器、计时器和动画实例。
评论
支持 Markdown