Performance Budget Setter

What it does

The Performance Budget Setter skill helps AI agents define and enforce performance budgets for web projects. It automatically generates realistic budget templates based on historical data and resource constraints, covering areas like bundle sizes, API latency, database queries, Core Web Vitals, page-specific metrics, and third-party scripts. This allows teams to proactively maintain fast user experiences by setting clear targets and monitoring progress.

When to use it

• When starting a new web project and needing to establish performance goals early on.
• During code reviews to ensure changes don't negatively impact website speed.
• As part of a CI/CD pipeline to automatically check for budget violations before deployment.
• To identify areas where performance optimizations can have the biggest impact.
• When troubleshooting slow page load times or poor user experience issues.

Key capabilities

• Generates performance budget templates with sections for:
  • Bundle Sizes (JS, CSS, Fonts, Images)
  • API Latency (p50, p95, p99 percentiles)
  • Database Query Performance
  • Core Web Vitals (LCP, FID, CLS)
  • Page-Specific Budgets (Homepage, Product Page, Checkout)
  • Third-Party Script Budgets
• Supports CI/CD integration for automated budget checks.
• Provides guidance on using tools like Webpack Bundle Analyzer to visualize and optimize bundle sizes.

Example prompts

• "Create a performance budget template for an e-commerce website."
• "Generate a page-specific budget for the product details page, focusing on image loading time."
• "Show me how to integrate this skill with my CI/CD pipeline using GitHub Actions."

Tips & gotchas

• The generated budgets are starting points and may need adjustment based on specific project needs.
• Requires familiarity with web performance metrics and tools like bundlesize and Lighthouse.
• To effectively use the CI/CD integration, you'll need to configure your repository with appropriate workflows (e.g., .github/workflows/performance-budget.yml).