# Performance Budget Enforcer

> Enforces performance budgets for bundle size, load time, memory usage, and API response times. Integrates with CI/CD.

- Skill: `fadil369/performance-budget-enforcer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fadil369/performance-budget-enforcer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fadil369/performance-budget-enforcer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: fadil369 (https://skillmd.com/u/fadil369)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fadil369/performance-budget-enforcer

---


# Performance Budget Enforcer

Enforces performance budgets for bundle size, load time, memory usage, and API response times. Integrates with CI/CD.

## Decision Framework

### When to Apply
Use when: Performance is critical, CI/CD integration needed, bundle size growing, slow page loads

### When NOT to Apply
Don't use when: Performance is not a concern (rare), simple scripts

## Anti-Patterns

### 1. Loading Everything Upfront
```javascript
// BAD: Import everything
import { every, feature, known } from './massive-library';

// GOOD: Lazy load
const Feature = lazy(() => import('./Feature'));
```

### 2. No Performance Monitoring
You can't improve what you don't measure.


## Trigger Phrases

- "Performance budget"
- "Bundle size"
- "Load time optimization"
- "Lighthouse score"
- "Core Web Vitals"

## Patterns

### Bundle Budget
```javascript
// webpack.config.js
module.exports = {
  performance: {
    maxAssetSize: 250000,      // 250KB per asset
    maxEntrypointSize: 400000, // 400KB total entry
    hints: 'error'
  }
};
```

### Performance Monitor
```javascript
class PerformanceBudget {
  constructor(budgets) { this.budgets = budgets; }

  check(metrics) {
    const violations = [];
    for (const [metric, budget] of Object.entries(this.budgets)) {
      if (metrics[metric] > budget.max) {
        violations.push({ metric, actual: metrics[metric], budget: budget.max, over: metrics[metric] - budget.max });
      }
    }
    return { passed: violations.length === 0, violations };
  }
}

const budgets = {
  fcp: { max: 1800, name: 'First Contentful Paint' },
  lcp: { max: 2500, name: 'Largest Contentful Paint' },
  tti: { max: 3800, name: 'Time to Interactive' },
  cls: { max: 0.1, name: 'Cumulative Layout Shift' },
  bundleSize: { max: 250000, name: 'Bundle Size' }
};
```

## Integration
- Works with: deployment-pipeline-architect, dashboard-composition-engine