@chonwai/dsh-gsap-skills:在 DSH 中按需加载八份官方 GSAP Skills

前言

在 DeepSeek Harness(DSH)里做前端动画相关开发时,助手需要的是与 GSAP 版本、API 和最佳实践对齐的上下文,而不是泛泛的「用 tween 动起来」这类回答。把 GreenSock 上游的 gsap-skills 逐条放进 ~/.agents/skills 可以工作,但升级、纠偏和与会话内 skill 工具的统一加载仍要你自己维护。@chonwai/dsh-gsap-skills 把这八份官方技能文档打成 DSH bundle,并在 vendor 阶段对四处已与 GSAP 3.15.1 等事实不符的说明做了有出处的修正;安装后可在会话里用 /gsap-core 等形式按需加载,而不会在运行时替你装 npm 包或执行动画代码。

这是什么

@chonwai/dsh-gsap-skills 由社区维护者 Chonwai 发布,在 SkillHub 上归类为「工作流」。它将上游八个 SKILL.md 注册为 DSH 运行时 skill,每个 skill 带有指向自身目录的 resourceBase;没有 client 半部、没有 settings/Config schema、没有 prompt 段、没有遥测,模块仅读取自身文件,也不要求网络、子进程或写盘权限。

需要事先说明:这是独立于 GreenSock / GSAP 项目的社区集成,未经其背书或赞助;技能文档为 MIT 许可,GSAP 本体不包含在 bundle 内,需在用户项目中按 GreenSock 条款自行安装 gsap 及相关插件。

核心功能

八个可按需加载的 skill

Skill 典型用途
gsap-core gsap.to/from/fromTo、缓动、时长、stagger、matchMedia 等
gsap-timeline 序列、position 参数、嵌套与回放
gsap-scrolltrigger 滚动联动、pin、scrub、触发器
gsap-plugins 注册与 Flip、Draggable、ScrollSmoother、SplitText、SVG 等
gsap-utils clamp、mapRange、normalize、interpolate、snap、wrap、pipe 等
gsap-react useGSAP、refs、gsap.context()、清理
gsap-frameworks Vue、Nuxt、Svelte、SvelteKit 生命周期与清理
gsap-performance transform、布局抖动、will-change、批处理

此外附带上游索引 skills/llms.txt。

四处已文档化并写入 vendor 的纠偏

由 tools/apply-corrections.mjs 在上游文本上应用;每一处替换在 docs/KNOWN-UPSTREAM-ISSUES.md 中引用了 issue 或证据:

  1. gsap-core transform 顺序:文档中的别名顺序与 GSAP 3.15.1 CSSPlugin 实际合成顺序不一致,已按 translation → rotation → rotationY → rotationX → skew → scale 纠正。
  2. gsap-timeline position 参数:去掉错误的 “(default)” 标记;省略参数表示追加到时间轴末尾,">" 表示接在 recently added 动画之后。
  3. gsap-scrolltrigger refreshPriority:方向原先写反;数值越大越先 refresh,页面靠前区块应使用更大数值。
  4. gsap-frameworks 重复的 type Plugins:第二处改为 type PluginName = keyof PluginMap,并同步 PluginModule、PluginExport、lazyLoadPlugin。

另有仅记录、未打补丁的项(如 GSAP 3.15 的 easeReverse、Nuxt 示例清理时机等),见 known-issues 文件。vendor 脚本在 upstream 已修复预期字符串时会 fail-loud,避免纠偏静默失效。

离线侧还有 tests/offline-check.sh 与 registry/host smoke 等检查,便于在发版前核对 bundle 与注册表。

环境与依赖

  • DeepSeek Harness 0.2.2-rc.1 起(engines.dsh: >=0.2.2-rc.1 <0.3.0)。
  • Node.js >= 22(随 Harness 要求)。
  • 受管理的 DSH profile(桌面应用的 desktop profile 或 CLI 管理的 profile)。
  • 项目内自行安装 GSAP;skills 只提供用法说明。

安装与启用

README Quick start 推荐从插件页安装第三方插件,地址带发布锚点;安装后接受 Enable now,重启 DSH,再开会话并加载 /gsap-core。其他分发路径见仓库 docs/DISTRIBUTION.md;INSTALL.md 还列出本机路径、plugin_manager 与手工拷贝等方式。

