motion-skillsとは Claude Codeで動画制作51スキル

motion-skillsとは Claude Codeが覚える動画制作の教科書

動画制作をAIエージェントに丸投げしたら「なんか動いてるだけ」の残念な出力が返ってきた経験、ありますよね。

iart-ai/motion-skillsは、その「動きの作法」をClaude CodeやCursorに直接教え込むOSSスキル集です。

15パック51スキル、TikTokの縦型からManimの数学アニメまで用途別に揃っていて、npx skills add の一行で入る。

51スキルが解決する「動きを知らないAIエージェント」問題

Claude CodeやCursorに動画を作らせると、最初はだいたい「素材が並んでるだけ」の仕上がりになる。

フレーム設計もイージング（動きのカーブ）も知らないから当然です。

motion-skillsは、キネティックタイポ・データビズ・広告動画・EC商品動画・地図アニメーションといった用途別の作法を51個のスキルに分解して、エージェントに参照させる仕組み。

対応エージェントはClaude Code Cursor Codexなど40以上

面白いのが、Claude Code専用じゃないところ。

Cursor、Codex、その他40以上のAIコーディングエージェントに対応していて、追加した瞬間から自動で認識される。

エージェントを乗り換えても資産が使い回せるので、「今はClaude Codeだけど後でCursorに移るかも」という迷いを気にしなくていい設計です。

Remotion skillsとの違い なぜ15パックも必要なのか

ここ、混同しやすいので先に整理しときます。

「Remotion Skills」はRemotionフレームワークの操作を教える内部パッケージ寄りの単一目的スキル集。

motion-skillsはその上に立って、TikTok・広告・EC・データビズ・地図・WebGL・Manimまで用途別に15パックへ分けた総合スキル集です。

前者は「道具の使い方」、後者は「用途別のレシピブック」と言い換えるとしっくりくる。

15パックの全体像 用途別に分かれたスキルセット

15パックの内訳がこちら。

ターゲットが明確に分かれているので、自分の作りたい方向から探せます。

web-animation-skills と motion-design-skills の9スキルが最重量級。

「まず1個試したい」なら manim-skills や map-animation-skills みたいな軽量パックから入ると挫折しにくいです。

motion-skillsのインストール手順

npx skills addで1行導入する方法

ターミナルで以下を叩くだけ。

npx skills add iart-ai/tiktok-video-skills

パック名の部分を差し替えれば任意のパックが入ります。

データビジュアライゼーションなら以下。

npx skills add iart-ai/data-animation-skills

node と npm が入っていれば追加設定なしで動くので、環境構築で詰まる心配はほぼない。

Claude Codeのプラグインとして追加する方法

Claude Codeユーザー限定のショートカットも用意されています。

/plugin marketplace add iart-ai/web-animation-skills

スラッシュコマンドを叩くだけ。

ターミナルすら開かなくていい手軽さです。

使いたいパックだけ選んで入れるという考え方

全パック一気に入れる必要はない。

まず1〜2個試して「これは自分の用途に合う」と感じたパックだけ残す方が、エージェントの参照コンテキストが軽くなって出力精度も上がります。

主要パックを見る キネティックタイポからManimまで

キネティックタイポグラフィで文字を主役にする

kinetic-typography-skills は動く文字だけで映像を成立させるパック。

プレゼン動画のオープニング、SNS用のポエム的な短尺、ブランドムービーの導入に効きます。

「文字がバウンドしながら現れる」「一文字ずつスライドイン」の細かい所作を、エージェントが作法として持つ状態になる。

データビジュアライゼーションで数字を魅せる

data-animation-skills は棒グラフ・折れ線・ドーナツを「動くインフォグラフィック」として吐き出すパック。

決算資料やIR動画、月次レポートの動画版を作りたいプロダクトマネージャーやアナリストに刺さります。

数字がカウントアップしながらグラフが伸びる、あの表現が指示一発で出てくる。

TikTok Reels向けの縦型ショート動画パック

tiktok-video-skills は9:16の縦型、テンポ、字幕位置、BGMのタイミングまで作法通りに組むパック。

