benchmark

benchmark skill の概要

benchmark skill ができること

benchmark skill は、Web とアプリのワークフローにおけるパフォーマンス回帰の検出を目的としています。ベースラインを作り、変更前後を比較し、PR によってページが遅くなったのか、重くなったのか、あるいは不安定になったのかを追跡できます。実務では、この benchmark skill は「この変更はパフォーマンスを改善したのか、それとも悪化させたのか」を知りたいチームにとくに役立ちます。

どんな人に向いているか

ページ速度、Core Web Vitals、Lighthouse 系のチェック、バンドルサイズ、時間経過に伴うロード時間の傾向を重視するなら、この benchmark skill を使う価値があります。スクリーンショットや手早い目視確認だけで推測するのではなく、再現性のある方法でパフォーマンス変化を評価したいレビュアー、フロントエンドエンジニア、AI エージェントとの相性が良い skill です。

他と何が違うのか

benchmark skill は、単なる「テストを実行する」ための汎用プロンプトではありません。変更前後の比較、回帰検出、継続的なトレンド把握を軸にしており、ブラウザベースのパフォーマンス計測に合わせたワークフロー指針が組み込まれています。そのため、「speed issues を見て」とだけ依頼する一回限りのプロンプトよりも、Performance Optimization の用途ではずっと実用的です。

benchmark skill の使い方

benchmark のインストールとセットアップ

Claude の skills 環境に、リポジトリの skill コマンドを使って benchmark skill をインストールし、実際のタスクで使う前に skill ファイルを開いて確認してください。想定されるインストールパスは次のとおりです。
npx skills add garrytan/gstack --skill benchmark

インストール後は、現在のワークスペースで skill が利用可能になっていること、そして対象タスクが測定可能な粒度で具体化されていることを確認します。この skill は、検証対象の repo、対象ページや route、評価したい変更点が最初から分かっているときに最も力を発揮します。

最初に読むべきもの

まず SKILL.md を読み、生成された構成を理解したい場合は SKILL.md.tmpl も確認してください。この repository には、この skill 用の追加 rules/、resources/、補助 script は公開されていないため、主な正本は skill ファイルそのものです。判断に役立つのは、とくに前文、plan-mode の案内、そして benchmark skill をいつ実行すべきかに関わる route や制約の नोटです。

良いプロンプトの書き方

弱いプロンプトは「パフォーマンスを確認して」です。benchmark をうまく使うなら、対象、ベースライン、そして必要な判断を明確にします。

• 「/pricing を画像圧縮の変更前後で比較し、LCP、CLS、総転送サイズの回帰を報告して」
• 「checkout ページを mobile emulation で benchmark して、新しい bundle 分割でロード時間が改善したか教えて」
• 「homepage の performance benchmark を実行し、この PR を安全に merge できるか要約して」

ページ、デバイス前提、失敗条件を含めてください。そうすることで曖昧さが減り、結果をそのまま判断材料にしやすくなります。

役立つ結果を出すためのワークフロー

benchmark のガイドは、再現可能なループとして使うのが基本です。対象ページを特定し、ベースラインを確立し、比較を実行し、最後に変更内容と delta を照らして解釈します。plan mode で作業している場合は、skill が確認だけを行うのか、計測まで実行するのかを先に確かめてください。より良い出力を得るには、テスト範囲を狭く保つことが重要です。通常は、サイト全体を広く見るより、重要な route を 1 つ絞るほうが有効です。

benchmark skill の FAQ

benchmark skill は Web performance 専用ですか？

主用途は、ページ、route、フロントエンド変更など、ブラウザ上で見えるパフォーマンスの最適化です。もし対象が backend latency、インフラの profiling、database tuning なら、ユーザーから見えるページ指標を目的にしていない限り、benchmark skill は最初の選択肢として最適ではないかもしれません。

skill だけで足りますか、それとも詳細なプロンプトが必要ですか？

skill は作業の骨組みを整えてくれますが、それでも具体的な対象は必要です。大まかなプロンプトでも benchmark skill は起動できますが、route、変更内容、比較対象を与えたほうが benchmark の使い方としてはずっと強くなります。依頼が具体的であるほど、agent が推測しなくて済みます。

benchmark は初心者向きですか？

はい、変更によって performance が悪化したかをガイド付きで確認したいなら向いています。評価チェックリストをゼロから自作するより使いやすい一方で、どのページや機能を測りたいのかは自分で把握しておく必要があります。

どんなときに使わないべきですか？

UI の質感を定性的にレビューしたいだけのとき、ページが不安定すぎて意味のある計測ができないとき、問題の本質が performance ではないときは benchmark skill を使わないでください。安定した before/after 比較を定義できないなら、benchmark の結果はノイズが大きくなります。

benchmark skill を改善するには

計測可能な対象をはっきり指定する

品質を最も大きく上げるのは、何を benchmark し、成功条件を何にするかを正確に指定することです。どの URL、どの device class、どの metric が重要かを明示してください。Performance Optimization では、多くの場合「すべての performance issues」ではなく、LCP や bundle size のように主要 metric を 1 つ挙げるほうが効果的です。

テスト対象の変更内容を含める

benchmark は、何が変わったのかを skill が把握しているほど強くなります。たとえば、新しい image pipeline、code-splitting の refactor、font の差し替え、third-party script の削除などです。その文脈があると、通常のばらつきと本当の regression を切り分けやすくなり、結果の信頼性も上がります。

実際に使う比較条件で依頼する

merge 判断が必要なら、その旨を伝えてください。修正案が必要なら、それも明示してください。役立つ follow-up プロンプトの例は次のとおりです。

• 「最後に安定していた build と比較して、5% を超える regression があれば指摘して」
• 「この branch を benchmark して、結果が悪ければ最も効果の大きい修正案を教えて」
• 「mobile と desktop で再実行して、LCP が最も悪い route を優先して」

最初の実行結果をもとに反復する

最初の結果がノイジーなら、再実行の前に入力を改善してください。route を絞る、無関係な変更を外す、テスト条件をより厳密に定義する、といった調整が有効です。benchmark skill は、あらゆる速度問題を一度で診断する道具ではなく、意思決定を支えるために繰り返し使う benchmark skill として扱うと最も効果的です。