docs/ja-JP/skills/benchmark/SKILL.md
このスキルを使用して、パフォーマンスベースラインを測定し、PR前後の回帰を検出し、スタック代替案を比較します。
npx skillsauth add affaan-m/everything-claude-code benchmarkInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
ブラウザMCPを介してリアルブラウザメトリクスを測定:
1. 各ターゲットURLに移動
2. Core Web Vitalsを測定:
- LCP (Largest Contentful Paint) — ターゲット < 2.5s
- CLS (Cumulative Layout Shift) — ターゲット < 0.1
- INP (Interaction to Next Paint) — ターゲット < 200ms
- FCP (First Contentful Paint) — ターゲット < 1.8s
- TTFB (Time to First Byte) — ターゲット < 800ms
3. リソースサイズを測定:
- 合計ページウェイト(ターゲット < 1MB)
- JSバンドルサイズ(ターゲット < 200KBgzipped)
- CSSサイズ
- 画像ウェイト
- サードパーティスクリプトウェイト
4. ネットワークリクエストをカウント
5. レンダリングブロッキングリソースをチェック
APIエンドポイントをベンチマーク:
1. 各エンドポイントに100回ヒット
2. 測定:p50、p95、p99レイテンシ
3. トラック:レスポンスサイズ、ステータスコード
4. ロード下でテスト:10個の同時リクエスト
5. SLAターゲットと比較
開発フィードバックループを測定:
1. コールドビルド時間
2. ホットリロード時間(HMR)
3. テストスイート期間
4. TypeScriptチェック時間
5. Lint時間
6. Dockerビルド時間
変更前後に実行して影響を測定:
/benchmark baseline # 現在のメトリクスを保存
# ... 変更を加える ...
/benchmark compare # ベースラインと比較
出力:
| Metric | Before | After | Delta | Verdict |
|--------|--------|-------|-------|---------|
| LCP | 1.2s | 1.4s | +200ms | WARNING: WARN |
| Bundle | 180KB | 175KB | -5KB | ✓ BETTER |
| Build | 12s | 14s | +2s | WARNING: WARN |
.ecc/benchmarks/にJSONとしてベースラインを保存。Gitで追跡されるため、チームはベースラインを共有します。
/benchmark compareを実行/canary-watchとペアリングしてデプロイ後の監視/browser-qaとペアリングして完全な出荷前チェックリストdata-ai
Design task-local harnesses, eval gates, and reusable skill extraction for Claude dynamic workflow mode and other adaptive agent harnesses.
development
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.
tools
React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.
tools
React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.