素材を渡して「これを縦型で1本にまとめて」と指示すれば形になります。

個人的にはここが一番、画像生成AIユーザーと相性が良い入口。

WebGLアニメーションでインタラクティブな表現を作る

webgl-animation-skills は3D空間・パーティクル・シェーダーを扱う9スキル構成のパック。

Webサイトのヒーローセクションやポートフォリオに組み込むと、静的なサイトが「触れるギャラリー」に変わります。

Three.jsの構文を覚えなくていいのが大きい。

Manimで数学的な美しさをアニメーションにする

manim-skills は3Blue1Brownで有名になったアニメーションライブラリ「Manim」を扱う専門パック。

方程式が変形しながら幾何学模様が動いていく、あの映像です。

教育コンテンツやYouTubeの解説動画を作る人は、Manim単体を学ぶより先にこのスキルを入れる方が早い。

motion-skillsの使い方 プロンプト一つで動きが生まれる仕組み

パックが入った状態で「TikTok用の商品紹介動画を作って」と伝えると、エージェントが tiktok-video-skills のスキル定義（SKILL.md）を自動で参照して、縦型フレーム・テンポ・字幕位置・BGMタイミングまで作法通りに組み立ててくれます。

「縦横比9:16で」「テンポは1.5秒ごと」と毎回書き足す必要がないので、指示が短くて済むし出力もブレない。

検証ループでエージェントが自分の出力を確認する

これがmotion-skillsの一番効くところ。

各スキルには「deliver-and-verify loop（検証ループ）」が組み込まれていて、動画を出力したあとにエージェント自身がフレームをキャプチャして、コンタクトシート化してMP4のエンコード状態まで確認します。

人間が「なんか変」と気づいて指摘するラリーが減るので、生成から仕上げまでの反復回数が目に見えて短くなる。

プロンプト画伯が考えるmotion-skillsの活用シナリオ

静止画の次に来る「動き」という表現領域

画像生成AIで一枚絵を作るのはもう慣れきった、次はどこへ、と思っている人にとってmotion-skillsは意外と手前の一歩だと感じます。

VeoやRunwayが「AIに丸投げで動画を作ってもらう」路線なのに対して、motion-skillsは「動きの作法を自分の指示に組み込む」路線。

プロンプトを積み上げてきた感覚と地続きです。

自分のAIアートをTikTok用ショート動画にする

MidjourneyやStable Diffusionで作った作品をギャラリーに置きっぱなしにするのはもったいない。

tiktok-video-skills を入れて「この画像を主役に、9:16の縦型、キャッチコピーを1.5秒ごとに切り替えて」と指示するだけで、TikTokやReelsに投稿できる短尺動画が出てきます。

1枚絵の見せ方が一気に広がる。

ポートフォリオサイトにWebGLの動く演出を加える

自分のAIアートをまとめたサイトに、webgl-animation-skills で作った3Dのローディング演出やホバーエフェクトを乗せると、静的な作品集が「触れるギャラリー」になります。

コードはエージェントが書いてくれるので、Three.jsの構文を覚える手間なしに、作品の見え方だけに集中できる。

まずは manim-skills みたいな軽量パックを1つだけ入れて動かしてみる。

それが、静止画に慣れた人が「動き」に踏み出す一番低いハードルだと思っています。

GitHub - iart-ai/motion-skills: 50 open-source skills that teach your AI coding agent to make motion graphics, animation & video — kinetic typography, data-viz, explainers, TikTok/Reels, WebGL, Manim. 14 installable packs. By iart.ai, the AI motion agent.

50 open-source skills that teach your AI coding agent to make motion graphics, animation & video — kinetic typography, data-viz, explainers, TikTok/Reels, WebGL, Manim. 14 installable packs. By...

github.com

Recommend resource: iart-ai/motion-skills (50 motion-graphics skills) · Issue #2098 · hesreallyhim/awesome-claude-code

Display Name motion-skills Category Agent Skills Sub-Category General Primary Link https://github.com/iart-ai/motion-skills Author Name iart.ai Author Link https://github.com/iart-ai License MIT De...

github.com