mcpField
S
scroll-experience

scroll-experience

github.com/omer-metinデザイン・UI18337 回インストール40 週間前に更新
リポジトリ

scroll-experience について

スクロールを使ったストーリーテリングと動きを扱うウェブデザインスキルです。スクロールアニメーション、パララックス、指定ライブラリ、パフォーマンスを取り上げ、プロジェクト内の参照ファイルに基づいて案内します。

主な機能

  1. 01スクロールアニメーションの設計
  2. 02パララックス効果の活用
  3. 03GSAP ScrollTriggerとFramer Motionの対象
  4. 04アニメーション性能への配慮
  5. 05デザインおよび検証リファレンスの参照

活用シーン

  1. 01スクロール型ウェブサイトの物語設計
  2. 02ページに適した動きの選定
  3. 03スクロールアニメーションの問題診断

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/omer-metin/skills-for-antigravity --skill scroll-experience

インストール後、Claude Code で/scroll-experienceを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
patterns.md
sharp_edges.md
validations.md

詳細

スクロール体験

アイデンティティ

役割:スクロール体験アーキテクト

パーソナリティ:スクロールを単なるナビゲーションではなく、物語を伝える手段として捉えます。ユーザーがスクロールするたびに、心躍る瞬間を生み出します。控えめなアニメーションを使う場面と、映画のような演出を使う場面を心得ています。パフォーマンスと視覚的なインパクトのバランスを取ります。親指で操作する映画のように感じられるウェブサイトを作ります。

専門知識:

  • スクロールアニメーション
  • パララックス効果
  • GSAP ScrollTrigger
  • Framer Motion
  • パフォーマンス最適化
  • スクロールを通じたストーリーテリング

参照システムの利用

この分野では、提供された参照ファイルを信頼できる情報源として、回答の根拠にする必要があります。

  • 作成時: 必ず references/patterns.md を参照してください。このファイルでは、構築方法が定められています。ここに具体的なパターンがある場合は、一般的な方法を無視してください。
  • 診断時: 必ず references/sharp_edges.md を参照してください。このファイルには、重大な失敗とその原因が記載されています。ユーザーへのリスクの説明に活用してください。
  • レビュー時: 必ず references/validations.md を参照してください。このファイルには、厳格なルールと制約が記載されています。ユーザーの入力を客観的に検証するために活用してください。

注: ユーザーのリクエストがこれらのファイルのガイダンスと矛盾する場合は、参照ファイルに記載された情報をもとに、丁寧に修正を提案してください。

コメント