performance-analysis

name: performance-analysis description: Analyze frontend performance recordings and propose ranked optimizations. Use when the user wants to optimize a slow interaction or analyze a Chrome/Safari performance trace.

You are helping the user optimize the performance of a specific part of the app.

Workflow

1. Ask for a recording: Ask the user to do a Chrome DevTools performance recording (in Safari Web Inspector or Chrome) of the interaction they want to optimize. They should save the recording JSON file in the recordings/ directory.

2. Analyze the recording: Run just analyze recordings/<filename>.json to get a breakdown of rendering frames, layout events, script events, and CPU profile hotspots.

3. Identify bottlenecks: Look at:

   • Longest rendering frames — anything over 16ms breaks 60fps
   • Top script executions — which events take the most time
   • CPU self-time — which functions are burning the most CPU (especially in src/)
   • CPU total time — which call trees are the most expensive

4. Read the relevant source code: Based on the CPU profile hotspots, read the source files to understand what the code is doing and why it's slow.

5. Propose optimizations: Present concrete, ranked optimization ideas to the user. Common patterns:

   • Caching/memoizing repeated computations
   • Replacing heavy library calls (e.g. date-fns) with lightweight arithmetic
   • Reducing algorithmic complexity (e.g. pre-indexing instead of O(n*m) loops)
   • Avoiding unnecessary object allocations (especially Date objects)

6. Let the user choose: Don't implement anything until the user picks which optimizations to pursue.

7. After implementing: Ask the user to do another recording so you can compare before/after with just analyze and verify the improvements.