mcpField
A
animate-skill

animate-skill

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

关于 animate-skill

animate-skill 面向 Next.js 和 React 开发者，提供受 Emil Kowalski 启发的动画指南、参考资料和可运行示例，涵盖悬停交互、文本显现与模态框过渡，并强调动画应服务于明确目的。

主要功能

  1. 01缓动与时长速查表
  2. 02CSS 和 Framer Motion 参考
  3. 03可运行的 .tsx 动画示例
  4. 04性能与无障碍指南

适用场景

  1. 01添加悬停微交互
  2. 02构建堆叠 Toast 动画
  3. 03创建文本显现和标签指示器
  4. 04制作高度变化和模态框过渡

安装

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

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

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

附带文件stub.yaml

详细介绍

animate-skill

目录占位条目 — 完整技能：delphi-ai/animate-skill

决策树

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

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

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

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

    全局：

    npx skills add delphi-ai/animate-skill --skill animate -g -y

    项目：

    npx skills add delphi-ai/animate-skill --skill animate -y

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

注意事项

  • **许可证：**没有 LICENSE 文件
  • 名称冲突：animate 也由 emilkowalski-skill 写入（无论是安装本身还是其目录指针）；同时安装两者会覆盖较早安装的那个。

安装后调用

  • 技能名称：animate
  • 触发短语："animate"、"hover animation"、"toast animation"、"text reveal"、"animate-skill"

功能介绍

受 Emil Kowalski 启发的 Next.js 和 React 动画模式，基于他的《Animations on the Web》课程。包含缓动与持续时间速查表、参考笔记（CSS 动画、Framer Motion、缓动与时序、性能与无障碍），以及可运行的 .tsx 示例：悬停微交互、Toast 堆叠、文本显现、共享布局的标签页指示器、动态高度和模态框过渡。其设计理念强调让动效显得自然且有明确目的，而非仅作装饰：每个动画都应发挥清晰的沟通作用。

不适用场景

  • 涉及多个连续步骤的复杂时间线编排（使用 gsap-skills）
  • 视频或 Lottie 输出（使用 wiggle-claude-skill）

评论

支持 Markdown