animation-performancecommit 2d22863SKILL.md · パフォーマンス
アニメーション性能
Web アニメーションのフレーム落ちを診断し、合成のみのプロパティなどでフレーム予算内に収めます。
npx skills add emilkowalski/skills --skill animation-performanceコマンドを選択しました。手動でコピーしてください。
- 権限
- read-repo
- write-files
- shell
- network
- 対応ツール
- Any SKILL.md agent
- GitHub
- 52.5k
- 提供元
- コミュニティ · Emil Kowalski
- 状態
- スキャン済み
- ライセンス
- MIT
- カテゴリ
- パフォーマンス
基本ルール
アニメーションは transform と opacity を基本とし、それ以外のプロパティには理由が必要です。
実行フェーズ
フェーズ 01対象の洗い出し
対象の各アニメーションについて駆動方式・プロパティ・再生タイミングを一覧にし、transition: all や Motion の省略記法を実際のプロパティに展開します。
フェーズ 02原因の診断
プロパティ、メインスレッドの混雑、React の毎フレーム再レンダリング、継承される CSS 変数、20px 超の blur の順に確認し、will-change は最後に検討します。
フェーズ 03記録で確認
DevTools の Performance と Animations パネルで確認し、感覚ではなく実際のミドルレンジのスマホでプロファイルします。
フェーズ 04レポート
各指摘にファイル位置、原因、変更前後、コードで確認済みか実機記録が必要かを記し、コスト順に並べて止まります。修正は依頼時のみ行います。
権限の説明（SKILL.md より）
| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | 既定ではレポートのみを出し、依頼されたときだけアニメーション関連のコードを修正します。 |
| コマンド実行 | 不要 | コマンドは実行しません。実機の記録はユーザーが DevTools で行います。 |
| 外部通信 | 不要 | ネットワークアクセスは不要です。 |
SKILL.md のフロントマター（YAML）
---
name: animation-performance
description: Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.
---関連スキル
ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。