@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
羽毛球分组比赛记分
小程序二维码

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

小夜