design-motion-principles

用途：该技能用于交互组件动效设计，以及审查现有 UI 动效中的 AI 生成痕迹（如脉冲指示器、处处 hover 缩放、错峰动画滥用）。不适用于静态布局、配色或字体排印，那些应转交设计系统类技能。\n\n主要能力：分为两种模式。创建模式按“上下文发现→视角权重→内嵌动效的组件（React / Framer Motion / CSS / HTML）”输出；审查模式执行动效缺口分析与反 AI 味清单，生成带自动循环 CSS 演示的品牌化 HTML 报告，或使用 --terminal 输出内联 Markdown。动效指导从 Emil Kowalski（克制与速度）、Jakub Krehel（生产级打磨）、Jhey Tompkins（创意实验）三种视角按项目上下文加权，强调三者之间的张力而非统一套用。\n\n使用方式：安装命令为 npx skills add kylezantos/design-motion-principles。安装后调用该技能并说明请求即可：说“animate this”“add motion”“make it feel alive”进入创建模式；说“audit my animations”“review motion”“check for AI slop”进入审查模式；请求含义模糊时技能会反问选择哪种模式。\n\n适用场景：需要为交互组件添加过渡、悬停状态、微交互、进入/退出动画；或需要审查现有 UI 动效是否存在 AI 味模式。\n\n限制：该技能为 package 类型，仅安装 SKILL.md 不足以使用，还需要工作流文件。是否收费、支持平台的具体版本、效果指标等资料暂未提供。