docs/zh-CN/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. 测量核心网页指标:
- LCP(最大内容绘制)— 目标 < 2.5 秒
- CLS(累积布局偏移)— 目标 < 0.1
- INP(与下一次绘制的交互)— 目标 < 200 毫秒
- FCP(首次内容绘制)— 目标 < 1.8 秒
- TTFB(首字节时间)— 目标 < 800 毫秒
3. 测量资源大小:
- 页面总重量(目标 < 1MB)
- JS 包大小(目标 < 200KB gzip 压缩后)
- CSS 大小
- 图片重量
- 第三方脚本重量
4. 统计网络请求数量
5. 检查阻塞渲染的资源
对 API 端点进行基准测试:
1. 每个端点请求 100 次
2. 测量:p50、p95、p99 延迟
3. 追踪:响应大小、状态码
4. 负载测试:10 个并发请求
5. 与 SLA 目标进行对比
测量开发反馈循环效率:
1. 冷构建时间
2. 热重载时间 (HMR)
3. 测试套件执行时间
4. TypeScript 检查时间
5. 代码检查时间
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 |
将基线数据以 JSON 格式存储在 .ecc/benchmarks/ 中。通过 Git 追踪,便于团队共享基线。
/benchmark compare/canary-watch 进行部署后监控/browser-qa 完成发布前完整检查清单data-ai
Run team-based orchestration for agent squads using work items, ownership, agent Kanban, merge gates, and control pane handoffs.
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.