技能 scroll-experience
📦
scroll-experience
內容修訂 r1 安全 ⚙️ 外部命令
建構由捲動驅動的網頁體驗
靜態頁面可能難以說明複雜故事或產品旅程。此技能可協助 Claude、Codex 和 Claude Code 設計捲動動畫、視差區段、固定面板，以及具可及性的敘事流程。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "scroll-experience" from https://skillstore.io/skills/sickn33-scroll-experience.md and its manifest at https://skillstore.io/api/skills/sickn33-scroll-experience/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「scroll-experience」。 為新的分析儀表板發布設計一段捲動敘事。
預期結果:
- 頁面以固定的儀表板預覽和簡短價值陳述開場。
- 當使用者捲動時，指標卡片會依序顯示，同時背景緩慢移動。
- 最後一個區段解除固定，並呈現直接的試用行動呼籲。
正在使用「scroll-experience」。 協助為 React 行銷頁面選擇捲動動畫技術組合。
預期結果:
- 使用 Framer Motion，以取得輕量的 React 整合和簡單的捲動轉換效果。
- 只有在需要複雜時間軸或固定式敘事區段時，才使用 GSAP ScrollTrigger。
- 若瀏覽器支援度可接受，簡單揭示效果可使用原生 CSS view timelines。
正在使用「scroll-experience」。 審查一個感覺緩慢的行動版捲動體驗。
預期結果:
- 在小螢幕上降低視差深度，並確保內容即使沒有動畫也能閱讀。
- 避免捲動劫持，並保留自然的觸控移動。
- 在新增效果之前，先檢查大型圖片、固定區段和動畫數量。
安全審計
安全v4 • 2026/7/7 開啟版本化報告
The 23 static external-command alerts are false positives caused by Markdown fences and inline backtick formatting in SKILL.md. The skill contains documentation and frontend animation examples, but no shell execution, process spawning, prompt injection, data exfiltration, or malicious intent was found.
1
已掃描檔案
264
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (23)
SKILL.md:35-48 SKILL.md:48-65 SKILL.md:65-68 SKILL.md:68-81 SKILL.md:81-84 SKILL.md:84-95 SKILL.md:95-96 SKILL.md:96-104 SKILL.md:104-117 SKILL.md:117-132 SKILL.md:132-135 SKILL.md:135-145 SKILL.md:145-152 SKILL.md:152-160 SKILL.md:160-164 SKILL.md:164-174 SKILL.md:174-177 SKILL.md:177-189 SKILL.md:189-192 SKILL.md:192-205 SKILL.md:205-212 SKILL.md:212-263 SKILL.md:263
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/sickn33-scroll-experience/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-scroll-experience?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-scroll-experience?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-scroll-experience/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-scroll-experience.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
sickn33. (2026). scroll-experience security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-scroll-experience/audits/4BibTeX 引用
@techreport{sickn33-sickn33-scroll-experience-2026,
author = {sickn33},
title = {scroll-experience security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/sickn33-scroll-experience/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "scroll-experience security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-scroll-experience/audits/4"
identifiers:
- type: other
value: "skillstore:sickn33-scroll-experience:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
68
社群
83
規範符合度
你可以打造什麼
規劃產品功能旅程
將產品優勢轉化為捲動序列，包含吸引開場、情境鋪陳、功能揭示，以及最後的行動呼籲。
選擇動畫方法
根據專案限制比較 GSAP、Framer Motion、Lenis、Locomotive Scroll 和原生 CSS。
建構編輯式敘事
為長篇互動頁面規劃故事節點、固定文字、視覺圖層，以及揭示時機。
試試這些提示
規劃簡單的揭示序列
使用此技能，為著陸頁區段設計簡單的捲動觸發揭示序列。包含視覺順序、動態強度，以及可及性注意事項。
設計視差故事節點
使用此技能，規劃包含五個捲動節點的視差敘事頁面。包含圖層角色、捲動深度變化、文字揭示時刻，以及行動版簡化方式。
實作固定式產品導覽
使用此技能，定義固定式產品導覽，包含釘選面板、水平移動、進度回饋，以及降低動態效果使用者的備援行為。
稽核電影感捲動系統
使用此技能，稽核現有捲動驅動頁面的卡頓、捲動劫持、不可及內容、行動版斷點，以及關鍵內容可見性。
最佳實務
- 保留原生捲動行為，並將動畫進度連結到正常捲動移動。
- 在加入複雜固定區段之前，先設計行動版和降低動態效果的備援方案。
- 只為關鍵故事時刻加入動畫，讓內容保持清楚且效能穩定。
避免
- 以強制 snap 或自訂捲動控制取代正常捲動。
- 在沒有明確故事目的的情況下，為每個區段加入動態效果。
- 建立會在行動裝置或降低動態效果設定下隱藏重要內容的效果。
常見問題
此技能能協助建構什麼？
它協助設計包含視差、固定區段、揭示效果和敘事節奏的捲動驅動頁面。
它會產生可用於正式環境的程式碼嗎？
它提供模式和範例，但團隊必須自行調整並測試實作程式碼。
它會討論哪些動畫函式庫？
它會討論 GSAP ScrollTrigger、Framer Motion、Locomotive Scroll、Lenis 和原生 CSS scroll timelines。
它對行動體驗有用嗎？
是。它強調行動優先設計、較簡單的效果、真實裝置測試，以及優雅降級。
它涵蓋可及性嗎？
有。它會提醒避免捲動劫持、隱藏內容，以及降低可用性的動態模式。
誰應該使用此技能？
設計師、前端開發人員和內容團隊都可以使用它來規劃沉浸式捲動體驗。