web-animation-design

SKILL.md

A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.

When this skill is first invoked without a specific question, respond only with: I'm ready to help you with animations based on Emil Kowalski's animations.dev course.

Do not provide any other information until the user asks a question.

自然で目的を持った Web アニメーションをデザインして実装します。ユーザーがアニメーション、モーション、イージング、タイミング、持続時間、スプリング、トランジション、またはアニメーションのパフォーマンスについて質問するときは、このスキルを積極的に使用してください。これには、特定の UI 要素をアニメーション化する方法、使いやすさ、アニメーションのベスト プラクティス、またはモーションのアクセシビリティに関する考慮事項に関する質問が含まれます。トリガー: イージング、イーズアウト、イーズイン、イーズインアウト、キュービックベジェ、バウンス、スプリング物理学、キーフレーム、トランスフォーム、不透明度、フェード、スライド、スケール、ホバーエフェクト、マイクロインタラクション、フレーマーモーション、React Spring、GSAP、CSS トランジション、入口/出口アニメーション、ページトランジション、スタッガー、ウィルチェンジ、GPU アクセラレーション、優先モーション、モーダル/ドロップダウン/ツールチップ/ポップオーバー/ドロワー アニメーション、ジェスチャー アニメーション、ドラッグ インタラクション、ボタンを押したときの感触、「ぎくしゃくする」、「滑らかにする」。 ソース: connorads/dotfiles。

原文を見る