Communitygithub.com

mblode/ui-animation

UIモーションとアニメーションの実装を作成、レビュー、デバッグします。スプリング、ジェスチャー、ドラッグ操作、クリップパス表示、イージングカーブ、タイミング、CSSトランジションレシピ、アニメーションレビューをカバーします。

ui-animation とは?

このスキルは、UIモーションとアニメーションの実装に特化したアシスタントです。スプリングアニメーション、ジェスチャー、ドラッグ操作、クリップパスによるリビール、イージングカーブ、タイミング、CSSトランジションのレシピ、そして既存アニメーションのレビューとデバッグをサポートします。主にCSSトランジション、CSSキーフレーム、framer-motionを用いたWebフロントエンドプロジェクトで活用でき、「アニメーションを追加する」「滑らかにする」「アニメーションをレビューする」「スワイプジェスチャーを追加する」「トランジションを追加する」といった自然言語の指示にも対応します。また、画面録画や動画からモーションを再現する必要がある場合は別スキル(reverse-engineer-animation)を、全体的なビジュアルデザインやスタイリングにはui-designを、タイプライターやラインブロックインなどのテキストエフェクトにはanimate-textを参照するよう推奨しています。開発者が実際の実装やデザインレビュー時に、モーションの質感や一貫性を高めるための実践的なアドバイスを提供します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mblode/agent-skills/tree/main/skills/ui-animation

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

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

ドキュメント

ui-animation は何をしますか?

UIモーションとアニメーションの実装を作成、レビュー、デバッグします。スプリング、ジェスチャー、ドラッグ操作、クリップパス表示、イージングカーブ、タイミング、CSSトランジションレシピ、アニメーションレビューをカバーします。モーション、CSSトランジション、キーフレーム、framer-motion、スプリングアニメーションを設計・実装・レビューする際、または「アニメーションを追加する」「滑らかにする」「アニメーションをレビューする」「これはアニメーション化すべきか」「スワイプジェスチャーを追加する」「トランジションを追加する」といった質問がある場合に使用してください。画面録画や動画からモーションを再現するには reverse-engineer-animation を、全体的なビジュアル方向性とスタイリングには ui-design を、名前付きテキストエフェクト仕様(タイプライター、ラインブロックイン、キネティックビルド)には animate-text を使用してください。

関連スキル