# アニメーション性能 (animation-performance)

> Web アニメーションのフレーム落ちを診断し、合成のみのプロパティなどでフレーム予算内に収めます。

- カテゴリ: [パフォーマンス](https://www.myskills.tools/ja/categories/performance/)
- 提供元: コミュニティ · Emil Kowalski
- リポジトリ: https://github.com/emilkowalski/skills/tree/main/skills/animation-performance (commit 2d22863)
- SKILL.md: https://github.com/emilkowalski/skills/blob/main/skills/animation-performance/SKILL.md
- インストールコマンド: `npx skills add emilkowalski/skills --skill animation-performance`
- ライセンス: MIT
- 対応ツール: Any SKILL.md agent
- 権限: read-repo ✓, write-files ✓, shell ✗, network ✗
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。

## 基本ルール

アニメーションは transform と opacity を基本とし、それ以外のプロパティには理由が必要です。

## 実行フェーズ

1. **対象の洗い出し** — 対象の各アニメーションについて駆動方式・プロパティ・再生タイミングを一覧にし、transition: all や Motion の省略記法を実際のプロパティに展開します。
2. **原因の診断** — プロパティ、メインスレッドの混雑、React の毎フレーム再レンダリング、継承される CSS 変数、20px 超の blur の順に確認し、will-change は最後に検討します。
3. **記録で確認** — DevTools の Performance と Animations パネルで確認し、感覚ではなく実際のミドルレンジのスマホでプロファイルします。
4. **レポート** — 各指摘にファイル位置、原因、変更前後、コードで確認済みか実機記録が必要かを記し、コスト順に並べて止まります。修正は依頼時のみ行います。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | 既定ではレポートのみを出し、依頼されたときだけアニメーション関連のコードを修正します。 |
| コマンド実行 | 不要 | コマンドは実行しません。実機の記録はユーザーが DevTools で行います。 |
| 外部通信 | 不要 | ネットワークアクセスは不要です。 |

## SKILL.md のフロントマター（YAML）

```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.
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/animation-performance/