mcpField
G
gsap-skills

gsap-skills

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

关于 gsap-skills

gsap-skills 是面向使用 GSAP 动画的 Agent 的 GreenSock 官方技能套件，按核心动画、插件、框架、React 和性能等主题组织指导。

主要功能

  1. 01核心补间与时间轴
  2. 02ScrollTrigger 动画指导
  3. 03插件专项指导
  4. 04React 与框架集成
  5. 05动画性能指导

适用场景

  1. 01构建滚动联动动画
  2. 02编排复杂 GSAP 时间轴
  3. 03在项目中使用 GSAP 插件
  4. 04将 GSAP 集成到 React、Vue、Svelte 或 Nuxt

安装

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

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

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

附带文件stub.yaml

详细介绍

gsap-skills

目录条目占位 — 完整软件包：greensock/gsap-skills

决策树

  1. 是否已安装完整技能？ 此软件包会安装 8 项技能（gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-plugins、gsap-utils、gsap-react、gsap-performance、gsap-frameworks）；先检查第一项。

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

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

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

    全局：

    npx skills add greensock/gsap-skills --skill gsap-core gsap-timeline gsap-scrolltrigger gsap-plugins gsap-utils gsap-react gsap-performance gsap-frameworks -g -y

    项目：

    npx skills add greensock/gsap-skills --skill gsap-core gsap-timeline gsap-scrolltrigger gsap-plugins gsap-utils gsap-react gsap-performance gsap-frameworks -y

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

Claude Code 插件安装方式：

/plugin marketplace add greensock/gsap-skills
/plugin install gsap-skills@gsap-skills

注意事项

  • 许可证： MIT
  • 名称冲突： gsap-scrolltrigger 也由 claudedesignskills 编写（其安装版本或目录指针）；同时安装两者会覆盖先安装的版本。

安装后调用

  • 技能名称：gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-plugins、gsap-utils、gsap-react、gsap-performance、gsap-frameworks（从 gsap-core 开始，然后使用 gsap-timeline 和 gsap-scrolltrigger）
  • 触发短语：“GSAP”、“GreenSock”、“ScrollTrigger”、“GSAP timeline”、“useGSAP”

功能说明

GreenSock 官方 GSAP 技能按主题划分：核心补间动画（gsap-core）、Timeline 编排（gsap-timeline）、用于滚动关联和滚动触发动画的 ScrollTrigger（gsap-scrolltrigger）、针对 Flip、Draggable、SplitText 等插件的指南（gsap-plugins）、实用工具技能（gsap-utils）、使用 useGSAP 钩子和清理模式的 React 支持（gsap-react）、用于实现 60fps GPU 加速动画的性能优化（gsap-performance），以及 Vue、Svelte 和 Nuxt 集成（gsap-frameworks）。GSAP 及其所有插件均免费，包括商业用途。适用于 Cursor、Claude Code 和 GitHub Copilot。

不适用场景

  • 不使用 JavaScript 的纯 CSS 动画 → 使用 animate-css-skill
  • React 项目使用 Framer Motion → 使用 framer-motion-skills

评论

支持 Markdown