web-motion-skill は何をしますか？
ウェブアニメーションのためのエージェンティックコーディングループを閉じます。コーディングエージェントに、ページをスクロールしながら録画し、フレームごとに分析し、自然言語でアニメーションを最適化する機能を提供します。
概要
このスキルは、AIコーディングエージェントがウェブページ上のアニメーションを自動的に記録、分析、最適化することを可能にします。主な機能は以下の通りです。
- スクロール録画: 指定した速度でページをスクロールしながら、動画をキャプチャします。
- フレーム分析: 各フレームのレンダリングパフォーマンスを分析し、問題点（ジャンク、レイアウトシフトなど）を特定します。
- 最適化提案: 分析結果に基づき、CSSやJavaScriptの改善案を自然言語で提案します。
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIコーディングエージェント
使い方
- エージェントに「このページのアニメーションを分析して」と指示します。
- エージェントが自動的にページをスクロールしながら録画を開始します。
- 録画後、フレームごとの分析結果が表示されます。
- 自然言語で最適化を依頼すると、エージェントがコードを修正します。
技術詳細
- 録画には
chrome-remote-interfaceライブラリを使用します。 - フレーム分析には
performanceAPI とカスタムパーサーを使用します。 - 修正はエージェントが直接コードベースに適用します。
環境変数
CHROME_PORT: Chrome DevTools Protocol のポート番号（デフォルト: 9222）RECORDING_DURATION: 録画時間（秒、デフォルト: 10）SCROLL_SPEED: スクロール速度（ピクセル/秒、デフォルト: 500）
例
# 録画を開始
agent record --url https://example.com --duration 15 --scroll-speed 300
# 分析結果を表示
agent analyze --file recording.json
# 最適化を実行
agent optimize --target "改善されたスクロールアニメーション"
注意点
- Chrome がリモートデバッグモードで起動している必要があります。
- 録画中は他の操作を避けてください。
- 分析結果は環境によって異なる場合があります。
ライセンス
MIT