mcpField
F
framer-motion-skills

framer-motion-skills

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

关于 framer-motion-skills

framer-motion-skills 是一组涵盖 Framer Motion 五个领域的技能，面向使用 React 和 Next.js 的开发者。内容包括集成、变体编排、滚动效果、手势交互和布局过渡。

主要功能

  1. 01React 和 Next.js 集成
  2. 02动画变体与编排
  3. 03滚动联动与触发效果
  4. 04手势驱动的交互
  5. 05布局与共享元素过渡

适用场景

  1. 01为 React 界面添加手势交互
  2. 02构建滚动联动动画
  3. 03创建共享元素布局过渡

安装

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

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

安装后在 Claude Code 中输入/framer-motion-skills确认已加载。

附带文件stub.yaml

详细介绍

framer-motion-skills

目录占位条目——完整软件包：C-Jeril/framer-motion-skills

决策树

  1. 是否已安装完整技能？ 此软件包会安装 5 个技能（framer-motion-gestures、framer-motion-layout、framer-motion-react、framer-motion-scroll、framer-motion-variants）；检查第一个技能。

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

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

    [ -e ~/.agents/skills/framer-motion-skills ] && echo "global" || echo "project"

    全局：

    npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures framer-motion-layout framer-motion-react framer-motion-scroll framer-motion-variants -g -y

    项目：

    npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures framer-motion-layout framer-motion-react framer-motion-scroll framer-motion-variants -y

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

注意事项

  • 许可证： MIT

安装后调用

每个技能都以自身名称安装；Agent 会根据请求选择合适的技能。

  • framer-motion-react — “AnimatePresence”、“Framer Motion with Next.js”、“SSR”
  • framer-motion-variants — “variants”、“stagger”、“orchestrated animation”
  • framer-motion-scroll — “useScroll”、“parallax”、“scroll-linked animation”
  • framer-motion-gestures — “drag”、“tap”、“hover gesture”
  • framer-motion-layout — “layoutId”、“shared element transition”、“reorderable list”

功能说明

Framer Motion 技能彼此独立，分别涵盖该库的一个领域：React 和 Next.js 集成（AnimatePresence、useAnimation、SSR）、变体与动画编排（状态机、交错、序列编排）、滚动关联和滚动触发动画（useScroll、useTransform、视差）、手势驱动的交互（拖动、平移、轻触、悬停、聚焦），以及带共享元素过渡的布局动画（layoutId）。

上游仓库还列出了第六个核心 API 技能（framer-motion-core），但其 SKILL.md 存在 YAML 错误，因此 skills CLI 目前无法安装；此占位条目也未包含它。Motion 团队自身维护的动画库，请参阅 motion 占位条目。

不适用场景

  • 官方 Motion 技能（文档搜索、CSS 弹簧、性能审计、升级指南）→ 使用 motion
  • GSAP 专属项目或复杂的时间线编排 → 使用 gsap-skills
  • 不使用 React 框架的原生 CSS 动画 → 使用 animate-css-skill

评论

支持 Markdown