design-motion-principles作者 Kyle Zantos

Design Motion Principles スキル。

モーションとビデオのための Claude Code と Codex スキル：Kowalski、Krehel、Tompkins の手法に基づいた、目的のあるインタラクションモーション、または既存のアニメーションのレビューを行います。

モーションと動画

kylezantos/design-motion-principles · skills/design-motion-principles/SKILL.mdSKILL.md

--- name: design-motion-principles description: Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding, animating, or reviewing UI motion: transitions, hover states, micro-interactions, enter/exit … --- ## STEP 0: Detect Mode (DO THIS FIRST) ## The Three Designers ## Context-to-Perspective Mapping ## Core Principles (Both Modes) ## Reference Index ## Workflow Index

2026-09-14 にアップストリームファイルから読み取ったフロントマターとセクション見出し · 全6,794文字

01 できること

Claude Code と Codex における design-motion-principles スキルの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

コーディングエージェント向けのインタラクション・モーションデザインスキルで、2つのモードで動作します。Create モードでは、意図のあるモーションを備えたインタラクティブなコンポーネントを構築します。Audit モードでは既存のモーションをレビューし、AIスロップ的なパターンを含む、デザイナーごとの所見を、ループするデモ付きのブランド化された HTML レポートとして報告します。

このスキルは、抑制とスピードを重視する Emil Kowalski、プロダクション品質の仕上げを重視する Jakub Krehel、遊び心のある実験を重視する Jhey Tompkins という3つの視点を軸にアドバイスを組み立てており、一律に適用するのではなくプロジェクトの種類に応じて重み付けします。対象範囲はウェブおよびアプリ UI のモーションで、HTML/CSS、React、Framer Motion、iOS/Android のトランジション、デザインシステムのアニメーションを含みます。頻度のゲート、コンテキストに応じた継続時間、prefers-reduced-motion の必須対応は、両モードで実行されます。

生成されるもの

Create モードで、意図のあるモーションを用いて構築されたインタラクティブなコンポーネント。
Audit モードにおけるデザイナーごとのレビューレポート。
所見のループするデモを含む、ブランド化された HTML レポート。
デフォルトでは HTML としてレンダリングされるオーディットレポートテンプレートで、フラグを指定することでターミナルモードも利用できます。

プロンプト例を見る ↗

仕組み

01
リクエストからモードを検出する
ビルド寄りの表現は Create を選択し、audit、review、evaluate、feedback、または「このモーションは良いか」といった表現は Audit を選択します。
02
該当するワークフローファイルを読む
モードの検出はステップ0であり、それ以外のすべてを制御します。そのモードに対応するワークフローファイルが、記載どおりに実行されます。
03
コンテキストに応じて3人のデザイナーを重み付けする
Emil、Jakub、Jheyは文脈依存の視点として扱われ、普遍的なルールとしては扱われません。
04
頻度と持続時間のガイダンスを適用する
まずインタラクションが発生する頻度が優先され、その後に関連するレンズから導き出された持続時間の目標が続きます。
05
モードに応じた成果物を出力する
Createはコンポーネントを返し、Auditはデザイナーごとのレポートを返します。各知見には、視覚的なコンテナテンプレートから構築されたデモカードが付きます。

02 適合性を確認

design-motion-principles Skill を使用するタイミング

Claude Code や Codex でこの種類のモーション・動画の作業を行う際は、design-motion-principles スキルを使用してください。適合範囲と制限は、スキル自身のファイルから取得されています。

適している場合

LinearやRaycastのようなプロダクティビティツールでは、Emilの抑制と速度のルールが主導し、Jheyはオンボーディングにのみ使用されます。
子供向けアプリや教育系プロダクトでは、洗練さと楽しさがプロダクティビティの速度ルールを上回り、Emilは高頻度のゲームインタラクションに限定されます。
クリエイティブなポートフォリオでは、洗練にはJakub、発案にはJheyが主導し、Emilは高頻度インタラクションに限定されます。
モバイルアプリでは、Jakubが主導し、Emilが支援し、Jheyが楽しい要素を提供します。

