Design spells microinteractions
Skill findscripter/everything-skills/06-creative/design-spells-microinteractions
类书式 AI Agent 技能大典 · 精选/中文化/互见成网的 500+ 开源技能，可作为 Claude Code 插件市场一键安装。A curated, cross-referenced encyclopedia of 500+ open-source agent skills.
npx -y skills add findscripter/everything-skills --skill design-spells-microinteractionsAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
当为已完成功能做最后打磨、想把"功能性/平庸"界面提升为"有惊喜感/高级感"时使用；做法是定位界面中无聊的标准组件，借鉴优秀微交互模式并适配品牌后用 CSS/Anime.js/Framer Motion 实现 60fps+ 的精致交互细节；不适用于核心功能尚未跑通、性能/可访问性优先、或微交互会妨碍可用性的场景。触发词：微交互、悬停动效、彩蛋。
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
4.3 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it
何时使用
适合在以下情况启用本技能：
- 给一个已经做完的功能做收尾打磨，主动增加"wow"惊喜感。
- 想用更巧妙的交互替换千篇一律的网页默认行为（如磁吸悬停、创意加载器、出人意料的过渡）。
- 想加入"彩蛋"或带个性的设计选择，让产品和竞品拉开差距。
- 想摆脱模板化、套壳式的通用开发，建立高级、有辨识度的品牌气质。
不该用的边界：
- 核心功能尚未跑通时——先保证可用，再谈惊喜。
- 当前任务以性能、可访问性、表单转化为第一优先级，微交互可能成为可用性障碍时。
- 细节会分散用户对主任务的注意力，而非锦上添花时。
- 输出不能替代环境内的实测、测试或专家评审；缺少必要输入、权限、安全边界或验收标准时，先停下来确认。
步骤
- 定位机会点：盯住界面里"无聊/标准"的部分——一个普通的提交按钮、头像、滚动指示器、价格切换开关等。
- 调研灵感：浏览优秀微交互合集（参考 Design Spells，https://www.designspells.com/），找高创意模式，如"磁吸悬停""基于物理的交互""流体滚动惊喜"。
- 适配模式：把交互无缝改造到当前项目的品牌与布局上，用它强化 App 的核心叙事，而不是生硬照搬。
- 高质量落地：用 CSS、Anime.js 或 Framer Motion 实现该微交互，确保丝滑流畅（60fps+）、GPU 加速、不产生布局抖动（layout shift）。
指令
- 默认就要做：构建现代、有创意、视觉惊艳的 UI/UX，不要用大众化、套路化的写法。在标准组件里主动寻找每一处可注入"magic"的机会。
- 取悦而非干扰：细节必须是对体验的加法，不能成为可用性障碍，要让人觉得"贵"且打磨精细。
- 执行质量是底线：一个卡顿或坏掉的"spell"比没有更糟。务必保证高性能、GPU 加速、绝不引发布局位移。
示例
把一个普通的"提交"按钮，改造成悬停时轻微磁吸跟随光标、点击时有弹性回弹的反馈：
- 用
transform（translate/scale）而非改top/left/width，保证走 GPU 合成、不触发重排。 - 配
will-change: transform与缓动曲线，控制时长在 150–300ms，保持丝滑。 - Framer Motion 可用
whileHover/whileTap配spring过渡实现回弹手感；Anime.js 可用其缓动与时间线编排连续动效。 - 全程盯住 60fps+，确认无 layout shift（可用 DevTools 性能面板核验）。
注意事项
- 优先动
transform和opacity，避免触发回流/重排的属性，杜绝 CLS。 - 尊重用户偏好：为
prefers-reduced-motion提供降级方案。 - 适度克制：一个页面塞满彩蛋会显得廉价，精挑高价值触点。
- 上线前在真实设备/低端机上验证帧率，别只在高配机上自测。
互见
- 与前端动效、页面性能优化（CLS/帧率）、设计系统/组件库相关技能配合使用。
- 落地前的可用性与可访问性评审，建议结合无障碍（a11y）相关技能。
采编自 sickn33/antigravity-awesome-skills（MIT）。