スキル scroll-experience
📦
scroll-experience
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド
スクロール駆動のWeb体験を構築する
静的ページでは、複雑なストーリーやプロダクトジャーニーを説明しきれないことがあります。このスキルは、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.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「scroll-experience」を使用しています。 新しい分析ダッシュボードのローンチ向けにスクロールナラティブを設計してください。
期待される結果:
- ページは、ピン留めされたダッシュボードプレビューと短い価値提案から始まります。
- ユーザーがスクロールすると、背景がゆっくり動きながらメトリクスカードが順番に表示されます。
- 最後のセクションでピン留めを解除し、直接的なトライアルへの行動喚起を提示します。
「scroll-experience」を使用しています。 Reactのマーケティングページ向けにスクロールアニメーションスタックを選ぶのを手伝ってください。
期待される結果:
- 軽量なReact統合とシンプルなスクロール変換にはFramer Motionを使用します。
- 複雑なタイムラインやピン留めされたストーリーテリングセクションにのみ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
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: 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を比較します。
エディトリアルナラティブを構成する
長文のインタラクティブページに向けて、ストーリービート、スティッキーテキスト、ビジュアルレイヤー、表示タイミングを設計します。
これらのプロンプトを試す
シンプルな表示シーケンスを計画する
このスキルを使って、ランディングページセクション向けのシンプルなスクロールトリガー表示シーケンスを設計してください。ビジュアルの順序、モーションの強さ、アクセシビリティ上の注意を含めてください。
パララックスのストーリービートを設計する
このスキルを使って、5つのスクロールビートを持つパララックスストーリーテリングページを計画してください。レイヤーの役割、スクロール深度の変化、テキスト表示のタイミング、モバイル向けの簡略化を含めてください。
スティッキーなプロダクトウォークスルーを実装する
このスキルを使って、ピン留めパネル、水平移動、進行状況フィードバック、モーション軽減ユーザー向けのフォールバック動作を含むスティッキーなプロダクトウォークスルーを定義してください。
シネマティックなスクロールシステムを監査する
このスキルを使って、既存のスクロール駆動ページを、ジャンク、スクロールハイジャック、アクセシブルでないコンテンツ、モバイルブレークポイント、重要コンテンツの可視性の観点から監査してください。
ベストプラクティス
- ネイティブのスクロール動作を維持し、アニメーションの進行を通常のスクロール操作に連動させます。
- 複雑なピン留めセクションを追加する前に、モバイルとモーション軽減向けのフォールバックを設計します。
- 重要なストーリーの瞬間だけをアニメーション化し、コンテンツの明確さと安定したパフォーマンスを保ちます。
回避
- 通常のスクロールを強制スナップやカスタムスクロール制御で置き換えること。
- 明確なストーリー上の目的なしに、すべてのセクションへモーションを追加すること。
- モバイルやモーション軽減設定で重要なコンテンツを隠してしまう効果を構築すること。
よくある質問
このスキルは何を構築するのに役立ちますか？
パララックス、スティッキーセクション、表示効果、ナラティブのペース配分を備えたスクロール駆動ページの設計を支援します。
本番環境で使えるコードを生成しますか？
パターンと例を提供しますが、チームは実装コードを調整し、テストする必要があります。
どのアニメーションライブラリについて説明していますか？
GSAP ScrollTrigger、Framer Motion、Locomotive Scroll、Lenis、ネイティブCSS scroll timelinesについて説明します。
モバイル体験に役立ちますか？
はい。モバイルファースト設計、よりシンプルな効果、実機テスト、段階的な機能低下を重視します。
アクセシビリティも扱っていますか？
はい。スクロールハイジャック、隠れたコンテンツ、使いやすさを低下させるモーションパターンについて警告します。
誰がこのスキルを使うべきですか？
デザイナー、フロントエンド開発者、コンテンツチームが、没入感のあるスクロール体験を計画するために使用できます。