optimize

概要

optimizeスキルは、ウェブアプリケーションのUIパフォーマンス問題を体系的に診断し解決するために設計されています。読み込み遅延、操作のもたつき、ぎこちないアニメーション、大きすぎる画像、肥大化したバンドルサイズなど、よくある問題に対応します。ユーザーから動作が遅いと報告された場合や、より高速で滑らかな体験を提供したい場合に、具体的な対策やチェックポイントを示して作業をサポートします。

optimizeを使うべき人

• フロントエンド開発者やウェブエンジニア
• Core Web Vitalsの改善に取り組むチーム
• 遅延や重いインターフェースのトラブルシューティングを行う方

optimizeが解決する課題

• 読み込み、レンダリング、実行時のボトルネックを特定
• パフォーマンス測定と改善のステップバイステップガイドを提供
• 画像最適化、バンドル削減、アニメーションの滑らかさ向上などをカバー

使い方

インストール手順

1. 以下のコマンドでoptimizeをインストールします:
   npx skills add https://github.com/pbakaus/impeccable --skill optimize
2. SKILL.mdファイルを確認し、体系的なワークフローと実践的なアドバイスを把握します。
3. 可能であれば、README.md、AGENTS.md、metadata.jsonなどの補助ファイルも参照してください。

はじめに

• Core Web Vitals（LCP、FID/INP、CLS）、読み込み時間、バンドルサイズ、実行時統計などの指標で現在のパフォーマンスを測定します。
• optimizeを使って、大きな画像、高コストなJavaScript、レイアウトの乱れなど具体的なボトルネックを特定します。
• スキルに記載された最適化戦略に従います。例:
  • 画像の最適化（最新フォーマット、圧縮、遅延読み込み）
  • バンドルサイズの削減
  • アニメーションやレンダリングのパフォーマンス改善
  • ネットワークリクエストの最小化

プロジェクトへの適用

• リポジトリや使用ツール、制約に合わせてワークフローをカスタマイズしてください。
• 変更前後で必ず測定し、効果を確認しましょう。

よくある質問

optimizeはすべてのウェブプロジェクトに適していますか？

UIパフォーマンスが問題となっている、またはユーザーから遅延やもたつきの報告があるプロジェクトに最適です。特にCore Web Vitalsの改善やバンドルサイズ削減を目指すチームに有用です。

まずどのファイルを確認すればいいですか？

メインのワークフローはSKILL.mdから始めてください。スキルディレクトリ内の他のファイルも詳細理解に役立ちます。

optimizeは画像最適化にどう役立ちますか？

最新フォーマットの利用、適切なサイズ設定、圧縮、遅延読み込み、CDN配信など、画像読み込み高速化の実践的なヒントを提供します。

optimizeはモバイルパフォーマンスにも使えますか？

はい、遅い接続やデバイス制限などモバイルユーザーに影響する問題の診断ガイドも含まれています。

詳細はどこで確認できますか？

ファイルタブを開くと、参照資料や高度な最適化用のヘルパースクリプトを含む全ファイルツリーを閲覧できます。