Repolode
投稿する
199-biotechnologies

199-biotechnologies/motion-dev-animations-skill

アクセシビリティとパフォーマンスへの配慮を組み込んだ、React、Next.js、Svelte、Astro向けMotion.devアニメーション生成Claude Codeスキル。

GitHub で見る
スター
194
フォーク
34
未解決の Issue
0
最終コミット
7 か月前

これは何？

自然言語の指示からTypeScriptのアニメーションコードを生成できるよう、Motion.devのアニメーションパターンをClaude Codeに教えるスキルです。ヒーローセクションの表示アニメーション、パララックススクロール、ドラッグ可能なリストの追加などを指示できます。React 19以降、Next.js 15以降、Svelte 5以降、Astro 4以降を対象としており、motion-vパッケージを通じてVueにも対応しています。

生成されるコードでは、GPUアクセラレーションが効くプロパティ（transform、opacity、filter）を優先し、prefers-reduced-motionを尊重し、キーボードのフォーカス処理も含めます。入場アニメーション、スクロールエフェクト、ジェスチャー操作、マイクロインタラクションに加え、FLIPによる並べ替え、AnimatePresenceを使ったアコーディオン、layoutIdによるタブ切り替えなどのレイアウトアニメーションも扱います。

リポジトリは段階的に読み込む構成です。最初にコアの指示ファイルを読み込み、必要に応じてサンプル、APIリファレンス、springプリセット、スターターテンプレート、設定バリデーターを追加で読み込みます。Claude Codeのskillsディレクトリにcloneするか、git submoduleとして追加してインストールできます。

主な機能

  • 01Claude Code内で自然言語のプロンプトからMotion.devのアニメーションコードを生成
  • 02React、Next.js App Router、Svelte、Astro、motion-v経由のVueに対応
  • 03入場、スクロール、ジェスチャー、マイクロインタラクション、レイアウトの各種アニメーションをカバー
  • 04GPUに適したtransformとopacityプロパティを使い、prefers-reduced-motionを尊重
  • 05アニメーションパターンのサンプル、springプリセット、スターターテンプレート、設定バリデーターを収録

ユースケース

  • Next.jsのランディングページにあるヒーローセクションの入場アニメーションを追加する
  • マーケティングサイトにスクロール連動のパララックスや進捗エフェクトを実装する
  • ドラッグで並べ替えられるリストや、ホバー時・磁石のように反応するボタン操作を作る
  • API全体を読み込まずに、SvelteまたはAstroのプロジェクトに一貫性のあるアクセシブルなモーションを追加する

クイックスタート

  1. 1

    Claude Codeのskillsフォルダーにスキルをクローンします

    git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations
  2. 2

    自然言語でClaude Codeにアニメーションの作成を依頼します

使う前に知っておきたいこと

  • Claude Codeのスキルのため、Claude Code内でのみ動作し、単独のライブラリとしては実行できません。
  • READMEに記載されているフレームワークのサポート対象は、別パッケージ経由のReact、Next.js、Svelte、Astro、Vueのみです。そのため、その他のフレームワークは対象外です。

トピック

#animation#motion-dev#claude-code#react#nextjs#svelte#scroll-animations#typescript#accessibility#animation-library

よくある質問

motion-dev-animations-skill とは？
アクセシビリティとパフォーマンスへの配慮を組み込んだ、React、Next.js、Svelte、Astro向けMotion.devアニメーション生成Claude Codeスキル。 自然言語の指示からTypeScriptのアニメーションコードを生成できるよう、Motion.devのアニメーションパターンをClaude Codeに教えるスキルです。ヒーローセクションの表示アニメーション、パララックススクロール、ドラッグ可能なリストの追加などを指示できます。React 19以降、Next.js 15以降、Svelte 5以降、Astro 4以降を対象としており、motion-vパッケージを通じてVueにも対応しています。
motion-dev-animations-skill は無料で使えますか？ライセンスは？
motion-dev-animations-skill は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
motion-dev-animations-skill は今もメンテナンスされていますか？
半年以上コミットなし。motion-dev-animations-skill の最終コミットは 2026年3月30日 です。
motion-dev-animations-skill は何に使えますか？
Next.jsのランディングページにあるヒーローセクションの入場アニメーションを追加する マーケティングサイトにスクロール連動のパララックスや進捗エフェクトを実装する ドラッグで並べ替えられるリストや、ホバー時・磁石のように反応するボタン操作を作る API全体を読み込まずに、SvelteまたはAstroのプロジェクトに一貫性のあるアクセシブルなモーションを追加する
motion-dev-animations-skill のインストール方法は？
Claude Codeのskillsフォルダーにスキルをクローンします: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations 自然言語でClaude Codeにアニメーションの作成を依頼します
motion-dev-animations-skill はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/199-biotechnologies/motion-dev-animations-skill

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト