mcpField
A
adding-animations

adding-animations

github.com/fusengine设计与 UI3450 次安装2 周前更新
代码仓库

关于 adding-animations

adding-animations 是一项为生成的 HTML/CSS 组件添加动效和交互视觉状态的设计技能。它依据设计系统中的动效设定，指导使用 Framer Motion 实现，并要求支持减少动态效果的无障碍设置。

主要功能

  1. 01滚动触发的入场动画
  2. 02悬停、焦点、禁用和加载状态
  3. 03页面切换与微交互
  4. 04分层视觉效果
  5. 05减少动态效果的无障碍指导

适用场景

  1. 01为生成页面中的区块和卡片添加动画
  2. 02为交互元素添加一致的反馈
  3. 03在设计审查前实现路由切换效果

MCP 相关

该技能指导通过 `mcp__gemini-design__modify_frontend` 向现有组件注入 Framer Motion 代码。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fusengine/agents --skill adding-animations

安装后在 Claude Code 中输入/adding-animations确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
entrance-patterns.md
glassmorphism-advanced-ref.md
interactive-states-ref.md
layered-backgrounds-ref.md
micro-interactions.md
motion-patterns.md
motion-principles.md
page-transitions.md
patterns-buttons.md
patterns-cards.md
patterns-microinteractions.md
patterns-navigation.md
reduced-motion.md

详细介绍

阶段 4：添加动画 — 动态效果、状态和视觉特效

何时执行

阶段 3 组件生成后、设计审查前。

输入（来自阶段 3）
  • 已生成的 HTML/CSS 组件，包含变体和布局。
  • design-system.md 中的动态效果风格（企业风、现代、活泼、奢华）。
步骤
  1. 读取动态效果风格，从 design-system.md 中读取 — 用于确定时长、缓动和强度。
  2. 入场动画 — 每个区块都必须在滚动时播放动画（IntersectionObserver）。子元素依次延迟 80-120ms。使用 fadeUp（translateY 30px→0）+ fadeIn（opacity 0→1）。卡片按网格顺序依次显示。
  3. 悬停深度效果 — 按钮：translateY(-3px) + shadow-lg + brightness(1.05)。卡片：translateY(-8px) + shadow-xl + scale(1.01)。链接：颜色过渡 150ms。
  4. 焦点/禁用状态 — 使用 :focus-visible，设置 2px 轮廓线 + 4px 偏移。使用 :disabled，设置 opacity 0.4 + cursor not-allowed。所有交互元素都必须实现。
  5. 视觉层次 — 导航栏使用玻璃拟态（backdrop-blur 12px + bg oklch/0.85）。Hero 区域使用渐变叠加层（oklch dark/0.6→transparent）。区块分隔符（clip-path polygon 或 SVG 波浪）。背景渐变光球（带模糊效果的 radial-gradient oklch）。
  6. 微交互 — 按钮按下时缩放 scale(0.97)，切换控件滑动 200ms，表单输入框聚焦时边框颜色过渡，加载骨架脉冲动画。
  7. 添加页面过渡动画，参考 references/page-transitions.md — 路由级动画。
  8. 实现 — 使用 mcp__gemini-design__modify_frontend 将 Framer Motion 代码注入现有组件。
  9. 验证无障碍访问 — 必须支持 prefers-reduced-motion。时长限制：悬停 <100ms，模态框 <300ms，页面 <400ms（参见 references/motion-principles.md）。
输出
  • 所有组件均使用 Framer Motion 动画，并与动态效果风格相匹配。
  • 每个交互元素都具备交互状态（悬停、焦点、激活、禁用、加载）。
  • 在允许的情况下应用视觉特效。包含减少动态效果的回退方案。
下一步 → 阶段 5：设计审查

5-design-audit/SKILL.md — 审查视觉一致性、无障碍访问和反 AI 垃圾设计。

参考资料
文件用途
references/motion-patterns.mdFramer Motion 核心模式
references/motion-principles.md时长限制和原则
references/entrance-patterns.md入场动画模式
references/interactive-states-ref.md状态定义（悬停、焦点等）
references/micro-interactions.md微交互模式
references/glassmorphism-advanced-ref.md玻璃拟态技术
references/layered-backgrounds-ref.md分层背景特效
references/page-transitions.md路由级过渡动画
references/patterns-cards.md卡片动画模式
references/patterns-buttons.md按钮动画模式
references/patterns-navigation.md导航动画
references/patterns-microinteractions.md细节微交互
references/reduced-motion.mdprefers-reduced-motion 无障碍模式

评论

支持 Markdown