Performance Benchmark & Regression Detection is a development claude skill built by Affaan M. Best for: Development teams use this before launches and PRs to ensure performance targets are met and catch regressions early..
- What it does
- Measure and compare performance metrics across pages, APIs, and builds to detect regressions.
- Category
- development
- Created by
- Affaan M
- Last updated
Performance Benchmark & Regression Detection
Measure and compare performance metrics across pages, APIs, and builds to detect regressions.
Skill instructions
name: benchmark description: Use this skill to measure performance baselines, detect regressions before/after PRs, and compare stack alternatives. origin: ECC
Benchmark — Performance Baseline & Regression Detection
When to Use
- Before and after a PR to measure performance impact
- Setting up performance baselines for a project
- When users report "it feels slow"
- Before a launch — ensure you meet performance targets
- Comparing your stack against alternatives
How It Works
Mode 1: Page Performance
Measures real browser metrics via browser MCP:
1. Navigate to each target URL
2. Measure Core Web Vitals:
- LCP (Largest Contentful Paint) — target < 2.5s
- CLS (Cumulative Layout Shift) — target < 0.1
- INP (Interaction to Next Paint) — target < 200ms
- FCP (First Contentful Paint) — target < 1.8s
- TTFB (Time to First Byte) — target < 800ms
3. Measure resource sizes:
- Total page weight (target < 1MB)
- JS bundle size (target < 200KB gzipped)
- CSS size
- Image weight
- Third-party script weight
4. Count network requests
5. Check for render-blocking resources
Mode 2: API Performance
Benchmarks API endpoints:
1. Hit each endpoint 100 times
2. Measure: p50, p95, p99 latency
3. Track: response size, status codes
4. Test under load: 10 concurrent requests
5. Compare against SLA targets
Mode 3: Build Performance
Measures development feedback loop:
1. Cold build time
2. Hot reload time (HMR)
3. Test suite duration
4. TypeScript check time
5. Lint time
6. Docker build time
Mode 4: Before/After Comparison
Run before and after a change to measure impact:
/benchmark baseline # saves current metrics
# ... make changes ...
/benchmark compare # compares against baseline
Output:
| Metric | Before | After | Delta | Verdict |
|--------|--------|-------|-------|---------|
| LCP | 1.2s | 1.4s | +200ms | WARNING: WARN |
| Bundle | 180KB | 175KB | -5KB | ✓ BETTER |
| Build | 12s | 14s | +2s | WARNING: WARN |
Output
Stores baselines in .ecc/benchmarks/ as JSON. Git-tracked so the team shares baselines.
Integration
- CI: run
/benchmark compareon every PR - Pair with
/canary-watchfor post-deploy monitoring - Pair with
/browser-qafor full pre-ship checklist
Use this skill
Most skills are portable instruction packages. Claude Code supports SKILL.md directly. Other agents can use adapted files like AGENTS.md, .cursorrules, and GEMINI.md.
Claude Code
Save SKILL.md into your Claude Skills folder, then restart Claude Code.
mkdir -p ~/.claude/skills/performance-benchmark-regression-detection && curl -L "https://raw.githubusercontent.com/affaan-m/everything-claude-code/HEAD/skills/benchmark/SKILL.md" -o ~/.claude/skills/performance-benchmark-regression-detection/SKILL.mdInstalls to ~/.claude/skills/performance-benchmark-regression-detection/SKILL.md.
Use cases
Development teams use this before launches and PRs to ensure performance targets are met and catch regressions early.
Reviews
No reviews yet. Be the first to review this skill.
No signup required
Stats
Creator
AAffaan M
@affaan-m