ui-animation

SKILL.md

Tasteful UI animation with proper timing, accessibility, and performance.

Default: Start with Easing Decision Tree → Duration Guidelines → Implement → Add a11y → Verify

| Micro-interaction | Button press, toggle, checkbox | CSS/Tailwind | | Enter/Exit | Modal, toast, dropdown | Motion + AnimatePresence | | Layout change | Accordion, reorder, expand | Motion layout prop | | Shared element | Tab indicator, card expand | Motion layoutId | | Gesture | Drag, swipe, pull-to-refresh | Motion springs |

イージング、スプリング、レイアウト アニメーション、ジェスチャー、アクセシビリティを使用して、上品な UI アニメーションをガイドします。 Tailwind パターンと Motion パターンをカバーします。次の場合に使用します: (1) 開始/終了アニメーションの実装、(2) イージング カーブの選択、(3) スプリングの構成、(4) レイアウト アニメーションと共有要素、(5) ドラッグ/スワイプ ジェスチャ、(6) マイクロインタラクション、(7) 優先モーション アクセシビリティの確保。トリガー: アニメート、アニメーション、イージング、スプリング、トランジション、モーション、レイアウト、ジェスチャー、ドラッグ、スワイプ、削減モーション、フレーマー モーション。 ソース: lukasstrickler/ai-dev-atelier。

原文を見る