境界を知る

ゲームエンジン、Lottie、Rive、動画といったWebやアプリUI以外のモーション作業では、頻度のフレームワークは依然として適用されますが、デザイナー固有の手法はそのまま適用できない場合があります。
単一の普遍的な数値で持続時間を判断すること、文脈による重み付けを確認せずに持続時間にフラグを立てたり上限を設けたりすることは、明確に禁止されています。
キーボードで開始されるインタラクションは、プロジェクトの種類にかかわらず、アニメーションから完全に除外されます。

提供すべきもの

プロジェクトの種類これが一次、二次、選択的な重み付けを決定するため、SaaSダッシュボードではJakubよりもまずEmilが指し示されます。
インタラクションがトリガーされる頻度頻度ゲートは何かを追加または承認する前に適用されるため、その答えによってそもそもアニメーション対象として適格かどうかが変わります。
モーション自体とそのスタックReact、Framer Motion、CSS、HTMLにおけるトランジション、ホバー状態、マイクロインタラクション、エンター/エグジットアニメーション。

03 スキルの内部

design-motion-principlesスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する6つの具体的な指示、デフォルト、制限 — ファイルの中でも結果を変える部分です。

トリガー頻度でアニメーションするかどうかを決定する
1日に何百回も発生する頻繁なインタラクションにはアニメーションを付けないか、瞬時のトランジションを使用します。稀なインタラクションは表現力豊かでも構いません。
prefers-reduced-motionを常に処理する
この要件は、Createモードで生成されたものやAuditモードでレビューされたものすべてに例外なく適用されるとされています。
リクエストが曖昧な場合は確認する
「このモーダルのアニメーションを見てほしい」といった曖昧なリクエストは推測されません。ユーザーはCreateかAuditかを選ぶよう求められます。
プロジェクトの種類に応じてデザイナーの重み付けを変更する
マッピングテーブルは一次、二次、選択的なレンズを変更します。ランディングページではJakubが一次、Jheyが二次となり、Emilはフォームとナビゲーションにのみ使われます。
視認性を品質テストとして使用する
すべてのインタラクションで褒め言葉を引き出すようなモーションは、プロダクション向けには目立ちすぎるとみなされます。
モードが要求する参照資料を読み込む
Createモードは常にMotion Cookbook（enter/exit、イージング、スプリング、clip-path、@property、FLIP、スクロール駆動のレシピ集）を読み込みます。Auditモードは独自の常時読み込みファイルを読み込みます。

04 実際に使う

Claude Code または Codex に design-motion-principles をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、または使用中のエージェントに design-motion-principles を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles

skills/design-motion-principles/SKILL.md用の一般的なskills CLI形式です。リポジトリは独自のパスを記載している場合があります。

スキルに最初のモーション・動画タスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt

Audit the [command palette] open and close transition in our [React] app before it ships, and flag anything that reads as AI-slop motion. People use it hundreds of times a day, so tell me what should not animate at all and what should sit under 300ms. Then build the corrected version with Framer Motion and make sure it respects prefers-reduced-motion.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

モーションの重みが、見た目の良さではなく、そのインタラクションが実際に発生する頻度に一致しているかを確認します。
プロダクション品質の作業を、単一のグローバルな持続時間ではなく、200〜500msというJakubの帯域と照らし合わせて測定します。
Auditモードでは、アニメーションを目で見て判断するのではなく、体系的な監査チェックリストに沿って進めます。
AIスロップ的なモーションのカテゴリとアンチパターンを特定するアンチチェックリストの品質ゲートに、検出結果を通します。
複雑なアニメーションについては、GPU最適化、will-changeの使用状況、レイアウトスラッシュを確認します。

