mcpField
A
animate-css-skill

animate-css-skill

github.com/podo设计与 UI29166 次安装1 天前更新
代码仓库

关于 animate-css-skill

animate-css-skill 指导在 HTML、React/JSX 和 WordPress 模板中使用 Animate.css v4.1.1，适合制作动画效果的开发者。它涵盖动画类、按需提取关键帧及动效无障碍处理。

主要功能

  1. 01应用 Animate.css 动画类
  2. 02按需提取关键帧
  3. 03添加滚动触发显示效果
  4. 04支持 RTL 方向适配
  5. 05遵循减少动态效果偏好

适用场景

  1. 01为 React 组件添加入场动画
  2. 02在 WordPress 模板中加入动画
  3. 03为滚动页面元素设置显示效果

安装

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

$npx skills add https://github.com/podo/design-agent-skills --skill animate-css-skill

安装后在 Claude Code 中输入/animate-css-skill确认已加载。

附带文件stub.yaml

详细介绍

animate-css-skill

目录占位页 — 完整技能：msrbuilds/animate-css-skill

决策树

  1. 是否已安装完整技能？ 上游将此技能命名为 animate-css，因此它会安装在此指针文件旁边（不会替换此指针文件）。

    • 全局：f=~/.agents/skills/animate-css/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/animate-css/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已作为 animate-css 安装，调用它并继续
    • pointer → 转到第 2 步

  2. 检测作用范围，然后安装：

    [ -e ~/.agents/skills/animate-css-skill ] && echo "global" || echo "project"

    全局：

    npx skills add msrbuilds/animate-css-skill --skill animate-css -g -y

    项目：

    npx skills add msrbuilds/animate-css-skill --skill animate-css -y

    **Claude Code：**发送一条以 ! 开头的聊天消息作为命令，即可在不离开对话的情况下运行它。

注意事项

  • **许可证：**仓库中没有 LICENSE 文件

安装后调用

  • 技能名称：animate-css
  • 触发短语："Animate.css"、"CSS animation library"、"bounce animation"、"fadeIn"、"animate-css"

功能

将 Animate.css v4.1.1 动画应用于 HTML、React/JSX 组件和 WordPress PHP 模板。涵盖完整的 Animate.css 类目录（attention seekers、bouncing、fading、flipping、rotating、sliding、zooming、specials），并仅从捆绑的 assets/animate.min.css 中提取所需的关键帧。使用 Intersection Observer API 添加滚动触发展示效果，为从右向左布局提供 RTL 感知的方向翻转，并遵循 prefers-reduced-motion 设置以尊重用户的无障碍偏好。

不适用场景

  • 从头构建自定义关键帧动画（使用 css-animation-skill）
  • 需要 JavaScript 状态的交互式手势驱动动画（使用 framer-motion-skills）

评论

支持 Markdown