motion

Motion (旧 Framer Motion) のリファレンススキル。React 向け (motion/react) と vanilla JS (motion) の両 API、アニメーション概念、ガイドを収録する。

ディレクトリ構成

skills/motion/
  SKILL.md
  references/
    react-components/
      README.md
      motion.md
      animate-presence.md
      animate-view.md
      layout-group.md
      lazy-motion.md
      motion-config.md
      reorder.md
    react-hooks/
      README.md
      use-animate.md
      use-scroll.md
      use-spring.md
      use-transform.md
      use-motion-value.md
      use-in-view.md
      use-drag-controls.md
      use-reduced-motion.md
      use-motion-template.md
      use-velocity.md
      use-motion-value-event.md
      use-animation-frame.md
      use-time.md
      use-page-in-view.md
    animation/
      README.md
      overview.md
      transitions.md
      layout.md
      scroll.md
      gestures.md
      drag.md
      svg.md
    vanilla-js/
      README.md
      animate.md
      scroll.md
      in-view.md
      hover.md
      press.md
      stagger.md
      spring.md
      timeline.md
      motion-value.md
    vue/
      README.md
      overview.md
      motion.md
      directive.md
      animate-presence.md
      animate-number.md
      carousel.md
      cursor.md
      radix.md
      layout-animations.md
      layout-group.md
      lazy-motion.md
      motion-config.md
      motion-value.md
      reorder.md
      scroll-animations.md
      ticker.md
      transitions.md
      typewriter.md
      gestures.md
      use-animate.md
      use-animation-frame.md
      use-drag-controls.md
      use-in-view.md
      use-motion-template.md
      use-motion-value-event.md
      use-reduced-motion.md
      use-scroll.md
      use-spring.md
      use-time.md
      use-transform.md
      use-velocity.md
    guides/
      README.md
      installation.md
      accessibility.md
      performance.md
      reduce-bundle-size.md
      troubleshooting.md
      upgrade-guide.md
      migrate-from-gsap.md
  samples/
    README.md
    basic-animation.md
    scroll-animation.md
    gesture-animation.md
    layout-animation.md
    animate-presence.md
  scripts/
    README.md
    install.md

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

1. 下記マッピング表でタスクに対応するカテゴリを探す
2. そのカテゴリの references/<category>/README.md を参照して目的のページを特定する
3. 該当ページの .md を Read して詳細を確認する

カテゴリの使い分け:

• React で <motion.div> やフックを使う → react-components/ react-hooks/
• React に依存しない素の JS で animate / scroll などを使う → vanilla-js/
• transition / layout / drag / gesture / SVG / scroll の概念や prop の挙動を知る → animation/
• Vue (motion-v) で <motion> コンポーネント / v-motion ディレクティブ / composable を使う → vue/
• インストール / アクセシビリティ / パフォーマンス / バンドル削減 / troubleshooting / 移行 → guides/

タスク → カテゴリ マッピング