スキル自身の言葉で
CSS および JS のアニメーションパフォーマンスを対象とした監査・修正のプレイブックで、ぎこちないトランジション、スクロール連動モーション、ブラー効果をレビューまたはリファクタリングするデザイナーや開発者向けです。スラッシュコマンドとして提供され、単体で呼び出すと会話中のアニメーション作業全般にガイドラインを適用し、ファイルを渡すと該当行を引用しながら違反を報告し、その重要性とコードレベルの修正案を示します。
ルールは優先度順に並んでおり、never パターン、メカニズムとツールの境界（クリティカル）から始まり、計測、スクロール、ペイント、レイヤー、ブラーを経て、ビュートランジションへと続きます。求められない限りアニメーションライブラリの移行は行わず、既存スタック内でルールを適用します。
生成されるもの
- 違反ごとに、その重要性を説明する短い一文。
- 各違反に対する、コードレベルの具体的な修正。
- デフォルトと異なるレンダリング処理の選択について明記された根拠。
仕組み
- 01スラッシュコマンドとして呼び出す
/fixing-motion-performance を実行すると、セッション内で既に議論されているアニメーション作業に制約が適用されます。
- 02またはファイルを指定する
パスを渡すとレビューモードに切り替わり、進行中の作業に制約を課す代わりに、そのファイルをすべてのルールに照らして検証します。
- 033部構成でレポートする
各所見では該当行を引用し、その重要性を短い一文で説明した上で、コードレベルの修正案を提示します。
- 04レンダリングステップ別にプロパティを整理する
グロッサリーは作業をコンポジット、ペイント、レイアウトに分類し、どのアニメーションが低コストでどれが高コストかをレビュアーが把握できるようにしています。
- 05優先順位に従って適用する
影響度の低いカテゴリーより先にクリティカルなカテゴリーが検証されるため、never パターンとツールの境界が最初に確定します。
- 06現在のスタック内に留める
ライブラリの移行は作業の対象ではありません。ルールは、コードベースが既に使用しているアニメーションシステムに対して適用されます。