mcpField
A
adding-animations

adding-animations

github.com/fusengineデザイン・UI3450 回インストール2 週間前に更新
リポジトリ

adding-animations について

adding-animationsは、生成済みのHTML/CSSコンポーネントに動きや操作状態を加えるデザインスキルです。デザインシステムのモーション設定に沿ったFramer Motionの実装と、動きを抑えるアクセシビリティ対応を案内します。

主な機能

  1. 01スクロール連動の登場アニメーション
  2. 02ホバー・フォーカス・無効・読み込み状態
  3. 03ページ遷移とマイクロインタラクション
  4. 04レイヤー状のビジュアル効果
  5. 05動きを抑えるアクセシビリティ指針

活用シーン

  1. 01生成ページのセクションやカードをアニメーション化
  2. 02操作要素に一貫したフィードバックを追加
  3. 03デザイン監査前にルート遷移を実装

MCP 対応

既存コンポーネントにFramer Motionのコードを追加するため、`mcp__gemini-design__modify_frontend`を使う手順が示されています。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/fusengine/agents --skill adding-animations

インストール後、Claude Code で/adding-animationsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
entrance-patterns.md
glassmorphism-advanced-ref.md
interactive-states-ref.md
layered-backgrounds-ref.md
micro-interactions.md
motion-patterns.md
motion-principles.md
page-transitions.md
patterns-buttons.md
patterns-cards.md
patterns-microinteractions.md
patterns-navigation.md
reduced-motion.md

詳細

フェーズ 4：アニメーションの追加 — モーション、状態、視覚効果

実施タイミング

フェーズ 3 のコンポーネント生成後、デザイン監査の前に実施します。

入力（フェーズ 3 から）
  • バリアントとレイアウトを含む、生成済みの HTML/CSS コンポーネント。
  • design-system.md のモーションの個性（corporate / modern / playful / luxury）。
手順
  1. モーションの個性を確認します。design-system.md を読み、タイミング、イージング、強度を決定します。
  2. エントランスアニメーション — すべてのセクションで、スクロール時にアニメーションを実行する必要があります（IntersectionObserver）。子要素は 80-120ms ずつ遅らせます。fadeUp（translateY 30px→0）と fadeIn（opacity 0→1）を使用します。カードはグリッドの順序に沿って順番に表示します。
  3. ホバー時の奥行き — ボタン：translateY(-3px) + shadow-lg + brightness(1.05)。カード：translateY(-8px) + shadow-xl + scale(1.01)。リンク：150ms の色のトランジション。
  4. フォーカス／無効状態 — :focus-visible には 2px のアウトラインと 4px のオフセットを設定します。:disabled には opacity 0.4 と cursor not-allowed を設定します。すべてのインタラクティブ要素で必須です。
  5. 視覚レイヤー — ナビゲーションにはグラスモーフィズムを適用します（backdrop-blur 12px + bg oklch/0.85）。ヒーローにはグラデーションオーバーレイを適用します（oklch dark/0.6→transparent）。セクション区切りには clip-path polygon または SVG wave を使います。背景にはグラデーションオーブを配置します（blur を適用した radial-gradient oklch）。
  6. マイクロインタラクション — ボタンの押下時に scale(0.97)、トグルのスライドに 200ms、フォーム入力のフォーカス時に border-color のトランジション、ローディングスケルトンにパルスアニメーションを設定します。
  7. references/page-transitions.md を参考に、ページ遷移を追加します。ルートレベルのアニメーションを使用します。
  8. 実装 — mcp__gemini-design__modify_frontend を使って、既存のコンポーネントに Framer Motion のコードを挿入します。
  9. アクセシビリティを検証 — prefers-reduced-motion のサポートが必須です。タイミングの上限：ホバー <100ms、モーダル <300ms、ページ <400ms（references/motion-principles.md を参照）。
出力
  • すべてのコンポーネントに、モーションの個性に合わせた Framer Motion アニメーションが適用されています。
  • すべてのインタラクティブ要素に、インタラクティブ状態（ホバー、フォーカス、アクティブ、無効、ローディング）が設定されています。
  • 許可されている箇所に視覚効果が適用されています。動きを抑える場合のフォールバックも含まれています。
次 → フェーズ 5：デザイン監査

5-design-audit/SKILL.md — 視覚的一貫性、アクセシビリティ、AI っぽさのないデザインを監査します。

参考資料
ファイル用途
references/motion-patterns.mdFramer Motion の基本パターン
references/motion-principles.mdタイミングの上限と原則
references/entrance-patterns.mdエントランスアニメーションのパターン
references/interactive-states-ref.md状態の定義（ホバー、フォーカスなど）
references/micro-interactions.mdマイクロインタラクションのパターン
references/glassmorphism-advanced-ref.mdグラスモーフィズムのテクニック
references/layered-backgrounds-ref.mdレイヤー化された背景効果
references/page-transitions.mdルートレベルのページ遷移
references/patterns-cards.mdカードアニメーションのパターン
references/patterns-buttons.mdボタンアニメーションのパターン
references/patterns-navigation.mdナビゲーションアニメーション
references/patterns-microinteractions.md細部のマイクロインタラクション
references/reduced-motion.mdprefers-reduced-motion のアクセシビリティパターン

コメント

Markdown 対応