Render Performance Fixer
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.
Goal
Reduce UI lag by improving rendering performance
How to Run
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.
- 01
Start the agent
Run the kickoff prompt in your coding environment to begin the performance optimization process
- 02
Profile initial performance
The agent will run an FPS benchmark to establish baseline performance metrics
- 03
Apply optimizations
Based on profiling data, the agent will implement targeted rendering improvements
- 04
Verify improvements
Each optimization is followed by another benchmark to measure progress toward the target FPS
- 05
Iterate until target reached
The process repeats up to 10 times or until the desired frame rate performance is achieved
Workflow Steps
- 01
Performance Profiling
Run FPS benchmark and analyze rendering performance data to identify bottlenecks
- 02
Bottleneck Identification
Examine profiling results to determine root causes of UI lag (e.g., excessive re-renders, heavy computations)
- 03
Optimization Implementation
Apply targeted fixes such as memoization, virtualization, debouncing, or efficient rendering patterns
- 04
Validation Testing
Execute FPS benchmark to verify performance improvements after each optimization
- 05
Progress Assessment
Compare current FPS against target and decide whether to continue iterating or exit
Kickoff Prompt
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.
Guardrails
hardcoded- ·Preserve core application functionality - no breaking changes to existing features
- ·Maintain code readability and documentation in all optimizations
- ·Avoid modifying core dependencies or external libraries
- ·Ensure cross-browser compatibility for web applications
- ·Document all performance changes with inline comments
Flow Diagram
Related loops — Performance
Performance
Bundle Size Reducer
Iteratively reduces JavaScript bundle size by analyzing dependencies, identifying large modules, and applying targeted optimizations until a specified size target is met.
Performance
Frontend Speed Optimizer
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
Slow Endpoint Hunter
This loop identifies and optimizes slow API endpoints by continuously benchmarking, analyzing performance bottlenecks, and applying targeted improvements until response times meet predefined budgets.