This loop identifies and resolves rendering performance issues in your application to reduce UI lag. It uses performance profiling tools and optimization techniques to iteratively improve frame rate (FPS) until target levels are achieved. Ideal for applications experiencing stuttering, slow updates, or unresponsive UI elements.
Reduce UI lag by improving rendering performance
Activate this agent in your IDE to automatically identify and fix rendering performance bottlenecks. The agent will profile your application, apply targeted optimizations, and verify improvements through FPS benchmarking until your target frame rate is reached.
Start the agent
Run the kickoff prompt in your coding environment to begin the performance optimization process
Profile initial performance
The agent will run an FPS benchmark to establish baseline performance metrics
Apply optimizations
Based on profiling data, the agent will implement targeted rendering improvements
Verify improvements
Each optimization is followed by another benchmark to measure progress toward the target FPS
Iterate until target reached
The process repeats up to 10 times or until the desired frame rate performance is achieved
Performance
Iteratively reduces JavaScript bundle size by analyzing dependencies, identifying large modules, and applying targeted optimizations until a specified size target is met.
Performance
Automatically improves frontend page speed by iteratively analyzing Lighthouse reports and applying targeted optimizations. This loop runs until your target Lighthouse performance score is achieved.
Performance
This loop identifies and optimizes slow API endpoints by continuously benchmarking, analyzing performance bottlenecks, and applying targeted improvements until response times meet predefined budgets.
Performance Profiling
Run FPS benchmark and analyze rendering performance data to identify bottlenecks
Bottleneck Identification
Examine profiling results to determine root causes of UI lag (e.g., excessive re-renders, heavy computations)
Optimization Implementation
Apply targeted fixes such as memoization, virtualization, debouncing, or efficient rendering patterns
Validation Testing
Execute FPS benchmark to verify performance improvements after each optimization
Progress Assessment
Compare current FPS against target and decide whether to continue iterating or exit
Start the "Render Performance Fixer" loop. Goal: Reduce UI lag by improving rendering performance Max iterations: 10 Between iterations run: fps benchmark Exit when: FPS target achieved Begin performance optimization process: Profile the application's render performance, identify UI bottlenecks causing lag, implement optimizations iteratively, and verify improvements with FPS benchmarks until target frame rate is achieved. Self-pace this loop. After each iteration, run `fps benchmark` and evaluate the output, and only continue if the exit condition is not met (FPS target achieved). Stop when the exit condition passes or 10 iterations are reached. Give a short status update each pass.
