Communitygithub.com

kylezantos/design-motion-principles

Emil Kowalski、Jakub Krehel、Jhey Tompkins のテクニックに基づくモーション&インタラクションデザインのエキスパート。2つのモードを提供:意図的なモーションを持つインタラクティブコンポーネントを構築するか、既存のアニメーションを監査して「AIスロップ」と呼ばれる不適切なモーションパターンを検出します(監査はループデモ付きのブランドHTMLレポートを生成します)。React、Framer Motion、CSS、HTMLでのUIモーション作成・追加・アニメーション・レビュー時に使用します。デザイナーごとの視点とコンテキストに応じた重み付けを提供します。

design-motion-principles とは?

このスキルは、Emil Kowalski、Jakub Krehel、Jhey Tompkinsという3人の有名なモーションデザイナーのテクニックを統合した、UIモーションとインタラクションデザインの専門家エージェントです。主に2つのモードで動作します。1つ目は「ビルドモード」で、Framer MotionやCSS、HTMLを用いて、意図的で洗練されたトランジション、ホバー状態、マイクロインタラクション、エントリー/イグジットアニメーションを備えたインタラクティブコンポーネントの作成を支援します。2つ目は「監査モード」で、既存のアニメーションを分析し、「AIスロップ」と呼ばれる不自然で過剰なモーションパターンを検出し、その結果をループデモを含むブランド化されたHTMLレポートとして出力します。React、Framer Motion、CSS、HTMLのプロジェクトに対応し、各デザイナーの視点に基づいたアドバイスをコンテキストに応じて重み付けして提供するため、初心者からプロフェッショナルまで、UIモーションの品質向上に役立ちます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kylezantos/design-motion-principles/tree/main/skills/design-motion-principles

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

design-motion-principles は何をしますか?

Emil Kowalski、Jakub Krehel、Jhey Tompkins のテクニックに基づく、モーションおよびインタラクションデザインのエキスパートです。2つのモードを備えています。意図的なモーションを備えたインタラクティブコンポーネントを構築するか、既存のアニメーションを監査して「AIスロップ」と呼ばれる不適切なモーションパターンを検出します(監査モードでは、ループデモ付きのブランド化されたHTMLレポートを出力します)。UIモーションの作成、追加、アニメーション、レビュー(トランジション、ホバー状態、マイクロインタラクション、エントリー/イグジットアニメーションなど)で使用します。対応プラットフォーム: React、Framer Motion、CSS、HTML。デザイナーごとの視点とコンテキストに応じた重み付けを提供します。

関連スキル