optimize

概要

optimizeスキルは、ウェブアプリケーションのUIパフォーマンス問題を体系的に診断・改善するために設計されています。読み込み速度、レンダリング効率、アニメーションの滑らかさ、画像の最適化、バンドルサイズの削減に重点を置いています。遅い、もたつく、カクつくインターフェースや、ユーザーから読み込み時間の長さや反応の鈍さが報告された場合に利用してください。

optimizeを使うべき人

• サイトの速度と応答性を向上させたいフロントエンド開発者
• 遅いまたは反応が鈍いUIに関するユーザーからの苦情があるチーム
• 大きなJavaScriptバンドル、最適化されていない画像、アニメーションの問題を抱えるプロジェクト

optimizeが解決する問題

• 初回ページ読み込みの遅さやインタラクティブになるまでの時間の長さ
• パフォーマンスに影響を与える大きなまたは圧縮されていない画像
• 非効率なレンダリングやレイアウトの乱れ
• アニメーションのカクつきやジャンク
• 過剰に大きいJavaScriptやCSSのバンドル

使い方

インストール手順

1. 以下のコマンドでoptimizeスキルをインストールします：

   npx skills add https://github.com/pbakaus/impeccable --skill optimize

2. まずSKILL.mdファイルを読み、ワークフローと推奨事項の概要を把握してください。

3. 追加のコンテキストや補助ツールとして、README.md、AGENTS.md、metadata.json、およびrules/、resources/、references/、scripts/などの関連フォルダも確認しましょう。

プロジェクトでのoptimizeの適用

• パフォーマンス評価: Core Web Vitals（LCP、FID/INP、CLS）、読み込み時間、バンドルサイズ、実行時パフォーマンスなどの現在の指標を測定します。大きな画像、重いJavaScript、非効率なレンダリングなど、具体的なボトルネックを特定します。
• 最適化計画の策定: 影響度に基づいて修正を優先します。画像の最適化（最新フォーマット、圧縮、遅延読み込み）、バンドルサイズの削減、レンダリングとアニメーションのパフォーマンス改善に注力してください。
• 反復と測定: 変更前後で必ずベンチマークを行い、最適化の効果を確認しましょう。

推奨プレビュー対象ファイル

• SKILL.md（主要なワークフローと推奨事項）

よくある質問

optimizeスキルは何をしますか？

optimizeスキルは、読み込み遅延、レンダリング遅延、アニメーションの問題、大きなアセットサイズなど、フロントエンドのパフォーマンス問題を診断・修正するための体系的なアプローチを提供します。

いつoptimizeを使うべきですか？

アプリケーションが遅く感じられる場合や、ユーザーからのもたつきやカクつきの報告がある場合、または読み込み時間や応答性などの指標を改善したいときに使用してください。

どうやって始めればいいですか？

提供されたnpxコマンドでスキルをインストールし、SKILL.mdの指示に従ってパフォーマンスのボトルネックを評価・対処してください。

詳細やスクリプトはどこで見つけられますか？

リポジトリのFilesタブで追加のリソース、参考資料、補助スクリプトを確認し、最適化ワークフローをサポートしてください。