UIの“動き”をAIに教えるスキル「transitions.dev」が話題。npx1行でClaude Codeに追加

2026年7月25日、デザイナーのJakub Antalik氏（@Jakubantalik）が公開した「UIのアニメーション（動き）をAIに教えるスキル」が話題を集めました。

「transitions.dev」という名前で、ボタンやモーダルなどの実務で使える動きのパターンを33種類以上まとめたもの。CSS/Reactのコードとして使えるほか、Claude Code・Cursor・Codexなどにnpxコマンド1行で追加できる「スキル」としても配布されている点が注目されました。

Webサイトやアプリの「ちょっとした動き」は、作り込むと時間がかかる割に後回しになりがちな部分です。それをAIに任せられる形にしたのが今回のスキルです。順番に見ていきます。

「UIの動きをAIに教えるスキル」とは何か

transitions.devは、AIコーディングツールに「洗練されたUIの動きの作法」を教え込む追加パーツです。追加しておくと、「このボタンに成功時のチェックの動きを付けて」のように動きを名前で頼むだけで、AIが適切なコードを差し込んでくれるようになります。

そもそも「トランジション」とは？

トランジションとは、画面の要素が切り替わるときのなめらかな動きのこと。モーダル（ポップアップ）がふわっと開く、通知バッジがぴょこっと出る、ページがスッと切り替わる——こうした細かな動きを指します。

地味に見えますが、この動きの有無でアプリの「完成度の印象」は大きく変わります。一方で、自然な動きを一から調整するのは手間がかかり、専門知識も要る領域でした。

どんな動きが入っている？

公式サイトによると、カードのリサイズ、数字のポップイン、通知バッジ、テキストの入れ替え、ドロップダウン、モーダル、パネルの展開、ページスライド、アイコンの切り替え、成功チェック——といった、実務で頻出する動きがひととおりそろっています。

投稿と公式情報を整理すると

ポイントは「名前で頼める」ことです。動きの実装方法を知らなくても、「ドロップダウンの動きを付けて」と言えば、スキルが対応するコードを選んで差し込んでくれます。動きの品質を、知識に頼らず一定に保てるわけです。

業務でどう使える？どう変わる？

AIでWebサイトやアプリ・社内ツールを作る機会がある人ほど、このスキルの恩恵を受けやすくなります。

こんな人・場面で使える

• Web制作・コーディングをする人：AIにサイトやLPを作らせるとき、動きの部分の品質を底上げできる。「動きが安っぽい」問題を減らせる
• デザイナー：動きのイメージをコードに落とす作業を、名前を指定するだけで進められる。エンジニアへの受け渡しもスムーズに
• ノーコード＋AIで内製する人：社内ツールや簡単なアプリを自作するとき、細かな動きまで手が回らなくても一定の完成度に仕上げやすい
• 個人開発・副業：作った成果物の「見た目の印象」を、少ない手間で引き上げられる

この話題から学べること

今回のスキルが示しているのは、「専門的なノウハウを、AIが使える形にパッケージする」流れです。動きの作法という職人的な知識が、コマンド1行でAIに移植できるようになりました。

これはデザインに限りません。自分の得意分野の「型」をスキルとしてまとめておけば、AIにその品質を再現させられる時代に入りつつある、という一例です。

よくある質問

まとめ：専門ノウハウを「スキル」でAIに移す時代

transitions.devが話題になったのは、職人的なUIの動きの知識を、コマンド1行でAIに使わせられるようにした点にあります。AIでモノづくりをする人にとって、成果物の完成度を手軽に引き上げる選択肢が一つ増えました。

今回の内容は、Jakub Antalik氏（@Jakubantalik）の投稿を参考にさせていただきました。実務で使える動きを整理し、AIエージェントですぐ使える形にまとめて公開した、実践的な取り組みです。

「まず自分がAIを業務で使える側になりたい」という方には、デイトラのAI業務活用コースで、プロンプトの基本からMCP・AIエージェントまで体系的に学べます。