OpenDesignでは、design-motion-principlesをそのSKILL.mdリンクからインポートします：Plugins → Add → Skill → Import from link、その後トップバーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author: Kyle Zantos
Repository: github.com/kylezantos/design-motion-principles ブランチ main
スキルファイル: skills/design-motion-principles/SKILL.md 検証時にコンテンツチェックサムを記録；コミット 4a9ca87
License: MIT LICENSE より
リポジトリスター数: 1,048 kylezantos/design-motion-principles リポジトリ全体の GitHub スナップショットを 2026-09-14 に取得。design-motion-principles の評価や使用回数ではありません。
OpenDesign により検証済み: 2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

ステップ0：モードを検出する（最初に行うこと）リクエストの文言をCreateまたはAuditにマッピングし、あいまいな場合は確認します。
3人のデザイナーEmil、Jakub、Jheyがそれぞれ誰で、どの問いに答えるのか、そしてトリビュートに関する免責事項。
コンテキストと視点のマッピング7種類のプロジェクトタイプを、主要・補助・選択的なデザイナーの重み付けに対応付けます。
コアプリンシプル（両モード共通）頻度ゲート、持続時間のガイドライン、ゴールデンルール、そして必須のアクセシビリティ。
参照インデックス各参照ファイルと、それを読み込むべき条件の対応。
ワークフローインデックス2つのワークフローファイル：コンポーネントを構築する、またはモーションをレビューして報告する。

スキル自身による説明

Emil Kowalski、Jakub Krehel、Jhey Tompkins の技法に基づくモーションとインタラクションデザインの専門家です。2つのモード — 目的のあるモーションで対話型コンポーネントを構築するか、既存のアニメーションを監査して AI 特有のモーションパターンを検出します（監査はループするデモ付きのブランド化された HTML レポートを出力します）。UI モーションの作成、追加、アニメーション化、またはレビュー時に使用します：トランジション、ホバー状態、マイクロインタラクション、エンター/エグジットアニメーション、または React、Framer Motion、CSS、HTML でのあらゆるモーションデザイン作業。コンテキストを考慮した重み付けでデザイナーごとの視点を提供します。

SKILL.md のフロントマター記述。完全なファイルは約 6,794 文字です。GitHub で完全なファイルを読む

06 インストールする前に

design-motion-principlesスキルについてのよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

Reactが必要ですか、それとも通常のCSSとHTMLでも動作しますか？

どちらも対象です。このスキルはHTML/CSS、React、Framer MotionまたはMotion、iOS/Androidのトランジション、デザインシステムのアニメーションなど、WebおよびアプリのUIモーション全般をカバーしています。

何かを構築するのか、レビューするのかをどのように判断しますか？

リクエストを読み取り、CreateまたはAuditの兆候を探します。それがあいまいな場合は確認します。AskUserQuestionが利用できない場合は、2つのモードを提示するプレーンテキストの質問にフォールバックします。

子供向けアプリでも、ダッシュボードと同じ速く抑制されたモーションになりますか？

いいえ。重み付けはコンテキストに依存するため、子供向けアプリではEmilの生産性重視の速度ルールよりも、洗練さと楽しさを重視するJakubとJheyが優先されます。そのコンテキストでは、楽しさが目標とみなされます。

この3人のデザイナーがこのスキルを手がけているのですか？

いいえ。各レンズは彼らが公開しているコース、記事、講演、オープンソースプロジェクトを蒸留したもので、重み付けフレームワークはそれらに敬意を込めて名付けた、このスキル独自の解釈です。

Design Motion Principles

実際のモーション・動画タスクで design-motion-principles を実行

OpenDesign をダウンロードし、SKILL.md リンクから design-motion-principles をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を読んでください。

OpenDesign をダウンロードすべてのスキルを見る

ターミナル

npx skills add https://github.com/kylezantos/design-motion-principles --skill design-motion-principles