使用此技能测量性能基线，检测PR前后的回归，并比较堆栈替代方案。
npx skills add https://github.com/affaan-m/ECC --skill benchmark이 명령을 Claude Code에 복사하여 붙여넣어 스킬을 설치하세요
| name | benchmark |
| description | 使用此技能测量性能基线，检测PR前后的回归，并比较堆栈替代方案。 |
| origin | ECC |
通过浏览器 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 完成发布前完整检查清单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.
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.
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.
Agent-driven scheduling and publishing of social media posts across 13 platforms via SocialClaw. Use when the user wants to publish to X, LinkedIn, Instagram, Facebook Pages, TikTok, Discord, Telegram, YouTube, Reddit, WordPress, or Pinterest — or when managing campaigns, uploading media, or monitoring post delivery status.
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches.
Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building any interactive UI component or form.