ウェブアニメーション：選択と構築
このスキルは、30のレシピからウェブサイト用のアニメーションを選択し、構築するのに役立ちます。ファイルは以下の通りです：
- placements.md：サイト上の8つの配置場所と、各場所に適したアニメーション。
- recipes.md：30のアニメーションそれぞれの構築詳細。
ステップ1：適用場所を尋ねる
スキルが読み込まれたら、まずこの質問をユーザーの言語で、番号付きリストとともに行ってください。答えが出る前にコードを書き始めないでください。
「ウェブサイトのどこにアニメーションを適用しますか？」
- ランディングページのヒーロー（Hero）セクション
- スクロールトランジションまたは画面間の遷移
- カードと機能グリッド
- フォーム、入力フィールド、ワンタイムコード
- ボタン、トグル、プログレスインジケーター
- ナビゲーションとメニュー
- 製品またはアプリのショーケース（モックアップ電話、カルーセル）
- ページ全体にわたってカーソルに追従するキャラクターまたはエフェクト
ユーザーがリクエストですでに配置場所を指定している場合は、ステップ2に進み、どの配置場所が認識されたかを示してください。
ステップ2：アニメーションの種類を尋ねる
placements.mdを読み込み、選択された配置場所に対するオプションのみを番号付きリストで表示します。各オプションには、名前、ユーザーの言語で何が見えるかを説明する一文、複雑さのレベルを含めてください。ユーザーに番号を選んでもらうか、2つの組み合わせを説明してもらうようにお願いします。
ユーザーが確信がない場合は、一つを推奨し、既知の情報（ビジネスの種類、オーディエンス、維持管理の複雑さの許容度）に基づいて一文で理由を説明してください。
ステップ3：構築前の3つの簡単な質問
1つのメッセージで以下の質問をしてください：
- 何をベースに構築しますか：シンプルなHTML/CSS/JS、React、Next.js、Webflow、WordPress、またはその他？
- コンテンツは何ですか：タイトル、テキスト、画像、ブランドカラー、ロゴ。なければ、ダミーコンテンツを使用し、それを明示してください。
- サイトはすべてのブラウザとモバイルで動作する必要がありますか？「実験的」とマークされたアニメーションは、Chromeでのみ利用可能なAPIに依存しています。
ステップ4：構築
- recipes.mdで選択したレシピを開き、完全な仕様を読んでください。
- 仕様とユーザーのコンテンツに従って、ゼロから実装を構築してください。
- 最もシンプルなツールを選択してエフェクトを実現してください：CSS優先、次にCanvas、最後にWebGL。Three.jsやR3Fは、真の奥行き、照明、シェーダーが必要な場合のみ使用してください。
- レシピから「調整用のコントロール」を、ファイルの先頭の変数として、または小さなパネル（例：lil-guiやLeva）として公開し、コードに触れずに調整できるようにしてください。
- Chromeのみとマークされたレシピの場合：フォールバックを構築してください。例えば、HTMLをテクスチャとしてキャプチャするか、シンプルなCSSバージョンを作成します。ランタイムでサポートを確認し、ユーザーエージェントに基づいて判断しないでください。
ステップ5：引き渡し前のチェック
以下のリストを確認し、何がチェックされ、何がチェックされなかったかをユーザーに報告してください：
- prefers-reduced-motion：この設定では、アニメーションを停止するか、静的なバージョンに置き換えてください。
- パフォーマンス：標準的なコンピューターで60fpsを目指してください。要素が見えないときはループを停止し（IntersectionObserver）、タブが非表示のときも停止してください。devicePixelRatioは2に制限してください。
- モバイル：ホバーの代わりにタッチを使用し、低速なデバイスでは軽量または静的なバージョンを提供してください。
- アクセシビリティ：テキストは実際のHTMLのままで、スクリーンリーダーや検索エンジンにアクセス可能にしてください。コンテンツを隠すエフェクトは読み取りを妨げないようにしてください。
- ブラウザでコードを実行していない場合は、明示的にその旨を記載してください。