前言¶
产品页、品牌专题、数据故事类站点，往往要靠滚动把信息拆开：视差分层、段落入场、进度驱动的转场。手写这类效果时，常见问题是动画库选型分散、滚动与布局耦合、移动端性能与可访问性容易被后置。把「滚动驱动体验」写成可复用的 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
