·motion-design
*

motion-design

richtabor/agent-skills

UI コンポーネントのモーション デザイン ガイダンスを提供します。アニメーション リクエスト (「これをアニメートする」、「トランジションを追加する」、「モーションを追加する」)、調整リクエスト (「このアニメーションをクリーンアップする」、「モーションをクリーンアップする」、「速すぎる/遅すぎると感じる」、「より生き生きとした/自然な感じにする」)、およびイージング、タイミング、またはマイクロ インタラクションに関する質問をトリガーします。

10インストール·0トレンド·@richtabor

インストール

$npx skills add https://github.com/richtabor/agent-skills --skill motion-design

SKILL.md

Design intentional, purposeful motion for product UI. This skill evaluates animation needs and recommends specific easing curves, durations, and implementation approaches based on interaction frequency and purpose.

Every animation needs a job. If it has no job, don't animate.

Based on the evaluation, provide specific recommendations using tokens from the reference files.

UI コンポーネントのモーション デザイン ガイダンスを提供します。アニメーション リクエスト (「これをアニメートする」、「トランジションを追加する」、「モーションを追加する」)、調整リクエスト (「このアニメーションをクリーンアップする」、「モーションをクリーンアップする」、「速すぎる/遅すぎると感じる」、「より生き生きとした/自然な感じにする」)、およびイージング、タイミング、またはマイクロ インタラクションに関する質問をトリガーします。 ソース: richtabor/agent-skills。

原文を見る

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/richtabor/agent-skills --skill motion-design
カテゴリ
*クリエイティブ
認証済み
初回登録
2026-02-01
更新日
2026-02-18

クイックアンサー

motion-design とは?

UI コンポーネントのモーション デザイン ガイダンスを提供します。アニメーション リクエスト (「これをアニメートする」、「トランジションを追加する」、「モーションを追加する」)、調整リクエスト (「このアニメーションをクリーンアップする」、「モーションをクリーンアップする」、「速すぎる/遅すぎると感じる」、「より生き生きとした/自然な感じにする」)、およびイージング、タイミング、またはマイクロ インタラクションに関する質問をトリガーします。 ソース: richtabor/agent-skills。

motion-design のインストール方法は?

ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/richtabor/agent-skills --skill motion-design インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/richtabor/agent-skills