前言¶
產品頁、品牌專題、數據故事類站點，往往要靠滾動把信息拆開：視差分層、段落入場、進度驅動的轉場。手寫這類效果時，常見問題是動畫庫選型分散、滾動與佈局耦合、移動端性能與可訪問性容易被後置。把「滾動驅動體驗」寫成可複用的 Agent 指引，可以讓對話裏的實現更貼近同一套目標，而不是每次從零搜教程拼片段。
下面介紹 SkillHub 上的 scroll-experience（座標 @org-02qudk26/scroll-experience，版本 1.0.0），以及安裝方式與使用邊界。
這是什麼¶
scroll-experience 是面向「沉浸式滾動驅動體驗」的 Agent Skill：側重視差敘事、滾動動畫、交互式故事與電影感網頁體驗。官方簡介將其對標紐約時報交互專題、Apple 產品頁與獲獎類網頁作品，目標是讓站點更像可瀏覽的體驗，而不只是靜態信息堆疊。
- 發佈者：智雨科技
- 來源：enterprise（SkillHub）
- 分類：dev-programming
- 標籤：
requires_api_key=false（無需額外 API Key） - SkillHub 頁面：scroll-experience
- API 座標頁：api.skillhub.cn/org-02qudk26/scroll-experience
Skill 本體遵循通用 SKILL.md 格式，由支持 Skills 的客戶端在相關任務時加載，具體實現步驟以安裝包內文檔爲準。
核心功能¶
以下能力均來自 SkillHub 公開簡介，未在資料中出現的細節不展開：
- 視差敘事：用滾動進度組織多層畫面與文案，形成分段敘事節奏。
- 滾動動畫：以滾動爲時間軸驅動元素入場、位移與狀態變化。
- 交互式故事：把長內容拆成可跟隨滾動的故事單元，而非單屏堆疊。
- 電影感網頁體驗：整體氣質偏向高完成度營銷頁、專題頁一類的前端呈現。
該 Skill 不聲明依賴外部 API Key，適合在本地或常規前端工程裏由 Agent 協助設計與落地代碼。
安裝與啓用¶
方式一：讓 Agent 按官方安裝文檔執行¶
SkillHub 頁面給出的提示詞爲：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@org-02qudk26/scroll-experience`。
將上述內容發給已支持 Skill 安裝的 Agent（如 Cursor、Claude Code 等），由 Agent 讀取 SkillHub 安裝與優先源配置 並完成安裝。
方式二：本機使用 skillhub CLI¶
先確認 CLI 是否已安裝：
command -v skillhub && skillhub --version
未安裝時，可按官方文檔執行完整安裝（示例來自 skillhub.md）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安裝 Skill 時必須用 --dir 指向當前 Agent 的 skills 目錄，否則默認落在 ./skills/ 可能不會被客戶端識別。常用路徑（摘自官方安裝文檔）：
| 客戶端 | Skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下 .agents/skills/ |
安裝命令示例（將 <skills 目錄> 換成上表對應路徑）：
skillhub install @org-02qudk26/scroll-experience --dir <skills 目錄>
也可先搜索再安裝：
skillhub search scroll-experience
skillhub install @org-02qudk26/scroll-experience --dir <skills 目錄>
安裝後按所用客戶端說明重啓或刷新 Skills 列表，使 scroll-experience 生效。
典型用法¶
公開資料未提供獨立代碼倉庫或完整 SKILL.md 正文，可復現的流程如下。
- 完成安裝：使用上一節的提示詞或
skillhub install，確保 Skill 出現在當前 Agent 的 skills 目錄。 - 在對話中明確體驗目標：例如「單頁產品發佈敘事」「分段視差 + 滾動觸發動畫」「移動端需控制重繪」等，並說明技術棧（React、Vue、原生等）若已有約束。
- 由 Agent 按 Skill 指引產出：結構劃分（章節 / pin / scrub）、動畫與滾動庫建議、性能與降級策略等，應以安裝後的 SKILL.md 爲準迭代實現。
官方頁面僅給出安裝引導，未附帶固定示例項目路徑；具體命令與文件組織以安裝包內容爲準。
適用場景與注意¶
適合誰
- 前端或全棧開發者，需要 Agent 協助設計、實現滾動驅動專題頁、落地頁。
- 團隊希望統一「滾動敘事」類需求的對話上下文，減少每次重複解釋參考站風格。
使用注意
- 資料邊界：本文未讀取 Skill 包內 SKILL.md；實現細節、推薦庫列表、檢查清單以安裝後本地文件爲準。
- 性能與可訪問性：視差與大量滾動監聽對低端機與「減少動態效果」偏好用戶敏感，需在真實設備上驗證，不能僅靠 Agent 一次生成即上線。
- 平臺數據：SkillHub 顯示評分 100000、下載 1005、安裝計數 0（統計以頁面爲準，會隨時間變化）。
- 來源：enterprise 來源 Skill，使用前可在 SkillHub 頁面確認版本 v1.0.0 與發佈者信息。
結尾¶
scroll-experience 把「滾動驅動的沉浸式網頁」收斂成 Agent 可加載的專業 Skill，適合在 Cursor、Claude Code 等環境中配合 skillhub 安裝使用。無需 API Key，主要價值在於對話側的一致目標與實現路徑。
官方入口：https://www.skillhub.cn/skills/org-02qudk26/scroll-experience
