スキル自身の言葉で
このスキルは、GSAP ScrollTriggerとFramer Motionを使用したプロダクション品質のスクロールアニメーションを実装します。パララックス効果、スクロール連動のリビール、ピン留めセクション、横スクロール、テキストアニメーションを、バニラJavaScript、React、Next.jsのプロジェクト向けに網羅しています。このスキルには、GSAP（バニラJS、Webflow、Vue、ピン留め、複雑なタイムライン向け）とFramer Motion（React/Next.jsの宣言的スタイル向け）のどちらを選ぶかを判断するQuick Library Selectorが含まれています。
すぐに使えるコードレシピ、個別のリファレンスファイルにまとめられた完全なAPIリファレンス、そしてCopilot向けのプロンプトパターンを提供します。このスキルは、いつ・なぜアニメーションを使うべきかを導く創造的な哲学とデザイン原則を提供するpremium-frontend-uiスキルと組み合わせて使用します。
生成されるもの
- すぐに使えるコードレシピを備えた、プロダクション品質のスクロールアニメーション
仕組み
- 01意図を解釈し、ライブラリを選択する
このスキルは、まずユーザーのリクエストとプロジェクトのコンテキストに基づいて、GSAPとFramer Motionのどちらが最適かを判断します。
- 02リファレンスドキュメントを読む
referencesディレクトリ内の該当するリファレンスドキュメントを参照し、詳細なAPIと実装パターンを確認します。
- 03パッケージのインストールを提案する
必要なnpmパッケージがプロジェクトにまだ存在しない場合は、そのインストールを提案します。
- 04アニメーションのスキャフォールドを実装する
アニメーション構造は、Reactコンポーネント、フック、バニラJavaScriptなど、要求された形式でスキャフォールドされます。
- 05アクセシビリティに対応したツールを適用する
適切なスクロール用または表示検知用のツールを適用し、アクセシビリティのオプションが備わっていること、そしてフックが無限再レンダリングを引き起こさないことを確認します。