Communitygithub.com

ibelick/fixing-motion-performance

アニメーションのパフォーマンス問題(レイアウトスラッシング、コンポジタープロパティ、スクロール連動モーション、ぼかし効果など)を監査・修正します。アニメーションがカクつく、トランジションがギクシャクする、CSS/JSアニメーションのパフォーマンスをレビューする際に使用します。

fixing-motion-performance とは?

このスキルは、ウェブページやアプリケーションにおけるアニメーションパフォーマンスの問題を診断し、修正するための専門ツールです。主な対象は、レイアウトスラッシング(強制リフロー)、不適切なコンポジタープロパティの使用、スクロールに連動した重いアニメーション、過剰なぼかし効果など、ブラウザのレンダリングパイプラインに悪影響を与える一般的なパフォーマンスのボトルネックです。このスキルは、CSSアニメーションやJavaScript(特に`requestAnimationFrame`や`Web Animations API`)を使用したアニメーションのパフォーマンスレビューや、実際にユーザーが体感するカクつき(ジャンク)や引っかかり(スタッター)の修正に役立ちます。開発者はこのスキルを使うことで、Chrome DevToolsのPerformanceパネルを使ったプロファイリング結果の分析、`will-change`プロパティや`transform`・`opacity`といったコンポジターのみで処理されるプロパティへの変換提案、`IntersectionObserver`を用いたスクロール連動アニメーションの最適化など、具体的な改善策を得ることができます。このスキルは主にWeb開発環境(Claude Code、Cursor、Codexなど)での使用を想定しており、提供されるアドバイスは最新のブラウザ最適化手法に基づいています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performance

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

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

ドキュメント

fixing-motion-performance は何をしますか?

アニメーションパフォーマンスの問題(レイアウトスラッシング、コンポジタープロパティ、スクロール連動モーション、ぼかし効果など)を監査・修正します。アニメーションがカクつく、トランジションがギクシャクする、CSS/JSアニメーションのパフォーマンスをレビューする際に使用します。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル