Hook Performance Budget Guard — bloquea deploys que rompen Core Web Vitals

Qué es#

Performance budgets son límites que vos definís: "el bundle JS no puede pasar 200KB gzipped", "LCP no puede ser mayor a 2.5s". Si tu app los rompe, hay regresión.

Este hook monitorea automáticamente:

• Bundle size después de cada build
• Core Web Vitals metrics (LCP, FID, CLS)

Si rompés un budget, bloquea el deploy y te muestra qué creció.

Hook event: PostToolUse.

Tabla resumen#

Cómo se instala#

npx claude-code-templates@latest --hook performance/performance-budget-guard

Para Claude:

Instalé el hook performance/performance-budget-guard. Configurá los
budgets iniciales: bundle máximo 200KB gzip, LCP máximo 2.5s, CLS
máximo 0.1.

Qué podés hacer con esto#

Catch regresiones de bundle#

Claude agrega una lib pesada por error → bundle crece 50KB → el hook bloquea deploy y te avisa qué dependency fue.

Mantener Core Web Vitals#

Si tu app vive de SEO, no podés tolerar regresión de LCP. El hook protege.

Combo con Deployment Health Monitor#

Performance Budget Guard es pre-deploy. Deployment Health Monitor es post-deploy. Cubren ambas ventanas.

Para teams con SLO de UX#

Si tenés acuerdo formal de performance, el hook es enforcement automático del SLO.

Cuándo NO conviene#

Bajalo de la fuente#

• Ficha en aitmpl.com: Performance Budget Guard Hook — comando exacto.
• Config JSON: performance-budget-guard.json.

Recursos relacionados#

• Performance Monitor Hook — métricas del SO (CPU/memoria) durante Claude Code.
• Deployment Health Monitor Hook — observability post-deploy.
• Dependency Checker Hook — catch deps pesadas pre-build.