插件页(推荐,与 Quick start 一致):

在 DSH 中选择 Plugins → Add plugin → Install a third-party plugin,粘贴:

https://github.com/Chonwai/dsh-gsap-skills#v1.0.2

接受启用后 重启 DSH。Profile bundle 行在 host 启动时组装;仅新开 session 或刷新页面不会重新挂载,因此安装或开关插件后务必重启。

本机绝对路径(INSTALL.md 路线 1 的表述): 若从本地 checkout 安装,在同一入口粘贴该目录的绝对路径(而非凭插件名拼接命令行)。

plugin_manager(INSTALL.md 路线 2):

plugin_manager(action: "install_bundle", target: "/abs/path/to/dsh-gsap-skills")

将 target 换成你机器上仓库的绝对路径。

从文件级 skill 迁移(bundle 生效的前提)

该 bundle 注册在 host/global skill 层。标准 preset 在 agent scope 内挂载 skill-filesystem,且 host 级 filesystem 行被禁用;更近层级的同名 skill 会无条件胜出,bundle 无法覆盖 ~/.agents/skills、$DSH_HOME/skills 或项目 .agents/skills 下的同名字目录。

安装前可预检:

for d in ~/.agents/skills "${DSH_HOME:-$HOME/.dsh}/skills"; do
  for s in gsap-core gsap-timeline gsap-scrolltrigger gsap-plugins gsap-utils gsap-react gsap-frameworks gsap-performance; do
    test -d "$d/$s" && echo "WARNING: file-level copy will shadow the bundle: $d/$s"
  done
done

若存在拷贝,需自行移出 skills 根目录(README 提供了备份目录下的 mv 示例);项目内 .agents/skills/gsap-* 同理。仅有 profile 安装、而文件级副本仍在时,catalog 里显示的未必是 bundle 行。

典型用法

在会话中用 skill 工具或 / 手势加载,例如:

  • /gsap-core — 如何用 GSAP 动画化某个元素
  • /gsap-timeline — 排序步骤,以及 "<" 等 position 含义
  • /gsap-scrolltrigger — pin 区块并 scrub
  • /gsap-plugins — 注册 SplitText、懒加载 Draggable 等
  • /gsap-react — React 中清理动画
  • /gsap-frameworks — Vue/Nuxt/Svelte 生命周期与清理
  • /gsap-performance — 列表动画卡顿排查
  • /gsap-utils — 用 gsap.utils 做 clamp、snap

自然语言也可,例如要求「用 GSAP timeline skill 看这段序列」。skill 正文来自(经纠偏的)上游文档,不安装依赖、不执行项目里的动画代码。

适用场景与注意

适合:已在 DSH 0.2.2-rc.1 线、用 React/Vue/Svelte 等栈且依赖 GSAP 的开发者,希望助手在 ScrollTrigger、timeline position、插件注册等话题上与当前 GSAP 行为一致。

注意:

  • 插件以当前 DSH 进程权限运行;安装前宜浏览仓库源码、LICENSE 与 NOTICE,确认与团队合规要求一致。
  • 星标与用户规模不是功能指标;当前 GitHub 星标为 0,不代表文档质量,仅反映曝光度。
  • 勿指望 bundle 替代 GreenSock 授权或 npm 安装;商业插件条款仍以 GreenSock 为准。
  • SkillHub 目录页(https://www.skillhub.cn/plugins/Chonwai/dsh-gsap-skills)为社区索引站点,与 DeepSeek / 幻方无官方从属关系,不等同官方应用商店。

结尾

若你已经在用 DSH 做前端智能体工作流,又不想手动同步八份 GSAP skill 与上游勘误,@chonwai/dsh-gsap-skills 把「注册 + 纠偏 + 离线校验」收进一个 MIT 许可的 bundle;装好、避开文件级同名 shadow、重启 host 后,用 /gsap-* 即可把动画相关问题锚定在官方技能文档上。

  • 目录页:https://www.skillhub.cn/plugins/Chonwai/dsh-gsap-skills
  • 仓库:https://github.com/Chonwai/dsh-gsap-skills
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye