ローカライズされた読書ガイド
web-animation-design目的、用途、および情報源
自然で目的のあるウェブアニメーションを設計および実装します。ユーザーがアニメーション、モーション、イージング、タイミング、期間、スプリング、トランジション、またはアニメーションのパフォーマンスについて質問したときには、このスキルを積極的に使用します。これには、特定の UI 要素をアニメーション化する方法、使用するイージング、アニメーションのベストプラクティス、またはモーションのアクセシビリティに関する考慮事項についての質問が含まれます。トリガー: イージング、イーズアウト、イーズイン、イーズインアウト、キュービックベジェ、バウンス、スプリング物理、キーフレーム、トランスフォーム、不透明度、フェード、スライド、スケール、ホバー効果、マイクロインタラクション、Framer Motion、React Spring、GSAP、CSS トランジション、entrance/exitアニメーション、ページ遷移、スタッガー、will-change、GPU アクセラレーション、prefers-reduced-motion、modal/dropdown/tooltip/popover/drawerアニメーション、ジェスチャーアニメーション、ドラッグ操作、ボタン押下時の感触、ぎこちない感じがするので、滑らかにしてください。
ソースを取得しました:
- 出典リポジトリ
- vercel-labs/open-agents
- SKILL.md
.agents/skills/web-animation-design/SKILL.md- リポジトリの Star
- 5,871
- リポジトリの最終更新
- 2026-08-29
- 能力分類
- エージェントのワークフロー
- 最終収集時刻
ライセンス: MIT
ワークフローの抜粋は、Codezによる実行可能な指示ではなく、あくまでも参考資料です。このページを作成するために、サードパーティ製のスキルは実行されていません。
以下の目的とワークフローに関する記述は、上流工程に関する資料であり、読みやすいように整理・翻訳されています。これらは、別途ラベル付けされたCodez編集分析とは区別されます。
このスキルが何をするか
自然で目的のあるウェブアニメーションを設計および実装します。ユーザーがアニメーション、モーション、イージング、タイミング、期間、スプリング、トランジション、またはアニメーションのパフォーマンスについて質問したときには、このスキルを積極的に使用します。これには、特定の UI 要素をアニメーション化する方法、使用するイージング、アニメーションのベストプラクティス、またはモーションのアクセシビリティに関する考慮事項についての質問が含まれます。トリガー: イージング、イーズアウト、イーズイン、イーズインアウト、キュービックベジェ、バウンス、スプリング物理、キーフレーム、トランスフォーム、不透明度、フェード、スライド、スケール、ホバー効果、マイクロインタラクション、Framer Motion、React Spring、GSAP、CSS トランジション、entrance/exitアニメーション、ページ遷移、スタッガー、will-change、GPU アクセラレーション、prefers-reduced-motion、modal/dropdown/tooltip/popover/drawerアニメーション、ジェスチャーアニメーション、ドラッグ操作、ボタン押下時の感触、ぎこちない感じがするので、滑らかにしてください。
上流ワークフローの仕組み
クイックスタート
すべてのアニメーションの決定は、次の質問から始まります。この要素は入ってくるのか、それとも出ていくのか？ → 使用ease-out画面上の要素が動いていますか？ → 使用ease-in-outこれはhover/color移行？→使用ease
アニメーション化のタイミング
Enter/exit空間的一貫性を保つための遷移、視覚的な連続性から恩恵を受ける状態変化、ユーザー操作への応答（フィードバック）、喜びが価値を高める稀なインタラクション
上流への航路 · L144 ↗バネを使うべき時
勢いのあるドラッグ操作 生きているように感じられる要素（ダイナミックアイランド） アニメーションの途中で中断できるジェスチャー 有機的で遊び心のあるインターフェース
上流への航路 · L169 ↗Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms要件とセットアップ
このファイルから要件定義の短い記述が選択されませんでした。これは、スキルに依存関係がないという意味ではありません。リポジトリの設定手順と参照ファイルを確認してください。
制限事項と品質チェック
まずは安全なトライアルから始めましょう
- サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
- エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
- 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
- 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。
詳細は出典元をご覧ください。
関連スキル
翻訳と範囲
この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。
この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。
- ピン留めされたソース
- 原文を読む ↗
- ソースを取得しました
- ソースコミット
cf865e94de7729751c747171785b6ce57e7b178c- ソースSHA-256
dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332