fixing-motion-performance

fixing-motion-performance

カタログ用の仮スタブ — スキルの全文：ibelick/ui-skills

判断ツリー

1. スキルの全文がすでにインストールされていますか？

   • グローバル：f=~/.agents/skills/fixing-motion-performance/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/fixing-motion-performance/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルが fixing-motion-performance としてインストールされています。スキルを呼び出して続行してください
   • pointer → ステップ 2 に進んでください

2. スコープを検出してから、インストールします。

   [ -e ~/.agents/skills/fixing-motion-performance ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add ibelick/ui-skills --skill fixing-motion-performance -g -y
   

   プロジェクト：

   npx skills add ibelick/ui-skills --skill fixing-motion-performance -y
   

   Claude Code： 会話から離れずにコマンドを実行するには、チャットメッセージの先頭に ! を付けて送信します。

ご注意

• ライセンス： MIT

インストール後の呼び出し

• スキル名：fixing-motion-performance
• トリガーフレーズ：「motion performance」、「animation performance」、「layout thrashing」、「compositor properties」

機能

アニメーションを監査し、レイアウトのスラッシング、コンポジタープロパティの誤った使用、スクロール連動モーションのアンチパターン、高コストなぼかし効果を検出します。アニメーションを GPU 上で実行するための具体的な修正方法を提示し、フレーム落ちをなくして、滑らかで本番環境に適したモーションを実現します。

使用しない場合

• イージング、タイミング、モーションデザインの原則を選ぶ場合（パフォーマンスではない場合）→ design-motion-principles を使用します
• ライブラリ固有の GSAP 作業（ScrollTrigger、タイムライン、useGSAP）→ gsap-skills を使用します