动效设计原则
按项目情境加权三种动效哲学，帮助你生成有目的的动效或审查现有动画。
该技能为纯指导性文档，无脚本、无网络请求、无依赖安装，权限面极小；审计模式会写 HTML 报告文件（写入 motion-audits/ 目录）但用途明示，风险低。对三位设计师的归属处理诚实，明确声明'非官方、未经背书'，符合可验证来源归属要求。扣分点：写入用户文件系统时缺乏显式确认步骤说明与回滚指引。
文档内部结构自洽：模式路由、参考索引、工作流交叉引用一致，哲学文件与食谱文件有明确的章节编号对应，失败路径（模糊请求时询问用户、--terminal 回退）有描述。扣分点：完全无测试、无已执行证据，边界输入行为（如畸形的被审计代码、缺失引用文件）未定义，静态评审下不可超过 10 分。
受众与场景清晰（UI 动效创建/审计），模式检测表提供语义触发词，声明了适用范围（Web/UI 动效）与非适用范围（游戏引擎、Lottie 等），含糊请求有询问机制。扣分点：无中文语言支持声明，文档全部英文；环境适配（主流 AI 助手）有说明但对中文用户可达性无信息；触发词表偏向英文表述。
信息架构分层良好：SKILL.md 路由 + workflows + references 渐进披露，README 提供安装、用法、示例和 Credits，MIT 许可证明确。扣分点：无版本号、无 CHANGELOG、无维护责任与更新路径声明；引用文件的实际完整性（demo-shell.html、report-template.html、workflows）未在本次证据中全部展示。
核心任务（生成/审计动效）路径完整：创建模式有食谱库和自检清单，审计模式有检查清单、反 slop 清单和带量化的标记启发式，README 给出示例输出，边际价值（上下文加权、反 AI-slop 模式库）明显高于通用提示。扣分点：输出质量（尤其是 HTML 报告）仅有声称与模板，无可执行的代表性产出验证，且为静态评审不可超过 7 分。
主要声明可部分追溯：三位设计师的公开来源（站点、课程、开源库）在 Credits 中列出，'解读非背书'的推断与事实分离做得好。扣分点：无任何第三方执行证据、无 CI/测试、审计启发式（如 ≥3 组件阈值）无实证依据，独立复现不可行，静态评审下封顶于 5 分以内。
- 纯静态源码评审，未执行任何技能路径，所有分数置信度为低。
- 审计模式会向用户项目写入 motion-audits/ 目录下的 HTML 文件，使用前应知悉该写入行为。
- 文档仅英文，无中文支持；引用的部分外部资源（easing.dev、linear-easing-generator 等）在部分地区的可达性未验证。
- 审计启发式阈值（如 ≥3 个同类组件才标记）为作者经验设定，无实证依据，可能产生误报/漏报。
- 发布者未经 FollowSkills 企业注册表验证，维护与更新路径不明，建议关注仓库活跃度。
- 技能为对三位设计师公开作品的解读与综合，非官方背书内容，专业场景建议核对原始来源。
这个 Skill 能做什么，适合哪些场景？
这是一个动效与交互设计技能，提供两种模式：Create（为组件生成有目的的动效）和 Audit（审查现有动画并输出报告）。其核心是从 Emil Kowalski、Jakub Krehel 和 Jhey Tompkins 三位设计师公开出版物中提炼的三种视角，并根据项目类型（效率工具、儿童应用、营销页等）动态加权。技能内置频率门槛、时长指南、反 AI 味动效清单和无障碍强制要求。适用于 React、Framer Motion、CSS 和 HTML 的动效工作。
首先根据请求关键词检测模式；Create 模式读取 workflows/create.md，进行轻量项目发现（确定情境和视角权重），然后生成 React/Framer Motion/CSS/HTML 组件并应用动效食谱、无障碍和性能默认值。Audit 模式读取 workflows/audit.md，扫描项目中应动而未动的 UI（如缺少 AnimatePresence 的条件渲染），按反 AI 味清单检查代码（脉冲指示器、全盘 hover 缩放、交错动画滥用等），提出三视角加权方案，并默认生成带自动循环 CSS 演示的品牌化 HTML 审计报告（写入 motion-audits/ 目录），传入 --terminal 则输出内联 markdown 报告。两种模式强制处理 prefers-reduced-motion。
- 前端开发者为 SaaS 仪表盘添加 toast 或模态框过渡动画，希望遵循 Linear 式的克制与快速原则
- 团队负责人审查 AI 生成 UI 中的动效，想识别脉冲指示器、blur 入场等典型 AI 味模式并获得改进建议
- 儿童教育应用开发者需要偏重打磨与趣味性（Jakub + Jhey 权重）而非效率导向规则的动效指导
- 工程师检查代码库中的动效缺口——应动画化但未动画化的条件渲染、瞬时的状态切换
- 设计师为作品集或营销落地页寻找有创意的动效实现方案，包括 clip-path、滚动驱动动画、FLIP 等食谱
这个 Skill 有哪些优点和局限？
- 三视角情境加权避免了单一规则一刀切，儿童应用与效率工具获得不同建议
- 频率门槛实用：高频交互（每日数百次）建议不动画，键盘触发绝不动画
- 审计报告含自动循环 CSS 演示，可直接看到推荐的动效效果
- 强制 prefers-reduced-motion，内置前庭安全等无障碍要求
- 明确声明三位设计师未参与或背书，致谢边界清晰
- 设计原则是技能作者对三位设计师公开作品的提炼，并非其本人核实的指导
- 无公开测试套件或基准验证审计准确率
- 设计者特定技巧不保证适用于游戏引擎、Lottie、Rive 等其他动效场景
- HTML 审计报告为默认输出，CI/无头环境需记得传 --terminal
- 仓库未填写 Topics 标签，社区可发现性较低
如何安装这个 Skill？
运行 npx skills add kylezantos/design-motion-principles。手动安装（全局）：git clone https://github.com/kylezantos/design-motion-principles.git，然后将 skills/design-motion-principles 文件夹复制到 ~/.claude/skills/（Claude Code）或 ~/.cursor/skills/（Cursor）。README 提及兼容 Windsurf 等其他 AI 编码助手，但未给出具体路径。
如何使用这个 Skill？
安装后用自然语言请求即可。构建类："Add a polished enter/exit animation to this modal" 或 "Build an animated toast component for this dashboard"。审查类："Audit the motion design in this codebase" 或 "Review the animations in this component"。技能会自动检测模式，模糊时主动询问。